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

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

.dropdown {
	&-links {
		width: 100%;
		display: block;
		position: relative;
		overflow-wrap: break-word;

		&-label {
			width: 100%;
			padding: var(--padding-extra-small);
			border-width: 0.0625rem;
			border-style: solid;
			border-color: transparent;
			border-radius: var(--radius-small);
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;

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

			color: var(--ui-headline);

			&::after {
				content: '';
				border-bottom: 0.1875rem solid var(--action);
				border-bottom-left-radius: 0.125rem;
				border-left: 0.1875rem solid var(--action);
				display: block;
				height: var(--padding-extra-small);
				margin: 0.75rem 1rem;
				position: absolute;
				right: 0;
				transform: rotate(-45deg) translate(0.1875rem);
				transform-origin: center center;
				transition: border-color var(--transition-fast);
				width: var(--padding-extra-small);
				pointer-events: none;
			}

			&:hover {
				cursor: pointer;
				box-shadow: var(--shadow-near);
				border-color: var(--ui-stroke);
			}
		}

		&-menu {
			width: 100%;
			padding: var(--padding-small);
			display: flex;
			flex-direction: column;
			border-width: 0.0625rem;
			border-style: solid;
			border-radius: var(--radius-small);
			box-shadow: var(--shadow-mid);
			background-color: var(--default);
			border-color: var(--ui-stroke);

			&-wrapper {
				width: 100%;
				padding-top: var(--padding-small);
				display: none;
				position: absolute;
				top: var(--padding-extra-large);
				z-index: 100;
			}

			a {
				padding: var(--padding-extra-small);
				border-radius: var(--radius-small);
				text-decoration: none;

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

				color: var(--ui-body);

				&:hover {
					color: var(--action);
				}
			}
		}

		&:focus,
		&:focus-within,
		&.open {
			.dropdown-links-label {
				&::after {
					transform: rotate(135deg) translate(0, -0.1875rem);
				}
			}

			.dropdown-links-menu-wrapper {
				display: flex;
			}
		}
	}

	&-select {
		position: relative;
		outline: transparent solid 0.1875rem;
		border-width: 0.0625rem;
		border-style: solid;
		border-radius: var(--radius-small);
		cursor: pointer;
		display: block;
		margin-bottom: var(--padding-extra-small);
		padding: 0.906rem var(--padding-small);
		padding-right: var(--padding-extra-large);
		transition:
			color var(--transition-fast),
			background-color var(--transition-fast),
			border-color var(--transition-fast);
		color: var(--ui-text);
		background-color: var(--ui-fill);
		border-color: with-opacity(var(--ui-stroke), 30);

		&::after {
			content: '';
			border-bottom: 0.1875rem solid var(--action);
			border-bottom-left-radius: 0.125rem;
			border-left: 0.1875rem solid var(--action);
			display: block;
			height: var(--padding-extra-small);
			margin: 0.75rem 1rem;
			position: absolute;
			right: 0;
			top: 0.5rem;
			transform: rotate(-45deg) translate(0.1875rem);
			transform-origin: center center;
			transition: transform var(--transition-fast);
			width: var(--padding-extra-small);
			pointer-events: none;
		}

		&.open {
			&::after {
				transform: rotate(-225deg);
			}
		}

		&-links {
			position: absolute;
			display: none;
			max-width: brandui-col-spacing(5);
			border-width: 0.0625rem;
			border-style: solid;
			border-radius: var(--radius-small);
			left: 0;
			right: 0;
			z-index: 1;

			&.open {
				display: block;
			}

			border-color: with-opacity(var(--ui-stroke), 30);
			background-color: var(--ui-fill);
		}

		&-option {
			padding: var(--padding-small) var(--padding-medium);
			margin: var(--padding-extra-small);
			border-radius: var(--radius-small);

			&:hover {
				cursor: pointer;
				color: var(--action);
				background-color: var(--tinting);
			}

			&.active {
				outline: var(--action-outline) solid 0.1875rem;
				border-color: var(--action);
			}
		}
	}
}