@charset "UTF-8";
@use "sass:math";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid' as grid;

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

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

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

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

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

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

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

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

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

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

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

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

		@include bem.e(link) {
			display: flex;
			position: relative;
			align-items: center;
			justify-content: space-between;
			padding: func.rhythm(1) func.rhythm(6) func.rhythm(1) func.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: func.rhythm(2);
				flex-shrink: 0;
				width: var.$icon-size;
				height: var.$icon-size;
				margin-left: func.rhythm(1);
				padding: func.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 breakpoint.bp-up(md) {
					right: func.rhythm(3);
					width: var.$icon-size * 1.6;
					height: var.$icon-size * 1.6;
					padding: func.rhythm(1);
				}
			}

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

				> svg {
					display: none;
				}
			}

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

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

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

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

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

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

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

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

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

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

			&:hover {
				background-color: color.adjust(colors.$color-ash, $lightness: 3%);
			}

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

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

				&::after {
					right: func.to_rem(23px);
				}
			}
		}
	}

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

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

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

			& + & {
				border-top: 1px solid color.adjust(colors.$color-ash, $lightness: -4%);
			}

			/* Support for icon on sublevel */

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

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

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

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

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

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

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