@use '../variables' as *;

.#{$prefix}dropdown {
	display: inline-block;

	&-trigger {
	}

	&-positioner {
		outline: 0;
		z-index: 1000;
	}

	&-popup {
		box-sizing: border-box;
		padding-block: var(--#{$prefix}dropdown-popup-padding-block);
		border-radius: var(--#{$prefix}dropdown-popup-border-radius);
		background-color: var(--#{$prefix}dropdown-popup-background);
		backdrop-filter: var(--#{$prefix}dropdown-popup-backdrop-filter);
		-webkit-backdrop-filter: var(--#{$prefix}dropdown-popup-backdrop-filter);
		color: var(--#{$prefix}dropdown-popup-color);
		transform-origin: var(--transform-origin);
		transition:
			transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
			opacity 200ms ease-out,
			backdrop-filter 200ms ease-out;
		border: var(--#{$prefix}dropdown-popup-border-width) solid var(--#{$prefix}dropdown-popup-border-color);
		box-shadow: var(--#{$prefix}dropdown-popup-shadow);
		overflow: hidden;

		&[data-starting-style],
		&[data-ending-style] {
			opacity: 0;
			transform: scale(0.92) translateY(-8px);
		}
	}

	&-arrow {
		display: flex;

		&[data-side='top'] {
			bottom: -8px;
			rotate: 180deg;
		}

		&[data-side='bottom'] {
			top: -8px;
			rotate: 0deg;
		}

		&[data-side='left'] {
			right: -13px;
			rotate: 90deg;
		}

		&[data-side='right'] {
			left: -13px;
			rotate: -90deg;
		}

		&__fill {
			fill: var(--#{$prefix}dropdown-popup-background);
		}

		&__stroke {
			fill: var(--#{$prefix}dropdown-popup-border-color);
		}
	}

	&-item {
		outline: 0;
		cursor: default;
		user-select: none;
		padding-block: var(--#{$prefix}dropdown-item-padding-block);
		padding-left: var(--#{$prefix}dropdown-item-padding-left);
		padding-right: var(--#{$prefix}dropdown-item-padding-right);
		display: flex;
		font-size: var(--#{$prefix}dropdown-item-font-size);
		line-height: var(--#{$prefix}dropdown-item-line-height);
		border-radius: var(--#{$prefix}dropdown-item-border-radius);
		margin-inline: var(--#{$prefix}dropdown-item-margin-inline);
		position: relative;
		z-index: 0;
		transition: var(--#{$prefix}dropdown-item-transition);

		&:focus-visible {
			outline: 2px solid var(--#{$prefix}dropdown-item-focus-outline);
			outline-offset: 2px;
			outline-style: solid;
		}

		&--selected {
			color: var(--#{$prefix}dropdown-item-selected-color);
		}

		&--disabled {
			opacity: var(--#{$prefix}dropdown-item-disabled-opacity);
			cursor: not-allowed;
		}

		&__container {
			display: flex;
			align-items: center;
			gap: var(--#{$prefix}dropdown-item-gap);
			width: 100%;
			position: relative;
			z-index: 1;
		}

		&__start-content {
			display: flex;
			align-items: center;
			flex-shrink: 0;
		}

		&__content {
			display: flex;
			flex-direction: column;
			flex: 1;
			min-width: 0;
		}

		&__title {
			font-weight: var(--#{$prefix}dropdown-item-title-font-weight);
			font-size: var(--#{$prefix}dropdown-item-title-font-size);
			line-height: var(--#{$prefix}dropdown-item-title-line-height);
			color: var(--#{$prefix}dropdown-item-title-color);
			letter-spacing: var(--#{$prefix}dropdown-item-title-letter-spacing);
			transition: var(--#{$prefix}dropdown-item-content-transition);
		}

		&__subtitle {
			font-size: var(--#{$prefix}dropdown-item-subtitle-font-size);
			font-weight: var(--#{$prefix}dropdown-item-subtitle-font-weight);
			color: var(--#{$prefix}dropdown-item-subtitle-color);
			margin-top: var(--#{$prefix}dropdown-item-subtitle-margin-top);
			line-height: var(--#{$prefix}dropdown-item-subtitle-line-height);
			letter-spacing: var(--#{$prefix}dropdown-item-subtitle-letter-spacing);
			transition: var(--#{$prefix}dropdown-item-content-transition);
		}

		&__description {
			font-size: var(--#{$prefix}dropdown-item-description-font-size);
			font-weight: var(--#{$prefix}dropdown-item-description-font-weight);
			color: var(--#{$prefix}dropdown-item-description-color);
			margin-top: var(--#{$prefix}dropdown-item-description-margin-top);
			line-height: var(--#{$prefix}dropdown-item-description-line-height);
			letter-spacing: var(--#{$prefix}dropdown-item-description-letter-spacing);
			transition: var(--#{$prefix}dropdown-item-content-transition);
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		&__end-content {
			display: flex;
			align-items: center;
			flex-shrink: 0;
			margin-left: auto;
		}
	}

	&-separator {
		margin: var(--#{$prefix}dropdown-separator-margin);
		height: var(--#{$prefix}dropdown-separator-height);
		background-color: var(--#{$prefix}dropdown-separator-color);
	}

	&-submenu {
	}

	&-submenu-trigger {
		outline: 0;
		cursor: default;
		user-select: none;
		padding-block: var(--#{$prefix}dropdown-item-padding-block);
		padding-left: var(--#{$prefix}dropdown-item-padding-left);
		padding-right: var(--#{$prefix}dropdown-item-padding-right);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--#{$prefix}dropdown-item-gap);
		font-size: var(--#{$prefix}dropdown-item-font-size);
		line-height: var(--#{$prefix}dropdown-item-line-height);
		border-radius: var(--#{$prefix}dropdown-item-border-radius);
		margin-inline: var(--#{$prefix}dropdown-item-margin-inline);
		position: relative;
		z-index: 0;
		transition: var(--#{$prefix}dropdown-item-transition);

		&:focus-visible {
			outline: 2px solid var(--#{$prefix}dropdown-item-focus-outline);
			outline-offset: 2px;
			outline-style: solid;
		}
	}
}