$c-tabs-bp: 640;
$c-tabs-bp2: 800;

.c-tabs {
	position: relative;
	background: palette(secondary, 75);
	padding-top: 16px;
}


.c-tabs__nav {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-left: 0;
	list-style: none;
	display: none;

	@include mq($c-tabs-bp) {
		display: flex;
		flex-direction: row;
		margin: 0 auto;
	}
}


.c-tabs__item {
	position: relative;
	z-index: 1;

	@include mq($c-tabs-bp) {
		min-width: 215px;
		margin: 0 -1px -1px;
		border: 2px solid palette(neutral, 400);
		border-bottom: none;
	}

	&:first-child {
		border-radius: 4px 0 0 0;
	}
	&:last-child {
		border-radius: 0 4px 0 0;
	}
	&:first-child:last-child {
		border-radius: 4px 4px 0 0;
	}

	&:not(.is-active) + &:not(.is-active) {
		border-left: none;
	}

	&:hover {
		background-color: palette(secondary, 90);
	}

	&.is-active {
		@include mq($c-tabs-bp) {
			z-index: 2;
			border-color: palette(light);
			background-color: palette(light);
		}
	}
}


.c-tabs__link {
	display: flex;
	align-items: center;
	position: relative;
	padding: 4px 0;
	border: none;
	color: palette(text);
	cursor: pointer;
	justify-content: center;
	transition: all 150ms;

	@include mq($max: $c-tabs-bp) {
		display: inline-flex;
	}

	@include mq($c-tabs-bp, $max: $c-tabs-bp2) {
		@include font(small, 20, 700);
	}

	@include mq($c-tabs-bp) {
		padding: 12px clamp(12px, 3vw, 40px);
		text-decoration: none;
	}

	&:hover,
	&:focus {
		outline: none;
		color: palette(neutral, 900);
	}
}


.c-tabs__label {
	display: flex;
	flex-direction: column;
	@include font-family('primary');
	@include font(base, 28, 600);

	small {
		margin-top: -3px;
		font-size: 12px;
		line-height: 14px;
		font-weight: 400;
	}
}


.c-tabs__icon {
	margin-right: 8px;

	.c-tabs__item.is-active  & {
		color: palette(primary);
	}

	svg {
		width: 40px;
		height: 40px;
	}
}