/* Configuration */
.js-tabs {
	--tab-padding: 20px;
	--tab-radius: 0;
	--tab-color: var(--text-color);
	--tab-bg-color: transparent;

	--panel-border-width: 4px;
	--panel-bg-color: transparent;
}

/* Layout */
.tabs-list {
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--gutter);
}

.no-js .tabs-list {
	display: none;
}

/* Tabs */
.js-tab {
	padding: var(--tab-padding);
	background-color: var(--tab-bg-color);
	border-bottom: solid var(--panel-border-width) transparent;
	color: var(--tab-color);
	flex: 1;
	font-size: var(--text-h4);
	cursor: pointer;
}

.js-tab.is-active  {
	color: inherit;
}


/* Tab Panels */
.tab-panels {
	position: relative;
	z-index: 9;
}

.tab-panel__innner {

	> *:last-child {
		margin-bottom: 0;
	}
}



/* Functionality */
.js .js-tab-panel {
	max-height: 0;
	overflow: hidden;
}

.js .js-tab-panel.is-active {
	max-height: 100%;

	.tab-panel__innner {
		min-height: 20rem;
	}
}



/* Tab Aligmnment at different breakpoints */
.tabs-horizontal {
	flex-direction: column;

	.tabs-list  {

	}

	.js-tab {
		text-wrap: nowrap;
	}

	.js-tab.is-active  {
		border-bottom-color: var(--highlight);
	}
}