Main Menu

@charset 'UTF-8';

@include atom(main-menu) {

	@include 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}#{$element-separator}link {
					padding-right: 0;
				}
			}
		}

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

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

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

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

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

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

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

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

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

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

			&[aria-expanded='true'] {

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

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

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

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

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

			@include b(icon-hamburger) {
				display: flex;
				position: relative;
				z-index: -1;
				flex-direction: column;
				width: $icon-size-medium;
				height: 2px;
				margin-left: 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: -#{rem(6px)};
				}

				&::after {
					bottom: -#{rem(6px)};
				}
			}

			@include b(icon-arrow-down) {
				display: flex;
				position: relative;
				z-index: -1;
				flex-direction: column;
				width: $icon-size-medium;
				height: $icon-size-medium;
				margin-left: rhythm(1);
				margin-top: -#{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: -#{rem(2px)};
					transform: rotate(45deg);
				}

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

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

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

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

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

		&::after,
		&:before {
			bottom: 100%;
			left: 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: $color-snow;
			border-width: 15px;
			margin-left: -15px;
		}
		&::before {
			border-color: rgba(238, 238, 238, 0);
			border-bottom-color: $color-ash;
			border-width: 16px;
			margin-left: -16px;
		}

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

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

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

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

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

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