@use '../../base/mixins/typography' as font;
@use '../../base/functions' as *;

$tinting: with-opacity(var(--action), 10);
$tinting-active: with-opacity(var(--action), 16);

@keyframes dropdown-options-enter {
	from {
		opacity: 0;
		transform: translateY(-4px) scale(0.97);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.dropdown-button {
	position: relative;
	width: fit-content;

	.trigger {
		position: relative;
		padding-right: var(--padding-extra-large);

		span {
			margin-right: var(--padding-small);
		}

		&::after {
			content: '\e925';
			display: inline-block;
			font-family: brandui-icons;
			font-size: var(--txt-subhead-small-size);
			font-weight: 900;
			line-height: 1;
			position: absolute;
			right: var(--padding-medium);
			top: 50%;
			transform: translateY(-50%) rotate(0deg);
			transition: transform 150ms ease-out;
			pointer-events: none;
		}
	}

	.options {
		position: absolute;
		top: calc(100% + var(--padding-extra-small));
		min-width: 100%;
		border: 1px solid var(--ui-fill);
		border-radius: var(--radius-medium);
		overflow-y: auto;
		max-height: min(70vh, 20rem);
		padding: var(--padding-extra-small);
		animation: dropdown-options-enter 150ms ease-out;
		background-color: var(--default);

		.option {
			@include font.get-typography(body-bold);

			padding: var(--padding-extra-small) var(--padding-small);
			white-space: nowrap;
			display: flex;
			align-items: center;
			gap: var(--padding-small);
			border-radius: var(--radius-small);
			outline: none;
			background: transparent;
			text-decoration: none;
			transition:
				background-color 120ms ease-out,
				color 120ms ease-out;
			color: var(--ui-headline);

			& + .option {
				margin-top: var(--padding-thin);
			}

			&-leading {
				width: 1.5rem;
				height: 1.5rem;
				flex-shrink: 0;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				border-radius: var(--radius-small);
				background-color: var(--ui-fill);
				overflow: hidden;
			}

			&-logo-image {
				width: 1rem;
				height: 1rem;
				display: block;
				object-fit: contain;
				filter: invert(1);
				mix-blend-mode: screen;
			}

			&-label {
				flex: 1;
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			&.link-external::after {
				content: '\e92f';
				margin-left: auto;
				font-family: brandui-icons;
				font-size: var(--txt-subhead-small-size);
				font-weight: 500;
				pointer-events: none;
				flex-shrink: 0;
			}

			&:hover,
			&:focus-visible {
				color: var(--action);
				background-color: $tinting;
			}

			&:focus-visible {
				box-shadow: none;
			}

			&:active {
				background-color: $tinting-active;
			}
		}
	}

	&.is-open {
		z-index: 20;

		.trigger {
			&::after {
				transform: translateY(-50%) rotate(180deg);
			}
		}
	}
}