$o-tabs-padding-h: space(4);

/*
 * On small screens the content is stacked, without controls
 * When the screen is wide enough we add the controls
 * and show only the chosen 'slide content'
 */


.o-tabs {
	@include contain;
}


.o-tabs__controls {
	@include mq($max: m) {
		display: none;
	}

	@include mq(m) {
		display: flex;
		align-items: center;
	}
}


// Shared styling for tab- and step-buttons
.o-tabs__button {
	@include font-size(base); // needed for button reset
	border: none; // needed for button reset
	padding: space(2) $o-tabs-padding-h;
	min-height: space(6);
	color: palette(neutral, 700);
	cursor: pointer;
	transition: all 200ms linear;

	&:hover {
		color: palette(neutral, 1000);
		background-color: palette(neutral, 100);
	}

	&.is-active {
		color: palette(neutral, 1000);
		background-color: palette(neutral, 200);
	}

	&:focus {
		outline: none;
		border-color: palette(feedback, focus);

		&:not(.is-active):not(:active) {
			box-shadow: 0 0 5px 3px rgba(palette(feedback, focus), 0.1);
		}
	}
}


.o-tabs__container {
	@include mq(m) {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		padding: space(6) $o-tabs-padding-h;
		background-color: palette(neutral, 200);
	}
}


.o-tabs__content {
	@include mq($max: m) {
		& + & {
			margin-top: space(5);
		}
	}

	@include mq(m) {
		grid-row: 1;
		grid-column: 1;
		opacity: 0;
		z-index: 0;
		pointer-events: none;
		transition: opacity 200ms linear;

		&.is-active {
			opacity: 1;
			z-index: 1;
			pointer-events: all;
		}
	}
}


.o-tabs__label {
	@include font-size(xs);
	display: block;
	padding-bottom: space(1);
	text-transform: uppercase;
	color: palette(neutral, 1000);

	@include mq(m) {
		display: none;
	}
}