/*!
 * @copyright   Copyright (C) 2010-2020 Combodo SARL
 * @license     http://opensource.org/licenses/AGPL-3.0
 */

/* SCSS variables */
$ibo-tab-container--tabs-list--height: 36px !default;
$ibo-tab-container--tabs-list--padding-x: 24px !default;
$ibo-tab-container--tabs-list--background-color: $ibo-color-grey-100 !default;

$ibo-tab-container--tab-header--max-width: 110px !default;
$ibo-tab-container--tab-header--text-color: $ibo-color-grey-700 !default;
$ibo-tab-container--tab-header--text-color--is-active: $ibo-color-blue-800 !default;
$ibo-tab-container--tab-header--text-color--on-hover: $ibo-color-blue-800 !default;
$ibo-tab-container--tab-header--background-color--on-hover: $ibo-color-grey-200 !default;

$ibo-tab-container--tab-toggler--padding-x: 24px !default;

$ibo-tab-container--tab-container--padding-x: 32px !default;
$ibo-tab-container--tab-container--padding-y: 32px !default;

$ibo-tab-container--extra-tabs-container--background-color: $ibo-tab-container--tabs-list--background-color !default;

$ibo-tab-container--extra-tabs-list-toggler--padding-x: 12px !default;

$ibo-tab-container--extra-tabs-list--max-height: 300px !default;
$ibo-tab-container--extra-tabs-list--border-radius: $ibo-border-radius-300;
$ibo-tab-container--extra-tabs-list--background-color: $ibo-tab-container--tabs-list--background-color !default;

$ibo-tab-container--extra-tab-toggler--padding: 8px 16px !default;
$ibo-tab-container--extra-tab-toggler--max-width: 220px !default;
$ibo-tab-container--extra-tab-toggler--text-color: $ibo-color-grey-700 !default;
$ibo-tab-container--extra-tab-toggler--text-color--on-hover: $ibo-color-blue-800 !default;
$ibo-tab-container--extra-tab-toggler--background-color--on-hover: $ibo-color-grey-200 !default;

/* Rules */
.ibo-tab-container--tabs-list {
	position: relative;
	@extend %ibo-full-height-content;
	height: $ibo-tab-container--tabs-list--height;

	background-color: $ibo-tab-container--tabs-list--background-color;
	@extend %ibo-font-ral-nor-150;
}
.ibo-tab-container--tab-header{
	@extend %ibo-full-height-content;

	color: $ibo-tab-container--tab-header--text-color;

	&:hover{
		color: $ibo-tab-container--tab-header--text-color--on-hover;
		background-color: $ibo-tab-container--tab-header--background-color--on-hover;
	}
	&.ui-tabs-active{
		@extend %ibo-font-ral-bol-150;
		color: $ibo-tab-container--tab-header--text-color--is-active;
	}
}
.ibo-tab-container--tab-toggler{
	@extend %ibo-fully-centered-content;
	padding-left: $ibo-tab-container--tab-toggler--padding-x;
	padding-right: $ibo-tab-container--tab-toggler--padding-x;

	@extend %ibo-text-truncated-with-ellipsis;
	@extend %ibo-hyperlink-inherited-colors
}
.ibo-tab-container--extra-tabs-container{
	@extend .ibo-tab-container--tab-header;

	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;

	background-color: $ibo-tab-container--extra-tabs-container--background-color;
}
.ibo-tab-container--extra-tabs-list-toggler{
	@extend .ibo-tab-container--tab-toggler;

	padding-left: $ibo-tab-container--extra-tabs-list-toggler--padding-x;
	padding-right: $ibo-tab-container--extra-tabs-list-toggler--padding-x;
}
.ibo-tab-container--extra-tabs-list{
	position: absolute;
	z-index: 1;
	top: calc(100% + 6px);
	right: 12px;
	max-height: $ibo-tab-container--extra-tabs-list--max-height;
	display: flex;
	flex-direction: column;

	background-color: $ibo-tab-container--extra-tabs-list--background-color;
	border-radius: $ibo-tab-container--extra-tabs-list--border-radius;
	@extend %ibo-elevation-100;
}
.ibo-tab-container--extra-tab-toggler{
	padding: $ibo-tab-container--extra-tab-toggler--padding;
	max-width: $ibo-tab-container--extra-tab-toggler--max-width;

	color: $ibo-tab-container--extra-tab-toggler--text-color;
	@extend %ibo-text-truncated-with-ellipsis;

	&:hover,
	&:active{
		color: $ibo-tab-container--extra-tab-toggler--text-color--on-hover;
		background-color: $ibo-tab-container--extra-tab-toggler--background-color--on-hover;
	}
}

.ibo-tab-container--tab-container{
	padding: $ibo-tab-container--tab-container--padding-y $ibo-tab-container--tab-container--padding-x;
}