// ============================================================================
// :: Settings
// ============================================================================
$list-shadow-range: 4rem;
$tab-border-height: 0.6rem;
$tab-padding-top: 1.6rem;
$tab-spacing: 0.7rem;
$tab-translate: 0.5rem;

// ============================================================================
// :: Tabs
// ============================================================================
/**
 * Tabs component lists a range of tabs to which certain content blocks can be
 * assigned.
 */

// ============================================================================
// :: Root
// ============================================================================
.o-tabs {
	display: flex;
	flex-direction: column;
}

// ============================================================================
// :: Elements
// ============================================================================
.o-tabs__list {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	width: 100%;
	overflow: hidden;
	margin: calc(#{$list-shadow-range * -1});
	margin-bottom: 0;
	padding: $list-shadow-range;
	padding-bottom: 0;

	list-style-type: none;
}

.o-tabs__content {
	position: relative;
	z-index: $z-index-low;

	order: 1;
	height: 100%;
	min-height: 100rem;
	margin-bottom: 3rem;

	box-shadow: $box-shadow;

	@include respond-at($screen-medium-base) {
		min-height: 85rem;
	}

	@include respond-at($screen-small-base) {
		flex-grow: 1;
		order: 2;
		margin-bottom: 0;
		padding: 4rem;
	}
}

.o-tabs__content-item {
	position: absolute;
	top: 0;
	left: 0;

	opacity: 0;

	transition: opacity 0.3s ease-in-out;

	pointer-events: none;
}

.o-tabs__item-container {
	position: relative;

	align-self: flex-end;
	margin-right: calc(#{$tab-spacing * -1});

	transform: translateY($tab-translate);

	transition: transform 0.2s ease-in-out;

	&:hover {
		transform: translateY(0);
	}
}

.o-tabs__item {
	display: flex;
	align-items: flex-end;
	overflow: hidden;

	border-bottom: none;
	border-radius: $border-radius-m 0 0 0;

	&:last-child {
		margin-right: 0;
	}
}

.o-tabs__item-link {
	position: relative;

	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 2rem 0;

	font-family: $font-family-beausans;
	font-weight: $font-weight-semibold;
	text-decoration: none;
	white-space: nowrap;

	color: $text-color-grey;

	cursor: pointer;

	@include respond-at($screen-small-base) {
		display: inline-block;
		padding: $tab-padding-top 2.4rem calc(#{$tab-padding-top} + #{$tab-translate}) 2.4rem;
	}

	&::after {
		content: "";

		position: absolute;
		top: 0;
		left: 0;
		z-index: $z-index-lower - 2;

		width: 100%;
		height: 100%;

		background-color: $background-color-white;
		border-radius: 0 $border-radius-m 0 0;

		transform-origin: bottom right;
		transform: skewX(10deg);
	}
}

.o-tabs__item-shadow {
	position: absolute;
	top: 50%;
	left: calc(50% - 0.35rem);
	z-index: $z-index-lower - 2;

	width: 90%;
	height: 90%;

	box-shadow: $box-shadow-tab;

	transform: translate(-50%, -50%);
}

// ============================================================================
// :: States
// ============================================================================
.o-tabs__item-container {

	&.is-active {
		z-index: $z-index-lower + 2;

		transform: translateY(0);

		&:hover {
			transform: translateY(0);
		}

		.o-tabs__item-link {
			padding-top: calc(#{$tab-padding-top} + #{$tab-border-height});
			padding-bottom: $tab-padding-top;

			color: $text-color-primary;

			&::after {
				border-top: $background-color-green $tab-border-height solid;
				background-color: $background-color-white;
			}
		}
	}
}

.o-tabs__content-item {

	&.is-active {
		opacity: 1;

		pointer-events: auto;
	}
}