@btnMenuMobile: 40px;
@btnMenuMobileMargin: 10px;
@zIndexMenuMobile: 100;

.nav--mob {
	position: fixed;
	top: 0;
	right: -90vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 90vw;
	height: var(--app-height);
	background: @colorFont;
	transition: right 0.5s;
	z-index: @zIndexMenuMobile;

	.btn {
		position: absolute;
		top: 10px;
		left: calc(-@btnMenuMobile - @btnMenuMobileMargin);
		display: block;
		width: @btnMenuMobile;
		height: @btnMenuMobile;
		cursor: pointer;

		span {
			position: absolute;
			top: 50%;
			left: @btnMenuMobileMargin;
			margin-top: -1px;
			font-size: 0;

			&,
			&:before,
			&:after {
				content: '';
				display: block;
				width: calc(@btnMenuMobile - calc(@btnMenuMobileMargin * 2));
				height: 1px;
				background: @colorFont;
			}

			&:before {
				margin-top: -6px;
			}

			&:after {
				margin-top: 11px;
			}
		}

		&.is-open {
			left: auto;
			right: @btnMenuMobileMargin;
			background: none;

			span {
				left: 50%;
				margin-left: -@btnMenuMobileMargin;
				background: @colorFont;

				&:before,
				&:after {
					position: absolute;
					top: 50%;
					left: 0;
					margin: 0;
					transform-origin: center center;
					background: @colorBackground;
				}

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

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

}

.nav--mob[aria-hidden="false"] {
	right: 0;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
}

@media (prefers-color-scheme: dark) {
	.nav--mob {
		background: @colorFontDark;

		.btn {
			span {
				background: @colorFontDark;

				&:before,
				&:after {
					background: @colorFontDark;
				}
			}

			&.is-open {
				span {
					background: @colorFontDark;

					&:before,
					&:after {
						background: @colorBackgroundDark;
					}
				}
			}
		}
	}
}