$c-tabs-bp1: 700;


.c-tabs__controls {
	display: flex;
	flex-direction: column;
	margin-bottom: space(2);

	@include mq($c-tabs-bp1) {
		flex-direction: row;
		margin-bottom: 0;
	}
}


.c-tabs__button {
	@include font-size(base);
	@include font-weight(semiBold);
	border: none;
	margin: 0;
	padding: space(2) space(4);
	outline: none;
	cursor: pointer;
	color: palette(neutral, 700);
	background-color: transparent;
	border-top-right-radius: map-get($border-radius, s);

	@include mq($max: $c-tabs-bp1) {
		width: 100%;
		padding: space(0.5) space(4);
	}

	&:hover,
	&:focus {
		@include mq($c-tabs-bp1) {
			background-color: rgba(palette(primary, 100), 0.35);
		}
	}

	&.is-active {
		@include mq($max: $c-tabs-bp1) {
			color: palette(primary, 500);
		}
		@include mq($c-tabs-bp1) {
			background-color: palette(primary, 100);
		}
	}
}


.c-tabs__container {
	padding: space(7);
	background-color: palette(primary, 100);
	border-bottom-left-radius: map-get($border-radius, s);
	border-bottom-right-radius: map-get($border-radius, xl);
}


.c-tabs__content {
	display: none;

	&.is-active {
		display: block;
	}
}