div.room-list-wrapper {
	grid-area: roomlist;
	background: linear-gradient(in hsl longer hue, red 0 0, magenta);
	box-sizing: border-box;
	overflow: hidden;
	scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
}

div.room-list {
	background-color: hsla(0, 0%, 96%, .9);
	overflow-y: auto;
	flex: 1;
}

input.room-search {
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
	border: none;
	background-color: hsla(0, 0%, 96%, .9);
	outline: none;
}

div.room-entry {
	width: 100%;
	display: flex;
	gap: 4px;
	/*border-radius: 4px;*/
	user-select: none;
	cursor: pointer;

	&:hover {
		background-color: rgba(0, 0, 0, 0.075);
	}

	&.active {
		background-color: rgba(0, 0, 0, 0.125);
	}

	> div.room-entry-left {
		height: 3rem;
		width: 3rem;

		> img.room-avatar {
			padding: 4px;
		}
	}

	> div.room-entry-right {
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		justify-content: space-around;

		> div.room-name {
			font-weight: bold;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		> div.message-preview {
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;

			> span.sender-name {
				display: block;
				max-width: 6rem;
				overflow: hidden;
			}

			> span.preview-text {
				display: block;
			}
		}
	}

	> div.room-entry-unreads {
		display: flex;
		align-items: center;
		width: 3rem;

		> div.unread-count {
			width: 1.5rem;
			height: 1.5rem;
			border-radius: 50%;
			background-color: green;
			text-align: center;
			color: white;
			font-weight: bold;

			&.highlighted {
				background-color: darkred;
			}
		}
	}
}

img.avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	object-fit: cover;

	&.small {
		width: 1rem;
		height: 1rem;
	}
}