gistfile1.txt

$module: 'mainmenu';

/* critical:start */

.#{$module} {
	@include grid-column(9.3, 0);

	&__inner {
		position: relative;
		// text-align: center;
		padding: rem-calc(0 25);

		&::before {
			position: absolute;
			top: 0;
			right: rem-calc(5);
			bottom: 0;
			left: rem-calc(10);
			z-index: -1;
			background: rgba($brand-secondary, 0.95);
			background-image: $brand-gradient;
			box-shadow: $brand-box-shadow;
			content: '';
			transform: skewX(-$globad-degree);
			transform-origin: top;

			@include breakpoint(1250) {
				right: 0;
				transform-origin: center;
			}
		}
	}

	&__list {
		@include dropdown-menu-direction(horizontal);
		position: relative;
		// display: table;
		margin: auto;
		// text-align: center;
		padding: 0;
		list-style: none;

		&--offcanvas {
			@include menu-direction(vertical);
		}
	}

	&__sublist {
		min-width: rem-calc(230);
		text-align: left;
		background-color: $brand-secondary;
		background-image: $brand-gradient;
		border: 0;
		margin: rem-calc(5 0 0 0);
		padding: rem-calc(20 10 20 0);
		box-shadow: $brand-box-shadow;
		overflow: hidden;

		.no-js & {
			display: none;
		}
	}

	&__item {
		@include disable-mouse-outline;
		position: relative;
		display: inline-block;
		font-family: $font-black;
		text-align: center;
		text-transform: uppercase;
		border-bottom: 2px solid transparent;
		padding: rem-calc(25 5);

		@include breakpoint(large) {
			padding: rem-calc(25 5);
		}

		@include breakpoint(xlarge) {
			padding: rem-calc(25 6);
		}

		@include breakpoint(xxlarge) {
			padding: rem-calc(25 9);
		}

		@include on-event {
			border-bottom: 2px solid $white;
		}

		&.is-active {
			border-bottom: 2px solid $white;

			@include on-event {
				border-bottom: 2px solid $white;
			}
		}
	}

	&__subitem {
		& + & {
			margin-top: rem-calc(5);
		}
	}

	&__item-link {
		position: relative;
		display: block;
		font-size: rem-calc(16);
		line-height: 1;
		color: $white;
		text-decoration: none;
		text-shadow: $brand-text-shadow;
		padding: rem-calc(10 10);

		@include breakpoint(xlarge) {
			padding: rem-calc(10 15);
		}

		@include on-event {
			color: $white;
		}

		&.is-current, &.is-active {
			&::after {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: $brand-primary;
				margin-top: 0;
				box-shadow: $brand-box-shadow;
				transform: skewX(-$globad-degree);
				content: '';
			}

			span {
				position: relative;
				z-index: 1;
				display: block;
				color: $white;
				border-bottom: none;
			}
		}
	}

	&__subitem-link {
		position: relative;
		display: inline-block;
		font-size: rem-calc(16);
		line-height: 1;
		color: $white;
		text-align: left;
		text-decoration: none;
		text-shadow: $brand-text-shadow;
		margin-right: rem-calc(10);
		padding: rem-calc(10 20 10 20);

		@include on-event {
			&::after {
				opacity: 1;
			}
		}

		&.is-current, &.is-active {
			&::after {
				opacity: 1;
			}
		}

		&::after {
			position: absolute;
			top: 0 !important;
			right: 0 !important;
			bottom: 0 !important;
			left: rem-calc(-10) !important;
			background: $brand-primary;
			margin-top: 0 !important;
			opacity: 0;
			box-shadow: $brand-box-shadow;
			transition: all 300ms ease-in-out;
			transform: skewX(-$globad-degree);
			content: '';
		}

		span {
			position: relative;
			z-index: 1;
			display: block;
			color: $white;
			border-bottom: none;
		}
	}
}