//------------------------------------------------------------------------------------------------
// TABS
//------------------------------------------------------------------------------------------------

/*
Collection of tabs
*/

// COMPONENT COLOURS
//------------------------------------------------------------------------------------------------

/*
Easy map colour variables to the button component without having to
find/replace data.
*/

$component-tabs-color: 'very-light' !default;
$component-tabs-border-color: 'light' !default;
$component-tabs-accent-color: 'primary' !default;
$component-tabs-focus-color: 'very-light' !default;
$component-tabs-inverted-focus-color: 'primary-dark' !default;


// BLOCK & ELEMENTS
//------------------------------------------------------------------------------------------------

.c-tabs__item {
	display: flex;
	align-items: stretch;
	width: auto;
	flex-grow: 0;
	flex-basis: auto;
	&:first-child .c-tabs__item-inner {
		margin-left: 0;
	}
	&:last-child .c-tabs__item-inner {
		margin-right: 0;
	}
}

.c-tabs__item-inner {
	width: 100%;
	font-weight: bold;
	font-size: rem(18px);
	padding: rem(10px) rem(20px) rem(11px) rem(20px);
	border-top-left-radius: $global-border-radius;
	border-top-right-radius: $global-border-radius;
	border: rem(1px) solid transparent;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	&:before {
		content: '';
		display: block;
		height: rem(3px);
		background-color: color($component-tabs-accent-color);
		border-top-left-radius: $global-border-radius;
		border-top-right-radius: $global-border-radius;
		position: absolute;
		width: 100%;
		left: 0;
		top: rem(-3px);
	}
}

.c-tabs__item:focus {
	outline: none;
	.c-tabs__item-inner {
		background-color: color($component-tabs-focus-color);
	}
}

.c-tabs__item:target {
	.c-tabs__item-inner {
		background-color: initial;
	}
}

.c-tabs__item.is-active {
	z-index: 2;
	.c-tabs__item-inner {
		border-color: color($component-tabs-border-color);
		position: relative;
		background-color: color('white');
		border-bottom-color: color('white');
		border-top-color: color($component-tabs-accent-color);
		cursor: initial;
		&:before {
			top: 0;
			transition: top $global-transition-duration;
		}
	}
	&:focus .c-tabs__item-inner {
		border-top-color: color($component-tabs-border-color);
		background: linear-gradient($component-tabs-focus-color, color('white'));
	}
}

.c-tabs__layout {
	position: relative;
	&:before {
		content: '';
		position: absolute;
		width: 100%;
		height: rem(1px);
		background-color: color($component-tabs-border-color);
		left: 0;
		bottom: 0;
		z-index: 1;
	}
}

.c-tabs__content-item {
	display: none;
	&.is-active {
		display: block;
	}
}


// ADDS BORDER TO CONTENT
//------------------------------------------------------------------------------------------------

.c-tabs--border {
	.c-tabs__content {
		border: rem(1px) solid color($component-tabs-border-color);
		background-color: color('white');
		border-top-width: 0;
		border-bottom-left-radius: $global-border-radius;
		border-bottom-right-radius: $global-border-radius;
	}
}


// INVERT COLOURS MODIFIER
//------------------------------------------------------------------------------------------------

/*
Enable for testing purposes
*/

.c-tabs--invert {
	.c-tabs__item-inner {
		color: color('white');
	}
	.c-tabs__item:focus .c-tabs__item-inner {
		background-color: rgba(255,255,255,0.25);
	}
	.c-tabs__item.is-active {
		.c-tabs__item-inner {
			background-color: color($component-tabs-accent-color);
			&:before {
				background-color: color('white');
			}
		}
		&:focus .c-tabs__item-inner {
			background-color: color($component-tabs-inverted-focus-color);
			background-image: none;
		}
	}
	.c-tabs__content {
		color: color('white');
	}
}


// FULL WIDTH MODIFIER
//------------------------------------------------------------------------------------------------

/*
Makes tabs stretch full width, with each one having an equal width.
*/

.c-tabs--full-width {
	.c-tabs__item {
		flex-grow: 1;
		flex-basis: 0;
	}
}


// COLLAPSE MODIFIERS
//------------------------------------------------------------------------------------------------

/*
Collapses and stacks the tabs vertically.
*/

// Example: c-tabs--collapse@max-sm3
@each $bp-name, $bp-value in $mq-breakpoints {
	@include mq($until:#{$bp-name}) {
		.c-tabs--collapse\@max-#{$bp-name} {
			.c-tabs__layout:before {
				display: none;
			}
			.c-tabs__item {
				width: 100%;
				flex-grow: initial;
				flex-basis: initial;
			}
			.c-tabs__item.is-active .c-tabs__item-inner {
				background: color($component-tabs-focus-color);
				box-shadow: inset 3px 3px 0 color($component-tabs-accent-color), inset -3px -3px 0 color($component-tabs-accent-color);
			}
			.c-tabs__item-inner {
				border-radius: 0;
				border: 0;
			}
			.c-tabs__item-inner:before {
				display: none;
			}
		}
	}
}