@use "@gloria/a11y/_mixins.scss" as *;

.c-dropdown {
	--dropdown-anim-transform-offset: 10px;

	position: relative;
	display: inline-block;

	&__content {
		position: absolute;
		min-width: 200px;
		max-height: 310px;
		overflow-y: auto;
		background-color: var(--color-gray-100);
		border: 1px solid var(--color-gray-500);
		border-radius: var(--radius-1);
		z-index: 100;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--duration-fast) var(--cbuc-cubic-out),
			transform var(--duration-fast) var(--ease-bounce-out),
			visibility 0s linear var(--duration-fast);

		&--position-bottom {
			top: 100%;
			margin-top: 0.5rem;
			transform: translateY(calc(var(--dropdown-anim-transform-offset) * -1));
			transform-origin: top center;
		}

		&--position-top {
			bottom: 100%;
			margin-bottom: 0.5rem;
			transform: translateY(var(--dropdown-anim-transform-offset));
			transform-origin: bottom center;
		}

		&--open {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
			transition: opacity var(--duration-fast) var(--cbuc-cubic-out), transform var(--duration-fast) var(--ease-bounce-out), visibility 0s;
		}

		& > li {
			list-style: none;
		}

		&:has(.c-dropdown__item--narrow) {
			min-width: auto;
			padding: var(--spacing-1) 0;
		}
	}

	&__item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: var(--spacing-2) var(--spacing-6);
		cursor: pointer;
		border: 1px solid transparent;
		color: var(--color-text-primary);
		white-space: nowrap;
		transition:
			background-color var(--duration-fast) var(--cbuc-quad-out),
			color var(--duration-fast) var(--cbuc-quad-out),
			border-color var(--duration-ultra-fast) var(--smoothstep),
			box-shadow var(--duration-ultra-fast) var (--smoothstep);

		@include a11y-keyboard-focus-ring;

		&.is-highlighted,
		&:hover {
			background-color: var(--color-primary-100);
		}

		&.is-active,
		&:active {
			background-color: var(--color-primary-100);
			color: var(--color-primary);
		}

		&--narrow {
			padding: var(--spacing-1) var(--spacing-3);
		}
	}
}
