div.settings-view {
	div.room-details {
		display: flex;
		gap: .5rem;

		img.avatar {
			margin-top: 0.5rem;
		}

		div.room-name {
			font-size: 1.2rem;
			font-weight: bold;
			text-overflow: ellipsis;
			text-wrap: nowrap;
		}

		button.leave-room {
			padding: .5rem 1rem;

			&:hover, &:focus {
				background-color: var(--error-color);
				color: var(--inverted-text-color);
			}
		}
	}

	width: min(60rem, 80vw);
	display: flex;
	flex-direction: column;

	h2, h3, h4 {
		margin: 0;
	}

	summary > h3, summary > h4 {
		display: inline;
	}

	table {
		text-align: left;

		tr {
			height: 2.5rem;
		}

		div.preference {
			display: flex;

			&.select-preference > select {
				padding: .25rem;
			}

			&.string-preference > input {
				border: 1px solid var(--border-color);
				padding: .25rem;
				/* TODO make this less hacky */
				width: 8rem;
			}
		}
	}

	> div.custom-css-input {
		display: flex;
		flex-direction: column;
		gap: .5rem;
		margin-right: 1rem;

		> div.header {
			display: flex;
			gap: .5rem;
		}

		> textarea {
			width: 100%;
			box-sizing: border-box;
			resize: vertical;
			border: 1px solid var(--border-color);
			outline: none;
			height: 10rem;
			min-height: 3rem;
			font-family: var(--monospace-font-stack);
		}

		> div.vscode-wrapper {
			position: fixed;
			inset: 0;
			z-index: 10;
			background-color: var(--background-color);

			> div.loader {
				position: absolute;
				inset: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		> div.buttons {
			display: flex;
			justify-content: right;
			gap: .5rem;

			> button {
				padding: .5rem 1rem;
				font-weight: bold;

				&.delete:hover, &.delete:focus {
					background-color: var(--error-color);
					color: var(--inverted-text-color);
				}
			}
		}
	}

	> div.misc-buttons > button {
		padding: .5rem 1rem;
		display: block;

		&.logout {
			margin-top: 2rem;

			&:hover, &:focus {
				background-color: var(--error-color);
				color: var(--inverted-text-color);
			}
		}
	}
}