@charset "UTF-8";

@use "sass:math";

@include molecule(submenu) {
	margin: 0 0 rhythm(2) 0;
	padding: 0;
	overflow: hidden;
	border-radius: $border-radius;
	background-color: $color-snow;
	list-style: none;

	@include e(title) {
		background-color: var(--m-submenu-background-color);

		@include e(link) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: rhythm(2);
			color: $color-cyberspace;
			font-family: $font-family-headings;
			text-decoration: none;

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

				> svg {
					animation: up-icon 1.5s infinite linear;
				}
			}

			> svg {
				flex-shrink: 0;
				width: $icon-size-small;
				height: $icon-size-small;
				margin-left: rhythm(1);
				transform: rotate(-90deg);
			}

			@include bp-up(md) {
				padding: rhythm(2) rhythm(3);

				> svg {
					width: $icon-size-medium;
					height: $icon-size-medium;
				}
			}
		}
	}

	@include e(item) {
		margin: 0;
		padding: 0;

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

		&:last-child {
			> a {
				padding-bottom: rhythm(2);

				@include bp-up(md) {
					padding-bottom: rhythm(3);
				}
			}
		}

		@include e(link) {
			display: flex;
			position: relative;
			align-items: center;
			justify-content: space-between;
			padding: rhythm(1) rhythm(6) rhythm(1) rhythm(2);
			overflow: hidden;
			color: var(--m-submenu-icon-fill-color);
			text-decoration: none;

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

				> svg {
					display: flex;
				}
			}

			> svg {
				display: none;
				position: absolute;
				top: 50%;
				right: rhythm(2);
				flex-shrink: 0;
				width: $icon-size;
				height: $icon-size;
				margin-left: rhythm(1);
				padding: rhythm(0.5);
				overflow: hidden;
				transform: translateY(-50%);
				border-radius: 50%;
				background-color: var(--m-submenu-icon-background-hover-color);
				fill: var(--m-submenu-icon-fill-color);

				@include bp-up(md) {
					right: rhythm(3);
					width: $icon-size * 1.6;
					height: $icon-size * 1.6;
					padding: rhythm(1);
				}
			}

			&.is-current {
				font-family: $font-family-headings;
				pointer-events: none;

				> svg {
					display: none;
				}
			}

			@include bp-up(md) {
				padding: rhythm(2) rhythm(7) rhythm(2) rhythm(3);
			}

			@include m(has-sublevel) {
				display: flex;
				flex-grow: 1;
			}
		}

		@include e(sublevel) {
			display: flex;
			justify-content: space-between;
		}

		@include e(toggle-button) {
			display: flex;
			position: relative;
			position: relative;
			align-items: center;
			margin: 0;
			padding: rhythm(1) rhythm(3);
			border: 0;
			border-left: 1px solid darken($color-ash, 5%);
			background-color: transparent;

			&::before,
			&::after {
				content: '';
				display: block;
				position: absolute;
				top: rem(22px);
				right: rem(25px);
				width: math.div($icon-size-small, 1.5);
				height: 2px;
				transform-origin: center center;
				transition: transform 0.25s ease-out;
				background-color: $color-cyberspace;
			}

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

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

			&[aria-expanded='true'] {
				margin-bottom: -1px;
				background-color: lighten($color-ash, 3%);

				&::after {
					transform: rotate(-135deg);
				}

				&::before {
					transform: rotate(135deg);
				}
			}

			&:hover {
				background-color: lighten($color-ash, 3%);
			}

			@include bp-up(md) {
				padding: rhythm(2) rhythm(4);

				&::before,
				&::after {
					top: rem(31px);
					right: rem(33px);
					width: $icon-size-small;
					height: 3px;
				}

				&::after {
					right: rem(23px);
				}
			}
		}
	}

	@include e(sublevel) {
		margin: 0;
		padding: 0;
		border-top: 1px solid darken($color-ash, 3);
		background-color: lighten($color-ash, 3%);
		list-style: none;

		&[aria-hidden='true'] {
			display: none;
			border-top: 1px solid transparent;
		}

		@include e(item) {
			margin: 0;
			padding: 0 rhythm(1.5);

			& + & {
				border-top: 1px solid darken($color-ash, 4);
			}

			/* Support for icon on sublevel */

			@include e(link) {
				> svg {
					display: none;
					padding: rhythm(0.5);
					background-color: $color-concrete;

					@include bp-up(md) {
						padding: rhythm(1);
					}
				}

				&:hover,
				&:focus {
					> svg {
						display: flex;
					}
				}
			}
		}
	}
}

@keyframes up-icon {
	0% {
		transform: translateY(0) rotate(-90deg);
	}

	25% {
		transform: translateY(-#{rhythm(0.5)}) rotate(-90deg);
	}

	75% {
		transform: translateY(rhythm(0.5)) rotate(-90deg);
	}

	100% {
		transform: translateY(0) rotate(-90deg);
	}
}