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

.locale-selector {
	position: relative;
	background-color: transparent;
	border: none;
	border-radius: var(--radius-small);
	appearance: none;
	text-indent: 2rem;
	min-width: 11rem;
	isolation: isolate;

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

	color: var(--ui-headline);

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

	@include break.max-mobile {
		padding: 0.75rem 1rem;
	}

	@include break.min-mobile {
		max-width: 0;
		background: transparent;
		padding: 0.75rem 2rem;
		opacity: 0;
		min-width: 3.25rem;
		text-indent: 0;

		* {
			font-size: initial;
		}
	}

	&-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--padding-slim);
		border-radius: var(--radius-small);
		transition: background-color var(--transition-fast);
		cursor: pointer;

		&:hover {
			background-color: with-opacity(var(--action), 10);

			.locale-selector-display {
				color: var(--action);

				& > * {
					transition: color var(--transition-fast);
				}
			}
		}

		@include break.max-mobile {
			justify-content: start;
			background-color: with-opacity(var(--action), 10);

			&::after {
				content: '\e925'; // icon-keyboard-arrow-down
				font-family: brandui-icons;
				font-size: 1.5rem;
				margin-left: -2rem;
				padding-right: 1rem;
				position: absolute;
				right: 0;
				pointer-events: none;
			}
		}
	}

	&-display {
		display: flex;
		align-items: center;
		gap: var(--padding-slim);
		position: absolute;
		color: var(--ui-headline);

		& > * {
			transition: color var(--transition-fast);
		}

		&::before {
			content: '\e926'; // icon-language
			font-family: brandui-icons;
			font-size: 1.5rem;
			font-weight: 500;
			transition: color var(--transition-fast);
		}

		&-label {
			// @include font.get-typography(body-small-medium);
			font-family: var(--txt-body-small-family), sans-serif;
			font-size: var(--txt-body-small-size);
			font-weight: 600;
			letter-spacing: 0.005em;

			@include break.max-tablet {
				display: none;
			}
		}

		@include break.max-tablet {
			margin-left: var(--padding-small);
			pointer-events: none;
		}
	}
}