/* TAB BUTTONS */
.tabButtons {
	display: flex;
}

.tabButton {
	composes: mdc-tab mdc-tab__content from '@material/tab/dist/mdc.tab.css';
	height: 48px;
	pointer-events: all;
}

.root:not(.fixed) .tabButton {
	min-width: 90px;
	max-width: 360px;
	flex-grow: 0;
}

.tabButton:not(.activeTabButton) .tabButtonContent {
	color: var(--mdc-tab-button-text-color);
}

.tabButtonContent {
	composes: mdc-tab__text-label from '@material/tab/dist/mdc.tab.css';
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.activeTabButton {
	composes: mdc-tab--active from '@material/tab/dist/mdc.tab.css';
}

.root .activeTabButtonLabel {
	color: var(--mdc-tab-button-active-text-color);
}

.root .disabledTabButton {
	cursor: default;
}

.root .disabledTabButton .tabButtonContent {
	color: var(--mdc-tab-button-disabled-text-color);
}

.close {
	composes: nativeResetRoot from './button.m.css';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 5px;
	cursor: pointer;
	padding: 1px 3px;
	margin-top: -1px;
}

/* TAB INDICATOR */
.indicator {
	composes: mdc-tab-indicator from '@material/tab-indicator/dist/mdc.tab-indicator.css';
}

.indicatorActive {
	composes: mdc-tab-indicator--active from '@material/tab-indicator/dist/mdc.tab-indicator.css';
}

.indicatorContent {
	composes: mdc-tab-indicator__content mdc-tab-indicator__content--underline from '@material/tab-indicator/dist/mdc.tab-indicator.css';
}

.root .indicatorContent {
	border-color: var(--mdc-tab-button-active-text-color);
}

/* TABS */
.root {
	background-color: var(--mdc-tab-button-background);
}

.root .tab {
	background-color: var(--mdc-tab-content-background);
	color: var(--mdc-text-color);
}

/* OTHER ALIGNMENTS */
.alignRight,
.alignLeft {
	display: flex;
}

.alignRight .tabButtons,
.alignLeft .tabButtons {
	flex-direction: column;
}

.alignRight .indicatorContent,
.alignLeft .indicatorContent {
	border-top-width: 0;
	height: 100%;
}

.alignRight .indicatorContent {
	border-left-width: 2px;
	border-left-style: solid;
}

.alignLeft .indicatorContent {
	border-right-width: 2px;
	border-right-style: solid;
}

.alignRight .tabs,
.alignLeft .tabs {
	flex: 1;
}

.alignBottom .indicatorContent {
	align-self: flex-start;
}
