@charset "utf-8";


/* --------------------------------------------------------------------------
   Language Selector
-------------------------------------------------------------------------- */

	.language-selector {

		position: relative;
		width: 6.75rem;
		flex: none;

		.language-selector-toggle {

			display: grid;
			width: 6.75rem;
			height: 3rem;
			grid-template-columns: 4.25rem var(--space-32);
			align-items: center;
			box-sizing: border-box;
			padding: var(--space-4);
			color: var(--color-brand-content-high);
			font: inherit;
			background: var(--color-brand-surface-low);
			border: 0;
			border-radius: var(--radius-400);
			cursor: pointer;

			> span {
				display: flex;
				width: 100%;
				height: 2.5rem;
				align-items: center;
				justify-content: center;
				font-size: var(--font-size-body-m);
				font-weight: var(--font-weight-regular);
				line-height: var(--line-height-body-m);
				text-transform: lowercase;
				background: var(--color-neutral-white);
				border-radius: var(--radius-300);
			}

			> svg {
				display: block;
				width: var(--space-24);
				height: var(--space-24);
				align-self: center;
				justify-self: center;
				fill: none;
				stroke: var(--color-brand-content-medium);
				opacity: .4;
				rotate: 0deg;
				transform-box: view-box;
				transform-origin: center;
				transition: rotate var(--transition-default);
			}

		}

		&.open {

			.language-selector-toggle > svg {
				rotate: 180deg;
			}

		}

		.language-selector-menu {

			position: absolute;
			top: calc(100% + var(--space-8));
			left: 0;
			z-index: 20;
			display: flex;
			width: 17.5rem;
			flex-direction: column;
			box-sizing: border-box;
			padding: var(--space-8);
			background: var(--color-brand-surface-low);
			border-radius: var(--radius-400);

			&[hidden] {
				display: none;
			}

			> a {

				display: grid;
				width: 100%;
				height: 3.5rem;
				grid-template-columns: var(--space-32)
					minmax(0, 1fr)
					auto
					var(--space-24);
				align-items: center;
				column-gap: var(--space-8);
				box-sizing: border-box;
				padding: 0 var(--space-16);
				color: var(--color-brand-content-high);
				font-size: var(--font-size-body-m);
				font-weight: var(--font-weight-regular);
				line-height: var(--line-height-body-m);
				text-decoration: none;
				background: transparent;
				border-radius: var(--radius-300);
				transition: background var(--transition-default);

				&:hover,
				&:focus-visible {
					background: var(--color-brand-surface-medium);
				}

				> img {
					display: block;
					width: var(--space-32);
					height: var(--space-24);
					object-fit: cover;
					border-radius: var(--radius-50);
				}

				> span {
					min-width: 0;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				> small {
					color: var(--color-brand-content-medium);
					font: inherit;
					text-align: center;
					text-transform: uppercase;
					opacity: .4;
				}

				> .check {
					display: block;
					width: var(--space-24);
					height: var(--space-24);
					fill: none;
					stroke: var(--color-brand-primary);
				}

			}

		}

	}