// ============================================================================
// :: MOBILE NAV
// ============================================================================
.m-mobile-nav {
	margin-top: 1.5rem;
	padding-bottom: 2rem;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-mobile-nav__collapse {
	border-bottom: $border-light-white;
	opacity: 0;

	transition: opacity 0s ease-in-out;

	&.is-open {

		.m-mobile-nav__button::before {
			color: $text-color-white;
		}
	}
}

.m-mobile-nav__header {
	overflow-x: hidden;
	padding: 1.5rem 0;

	&::before {
		display: none;
	}
}

.m-mobile-nav__title {
	width: 90%;
	overflow: hidden;

	font-family: $font-family-beausans;
	font-weight: $font-weight-bold;
	font-size: $font-size-1x-large;
	line-height: $line-height-2x-large;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;

	color: $text-color-white;
	border: none;
	background: transparent;

	&[class*="icon"]::before {
		margin-right: 1rem;
	}
}

.m-mobile-nav__link {
	text-align: left;

	color: $text-color-white;
	border: none;
	background: transparent;

	&[class*="icon"]::before {
		color: $text-color-white;
	}
}

.m-mobile-nav__button {
	right: -8rem;

	padding: 1.5rem 4rem;

	color: $text-color-white;

	&::before {
		color: $text-color-white-2x-light;
	}
}

.m-mobile-nav__content {
	margin-left: 0;
}

.m-mobile-nav__content-container {
	padding-top: 0 !important; /* stylelint-disable-line */
	padding-bottom: 2rem;
}

.m-mobile-nav__content-list {

	.m-list__item {
		padding: 0.5rem 0;
	}

	.a-link {
		font-family: $font-family-roboto;
		font-weight: $font-weight-thin;
		font-size: $font-size;
		line-height: $line-height;

		color: $text-color-white;
	}

	+ .m-mobile-nav__content-list {
		margin-top: 1rem;
	}
}

.m-mobile-nav__mainlink.a-link {
	font-family: $font-family-roboto;
	font-weight: $font-weight-bold;
	line-height: $line-height;
}

.m-mobile-nav__languages {
	position: fixed;
	left: 0;
	bottom: 0;

	width: 100%;

	padding: 2rem;

	background: $gradient-primary;
	box-shadow: $box-shadow;
}

.m-mobile-nav__languages-list {
	padding-left: 0;
}

.m-mobile-nav__languages-item {
	font-family: $font-family-beausans;
	font-weight: $font-weight-bold;
	line-height: $line-height-2x-large;

	&.is-active {

		a {
			color: $text-color-white;
		}
	}

	a {
		font-size: $font-size-1x-large;

		color: $text-color-white-2x-light;
	}
}