Main Menu

@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/extends';
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../vendor/grid/breakpoints' as breakpoint;

@include mixin.atom(main-menu) {
	@include bem.e(list) {
		$root: &;

		display: flex;
		justify-content: flex-end;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			display: flex;
			align-items: center;
			position: relative;

			&:last-child {
				#{$root}#{bem.$element-separator}link {
					padding-right: 0;
				}
			}
		}

		@include bem.e(button) {
			padding: func.rhythm(2) 0 func.rhythm(2) func.rhythm(1);

			@include mixin.atom(button) {
				padding: func.rhythm(0.4) func.rhythm(1.5);
				font-family: var.$font-family-medium;
				font-size: var.$size-small;

				@include bem.e(text) {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				@include bem.m(icon-left) {
					padding-left: func.rhythm(5);
				}

				@include bem.m(icon-right) {
					padding-right: func.rhythm(5);
				}
			}

			@include breakpoint.bp-up(sm) {
				@include mixin.atom(button) {
					padding-top: func.rhythm(0.6);
					padding-bottom: func.rhythm(0.6);
					font-size: var.$size-base;
				}
			}
		}

		@include bem.e(link) {
			@extend %normalize-links;

			display: flex;
			align-items: center;
			padding: func.rhythm(2) func.rhythm(1);
			border: 0;
			background-color: transparent;
			color: var(--cyberspace-color);
			font-family: var.$font-family-medium;
			text-decoration: none;
			-webkit-appearance: none;
			line-height: 1;

			&:focus,
			&:hover {
				text-decoration: underline;
			}

			&.is-current {
				color: colors.$color-ruby;
				font-family: var.$font-family-medium;
			}

			&[aria-expanded='true'] {

				@include bem.b(icon-hamburger) {
					transform: rotate(-90deg);
					background-color: transparent;

					&::before {
						top: 0;
						transform: rotate(45deg);
					}

					&::after {
						bottom: 0;
						transform: rotate(-45deg);
					}
				}

				@include bem.b(icon-arrow-down) {
					&::before {
						left: 0;
						width: 100%;
						transform: rotate(-45deg);
					}

					&::after {
						right: 0;
						width: 100%;
						transform: rotate(45deg);
					}
				}
			}

			@include bem.b(icon-hamburger) {
				display: flex;
				position: relative;
				z-index: -1;
				flex-direction: column;
				width: var.$icon-size-medium;
				height: 2px;
				margin-left: func.rhythm(1);
				transform-origin: 50% 50%;
				transition: all 0.3s ease-out, background-color 0.15s ease-out;
				border: 0;
				border-radius: 0;
				background-color: currentColor;
				color: var(--cyberspace-color);

				&::before,
				&::after {
					content: '';
					display: block;
					position: absolute;
					width: 100%;
					height: 2px;
					transition: transform 0.3s ease-out, top 0.3s ease-out, bottom 0.3s ease-out;
					background-color: currentColor;
				}

				&::before {
					top: -#{func.to_rem(6px)};
				}

				&::after {
					bottom: -#{func.to_rem(6px)};
				}
			}

			@include bem.b(icon-arrow-down) {
				display: flex;
				position: relative;
				z-index: -1;
				flex-direction: column;
				width: var.$icon-size-medium;
				height: var.$icon-size-medium;
				margin-left: func.rhythm(1);
				margin-top: -#{func.to_rem(3px)};
				transform-origin: 50% 50%;
				transition: all 0.3s ease-out;
				border: 0;
				border-radius: 0;
				color: var(--cyberspace-color);

				&::before,
				&::after {
					content: '';
					display: block;
					position: absolute;
					top: 50%;
					width: 75%;
					height: 2px;
					transition: all 0.3s ease-out;
					background-color: currentColor;
				}

				&::before {
					left: -#{func.to_rem(2px)};
					transform: rotate(45deg);
				}

				&::after {
					right: -#{func.to_rem(2px)};
					transform: rotate(-45deg);
				}
			}

			@include breakpoint.bp-up(sm) {
				font-size: var.$size-base;
			}
		}

		@include bem.e(text) {
			margin-top: -#{func.to_rem(3px)}; /* Adjust for the font's bad placement in viewbox */
			pointer-events: none;
		}
	}

	@include bem.e(subnav) {
		position: absolute;
		left: 0;
		top: calc(100% - #{func.rhythm(1)});
		margin: 0;
		padding: 0;
		background-color: colors.$color-snow;
		border: 1px solid colors.$color-ash;

		@include mixin.card-shadow(colors.$color-cyberspace, 0.2);

		&::after,
		&:before {
			bottom: 100%;
			left: func.rhythm(4);
			border: solid transparent;
			content: '';
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
		}

		&::after {
			border-color: rgba(255, 255, 255, 0);
			border-bottom-color: colors.$color-snow;
			border-width: 15px;
			margin-left: -15px;
		}
		&::before {
			border-color: rgba(238, 238, 238, 0);
			border-bottom-color: colors.$color-ash;
			border-width: 16px;
			margin-left: -16px;
		}

		&[aria-hidden='true'],
		&:not([aria-hidden]) {
			display: none;
		}

		@include bem.e(item) {
			width: 100%;

			& + & {
				border-top: 1px solid colors.$color-ash;
			}

			a {
				color: colors.$color-cyberspace;
				display: block;
				width: 100%;
				padding: func.rhythm(0.5) func.rhythm(2);
				text-decoration: none;
				white-space: nowrap;

				&:hover {
					text-decoration: underline;
				}
			}
		}
	}
}

.no-js {
	@include mixin.atom(main-menu) {
		@include bem.e(subnav) {
			display: block;
		}
	}
}