@import "../../_base.scss"

.chats-window {
	height: 100%;
	width: 100%;

	$horizontal-padding-margin: calc((2*100%)/1980);

	.tabs {
		height: 2%;
		width: 100%;

		display: flex;
		flex-flow: row;
		overflow-x: scroll;

		&::-webkit-scrollbar {
			height: 0px;
		}

		.tab {
			height: 100%;
			flex-grow: 1;
			padding: 0 $horizontal-padding-margin;

			display: flex;

			button {
				height: 100%;
				width: 100%;

				display: flex;
				flex-direction: row;
				align-items: center;

				$clamped-horizontal-padding-margin: clamp(5px, $horizontal-padding-margin, $horizontal-padding-margin);
				margin: 0 $clamped-horizontal-padding-margin;
				padding: 0 $clamped-horizontal-padding-margin;

				white-space: nowrap;

				background-color: #EFF9F9;
				border: $border-style;

				$radius: calc((6*100%)/1980);
				$clamped-radius: clamp(6px, $radius, $radius);
				border-radius: $clamped-radius $clamped-radius 0 0;

				font-size: $font-size;

				img {
					height: $icon-size;
					aspect-ratio: 1;
				}
			}
		}
	}

	.chat {
		height: 98%;
		width: 100%;

		background-color: #ECF6F9;

		.header {
			height: 7%;

			border: $border-style;
			
			.info {
				height: 45%;
				display: flex;
				flex-direction: column;

				padding-left: 2%;

				background: linear-gradient(180deg, #BFE3EB, #DEFBFE);

				font-size: $font-size;

				.room-name {
					margin: 0;
					margin-top: 1%;
					font-weight: bold;
				}

				.room-topic {
					margin: 0;
					color: darkgrey;
				}
			}
		}
	}
}