@use '../variables' as *;

.#{$prefix}list {
	margin: 0;
	padding: var(--#{$prefix}list-padding-y) var(--#{$prefix}list-padding-x);
	color: var(--#{$prefix}list-color);
	background-color: var(--#{$prefix}list-background);

	&-item {
		position: relative;
		font-size: var(--#{$prefix}list-item-font-size);
		font-weight: var(--#{$prefix}list-item-font-weight);
		border-radius: var(--#{$prefix}list-item-border-radius);
		text-decoration: none;
		z-index: 0;
		color: var(--#{$prefix}list-item-color);
		background-color: var(--#{$prefix}list-item-background);
		-webkit-tap-highlight-color: transparent;

		&__container {
			position: relative;
			padding-block: var(--#{$prefix}list-item-padding-y);
			padding-inline: var(--#{$prefix}list-item-padding-x);
			height: var(--#{$prefix}list-item-height);
			min-height: var(--#{$prefix}list-item-min-height);
			display: flex;
			align-items: center;
			gap: var(--#{$prefix}list-item-gap);
		}

		&:hover {
			text-decoration: none;
		}

		&--hoverable,
		&--selected {
			cursor: pointer;
			user-select: none;
		}

		&--disabled {
			opacity: 0.6;
			pointer-events: none;
		}

		&__start-content,
		&__end-content {
			flex-shrink: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: var(--#{$prefix}list-item-gap);
		}

		&__content {
			flex-grow: 1;
			display: grid;
			overflow: hidden;
		}

		&__title {
			font-size: var(--#{$prefix}list-item-title-font-size);
			font-weight: var(--#{$prefix}list-item-title-font-weight);
			line-height: var(--#{$prefix}list-item-title-line-height);
			opacity: var(--#{$prefix}list-item-title-opacity);
			overflow: hidden;
			color: var(--#{$prefix}list-item-title-color);
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}

		&__subtitle {
			font-size: var(--#{$prefix}list-item-subtitle-font-size);
			font-weight: var(--#{$prefix}list-item-subtitle-font-weight);
			line-height: var(--#{$prefix}list-item-subtitle-line-height);
			opacity: var(--#{$prefix}list-item-subtitle-opacity);
			overflow: hidden;
			color: var(--#{$prefix}list-item-subtitle-color);
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
	}

	&-subheader--bordered {
		border-bottom: var(--#{$prefix}list-subheader-border-width) solid var(--#{$prefix}list-subheader-border-color);
	}

	&-group & {
		--#{$prefix}list-background: var(--#{$prefix}list-group-background);
	}
}