@import "/UI/Theme.scss";

UIGroupedList
{
	flex-direction: column;
	width: 185px;
	height: 100%;
	flex-shrink: 0;
	gap: 8px;
	font-family: $body-font;
}

UIGroupedList .filter.textentry
{
	@include ui-text-entry;
	width: 100%;
	flex-shrink: 0;
}

// white area section
UIGroupedList .list
{
	@include ui-sidebar;
	flex-grow: 1;
	flex-shrink: 1;
	padding: 1px;
	overflow-y: scroll;
}

UIGroupedList .group
{
	flex-direction: column;
	flex-shrink: 0;
	margin-bottom: 18px;

	&:last-child
	{
		margin-bottom: 0px;
	}
}

UIGroupedList .group-header
{
	@include ui-title-bar;
}

UIGroupedList .group-items
{
	flex-direction: column;
	flex-shrink: 0;
	margin-top: 1px;
}

// every other row is a shade darker, starting with the first
UIGroupedList .item
{
	flex-direction: row;
	align-items: center;
	flex-shrink: 0;
	height: 19px;
	padding: 0 9px;
	color: $ui-text;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;

	label
	{
		text-overflow: ellipsis;
		overflow: hidden;
	}

	// before ui-selectable, so the hover and active fills win over it
	&.alt
	{
		background-color: $ui-row-alt;
	}

	@include ui-selectable;
}