@import "/UI/Theme.scss";

UISettingsPane
{
	@include ui-section;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0px;
	height: 100%;
	padding: 1px;
	font-family: $body-font;
}

UISettingsPane .title-bar
{
	@include ui-title-bar;
	overflow: hidden;

	label
	{
		text-overflow: ellipsis;
	}
}

UISettingsPane .settings-body
{
	@include ui-scroll;
	flex-direction: column;
	flex-grow: 1;
	flex-shrink: 1;
	min-height: 0px;
	padding: 12px 10px 8px 10px;
	overflow-y: scroll;

	> *
	{
		flex-shrink: 0;
	}
}

UISettingsPane .settings-body .page
{
	flex-direction: column;
	flex-shrink: 0;
}

// a line of plain text on a page, for empty lists, hints and warnings
UISettingsPane .settings-body .note
{
	padding: 10px 8px;
	color: $ui-text;
	opacity: 0.55;
}

UISettingsPane .settings-body .list-entry
{
	flex-direction: row;
	align-items: center;
	flex-shrink: 0;
	min-height: 48px;
	padding: 6px 8px;
	margin-bottom: 2px;
	background-color: $ui-row-alt;

	&:hover
	{
		background-color: $ui-blue-soft;
	}

	&.clickable
	{
		cursor: pointer;

		&:hover
		{
			sound-in: ui.hover;

			.list-entry-action
			{
				opacity: 1;
			}
		}

		&:active
		{
			sound-in: ui.select;
		}
	}
}

UISettingsPane .settings-body .list-entry-icon
{
	width: 32px;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: $ui-text;

	&.material-icon
	{
		font-family: "Material Icons";
	}
}

UISettingsPane .settings-body .list-entry-avatar
{
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

UISettingsPane .settings-body .list-entry-info
{
	flex-direction: column;
	flex-grow: 1;
	justify-content: center;
	overflow: hidden;
	margin-left: 10px;
}

UISettingsPane .settings-body .list-entry-name
{
	font-size: 13px;
	font-weight: 600;
	color: $ui-text;
	white-space: nowrap;
	text-overflow: ellipsis;
}

UISettingsPane .settings-body .list-entry-detail
{
	margin-top: 2px;
	font-size: 11px;
	color: $ui-text;
	opacity: 0.55;
}

// the icon on the right
UISettingsPane .settings-body .list-entry-action
{
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	opacity: 0.5;

	i
	{
		font-size: 18px;
	}

	&.pressable:hover
	{
		background-color: rgba( 0, 0, 0, 0.08 );
		opacity: 1;
	}
}

UISettingsPane .settings-body .section-header
{
	@include ui-section-header;

	&:not(:first-child)
	{
		margin-top: $ui-section-gap;
	}
}

UISettingsPane .settings-body .utility-page
{
	flex-direction: column;
	flex-shrink: 0;

	> *
	{
		width: 100%;
		flex-shrink: 0;
	}
}