.c-nav {
	@include flex(flex-start center);
}

.c-nav__list {
	@include flex(center);
	height: 100%;
	padding: 0;
	list-style: none;
	margin: 0 auto;
	width: 65%;
	position: relative;

	@include mq(900, 1300) {
		margin: 0;
		margin-left: auto;
		width: 80%;
	}
}

.c-nav__item {
	@include font(base, 22);
	@include flex(center);
	flex: 1 0 auto;
	margin-top: 0;

	@include mq(900, 1300) {
		justify-content: flex-end;
	}


	& + & {
		margin-left: 30px;
	}
}

.c-nav__link {
	display: inline-block;
	padding: 20px 0;
	line-height: 24px;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	color: white;

	&::before {
		content: '';
		position: absolute;
		bottom: 1rem;
		left: -101%;
		width: 100%;
		height: 2px;
		background-color: white;
		transition-property: transform, color;
		transition-duration: 0.3s;
		transition-timing-function: ease-in-out;
	}

	.is-active & {
		pointer-events: none;
		&::before {
			left: 0;
		}
	}

	&:hover {
		transition-duration: 0.2s;

		&::before {
			transform: translate(101%, 0);
			transition-duration: 0.2s;
		}
	}
}

.c-nav__icon {
	margin-left: 7px;
	color: palette(action);
}

.c-nav__actions {
	@include flex(center);
	list-style: none;
	margin: 0;
	position: relative;
	height: 40px;
	top: -20px;

	@include mq(900, 1300) {
		position: absolute;
		right: 0;
		top: 0;
	}

	.phone, .language {
		@include flex(flex-start column);

		@include mq(900, 1300) {
			@include flex(flex-start center);
			top: -20px;
		}

		position: relative;
		color: palette(action);

		a {
			text-decoration: none;
		}

		.c-button {
			position: relative;
			padding: 14px 20px;
			@include mq(900, 1300) {
				padding: 10px 20px;
			}
			@supports(clip-path: polygon(calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%, 0 0) ) {
				clip-path: polygon(calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%, 0 0);

				&:after {
					content: "";
					position: absolute;
					top: 0;
					right: 0;
					border-width: 0 17.5px 17.5px 0;
					border-style: solid;
					border-color: transparent palette(action);
					transition: border-color 0.3s;
				}

				&:hover {
					&:after {
						border-color: transparent palette(dark);
					}
				}
			}
		}

		p {
			@include font(small, 22);
			margin-bottom: 2px;
			margin-top: 18px;
			color: palette(action);

			@include mq(900, 1300) {
				margin-bottom: 0;
				margin-right: 20px;
			}

		}

		svg {
			margin-right: 10px;
		}
	}

	.language {
		margin-left: 0;

		@include mq(900, 1300) {
			top: 0;
		}
	}

	.login-button {
		position: absolute;
		right: 0;
		top: -45px;
		padding: 7px 10px 7px 15px;
		color: palette(dark);
		margin-left: auto;

		@supports(clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px))) {
			clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px));
		}
	}
}