@use "../01-abstract/constants" as *;
@use "../01-abstract/variables" as *;
@use "../02-tools/f-column" as *;
@use "../02-tools/m-breakpoint" as *;
@use "../02-tools/m-hover" as *;
@use "../02-tools/m-rtl" as *;

/**
 * Header
 */

.header {
	$el: &;

	height: 76px;

	&__inner {
		position: fixed;
		top: var(--wp-admin-bar-height);
		z-index: 10;
		width: 100%;
		background: var(--wp--preset--color--cyan-bluish-gray);
	}

	.container {
		padding-top: 26px;
		padding-bottom: 28px;
	}

	&__logo-link {
		display: block;
		width: 124px;

		img {
			max-width: 100%;
			height: auto;
		}
	}

	&__menu-toggle {
		position: absolute;
		top: 14px;
		right: var(--responsive--gutter);
		z-index: 2;
		width: 46px;
		height: 46px;
		padding: 0;
		cursor: pointer;
		background: $color-text;
		border: none;
		border-radius: 50%;

		@include rtl {
			right: auto;
			left: var(--responsive--gutter);
		}

		> span {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 20px;
			height: 2px;
			margin: -1px 0 0 -10px;
			background: $color-light;
			border-radius: 2px;
			transition: background-color .5s $ease-in-out-expo;

			&::before,
			&::after {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				content: "";
				background: $color-light;
				border-radius: inherit;
				transition: transform .5s $ease-in-out-expo;
			}

			&::before {
				transform: translateY(-6px);
			}

			&::after {
				transform: translateY(6px);
			}
		}
	}

	&__menu-list {
		margin: 0;
		font-size: 14px;
		letter-spacing: 1px;
		list-style: none;

		li + li {
			margin-top: 22px;
		}

		a {
			color: inherit;
		}

		.menu-item-has-children {
			position: relative;

			> a {
				display: inline-block;
				max-width: calc(100% - 50px);
			}
		}

		.has-sub-menu-open {
			> #{$el}__sub-menu-toggle::before {
				transform: translateY(-50%) rotate(225deg);
			}
		}
	}

	&__sub-menu-toggle {
		position: absolute;
		top: 7px;
		right: -18px;
		z-index: 1;
		width: 50px;
		height: 50px;
		padding: 0;
		color: $color-dark;
		text-indent: -10000px;
		vertical-align: middle;
		cursor: pointer;
		background: none;
		border: none;

		&::before {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 6px;
			height: 6px;
			margin: 0 0 0 -3px;
			content: "";
			border-color: currentColor;
			border-style: solid;
			border-width: 0 2px 2px 0;
			transition: transform .3s ease-in-out;
			transform: translateY(-50%) rotate(45deg);
		}
	}

	&__sub-menu {
		&-level-0,
		&-level-1,
		&-level-2 {
			display: none;
			overflow: hidden;
		}

		#{$el}__sub-menu-toggle {
			top: -15px;
		}
	}

	&--menu-is-open {
		#{$el}__menu-toggle {
			> span {
				background: rgba($color-light, 0);

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

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

	@include breakpoints(mdl, max) {
		&__menu {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			display: none;
			width: 100%;
			height: 100vh;
			overflow: auto;
			background: $color-primary;
			transform: translateX(-100%);

			@include rtl {
				transform: translateX(100%);
			}

			> div {
				padding: 76px calc(var(--responsive--gutter) * 2) 25px;
			}
		}

		&__menu-list {
			width: 100%;
			padding-bottom: 22px;

			> li {
				padding-top: 22px;

				+ li {
					border-top: 1px solid $color-dark;
				}
			}
		}

		&__sub-menu > div {
			padding-top: 38px;
			padding-bottom: 10px;
		}
	}

	@include breakpoints(sm) {
		&__menu {
			#{$el}__logo-link {
				display: none;
			}
		}
	}

	@include breakpoints(sm, mdl) {
		#{$el}__menu {
			right: 0;
			left: auto;
			width: column(6);
			transform: translateX(100%);

			@include rtl {
				right: auto;
				left: 0;
				transform: translateX(-100%);
			}

			> div {
				padding: column(2, 2) column(1, 1, 6);
			}
		}
	}

	@include breakpoints(mdl) {
		.container {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
		}

		&__logo-link {
			width: 146px;
		}

		&__menu-toggle {
			display: none;
		}

		&__menu {
			width: column(9);

			> div {
				text-align: right;

				@include rtl {
					text-align: left;
				}
			}
		}

		&__menu-list {
			color: $color-text;

			li + li {
				margin-top: 12px;
			}

			> li {
				display: inline;
				text-align: start;

				@include rtl {
					text-align: right;
				}

				+ li {
					margin-inline-start: 28px;
				}

				&.menu-item-has-children {
					padding-bottom: 38px;

					> a {
						max-width: none;
						margin-inline-end: 14px;
					}
				}
			}

			.menu-item-has-children {
				@include hover {
					> #{$el}__sub-menu {
						.no-js & {
							display: block;
						}
					}
				}
			}
		}

		&__sub-menu-toggle {
			top: 8px;
			right: 0;
			width: 6px;
			height: 6px;

			@include rtl {
				right: auto;
				left: 0;
			}
		}

		&__sub-menu {
			> div {
				padding-top: 10px;
				padding-bottom: 10px;
			}

			&-level-0 {
				position: absolute;
				top: calc(100% - 20px);
				left: 50%;
				z-index: 1;
				width: 314px;
				margin-left: -157px;

				&::before,
				&::after {
					position: absolute;
					content: "";
					background: $color-primary;
				}

				&::before {
					top: 19px;
					left: 0;
					z-index: -1;
					width: 100%;
					height: calc(100% - 19px);
				}

				&::after {
					top: 19px;
					left: 50%;
					width: 20px;
					height: 20px;
					border-width: 1px 1px 0 0;
					transform: translate(-50%, -50%) rotate(-45deg);
				}

				> div {
					padding: (36px + 19px) 30px 36px;

					> ul {
						> li {
							&.menu-item-has-children {
								a {
									max-width: calc(100% - 25px);
								}
							}
						}
					}
				}
			}

			a {
				display: block;
			}

			#{$el}__sub-menu-toggle {
				top: .7em;
				right: 0;
				color: inherit;
			}
		}
	}
}
