@import "var.less";

.@{prefixName}-tabs {
	background-color: @tabs-background-color;
	position: relative;
	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	&__bar {
		box-sizing: border-box;
		position: relative;
		&:after {
			position: absolute;
			box-sizing: border-box;
			-webkit-transform-origin: center;
			transform-origin: center;
			content: " ";
			display: block;
			pointer-events: none;
			top: -50%;
			right: -50%;
			bottom: -50%;
			left: -50%;
			border-style: solid;
			border-color: @tabs-bar-border-color;
			border-width: @tabs-bar-bottom-border-width;
			-webkit-transform: scale(.5);
			transform: scale(.5);
		}
	}

	&__list {
		position: relative;
		display: flex;
		-webkit-user-select: none;
		user-select: none;
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		height: @tabs-tab-height;
	}

	&__scroll {
		display: block;
		width: 100%;
	}

	&__line {
		position: absolute;
		left: 0;
		bottom: 0;
		height: @tabs-line-height-vertical;
		background-color: @tabs-line-color;
		width: @tabs-line-width-vertical;
		transition-delay: .1s;
	}
	&__item {
		position: relative;
		display: flex;
		box-sizing: border-box;
		text-align: center;
		justify-content: center;
		align-items: center;
		color: @tabs-tab-inactive-text-color;
		font-size: @tabs-tab-text-size;
		flex: 1;
		padding: @tabs-tab-padding;
	}
	&__item.@{prefixName}-tabs__placement {
		&--top {
			flex-direction: column;
		}
		&--right {
			flex-direction: row-reverse;
		}
		&--bottom {
			flex-direction: column-reverse;
		}
		&--left {
			flex-direction: row;
		}
	}
	&__panel {
		width: 100%;
		padding: @tabs-panel-padding;
		box-sizing: border-box;
	}
	&__content {
		width: 100%;
		box-sizing: border-box;
	}
	&__content.is-active {
		opacity: 1;
		height: 100%;
		-webkit-transition: opacity .45s;
		transition: opacity .45s;
		// pointer-events: none;
	}
	&__content.is-inactive {
		opacity: 0;
		height: 0
	}
	&__image {
		width: @tabs-image-width;
		height: @tabs-image-height;
		margin: @tabs-image-margin;
	}
	&__badge {
		display: flex;
		&-text {
			position: initial;
			transform: none;
			padding: @tabs-badge-text-padding;
			line-height: @tabs-badge-text-line-height;
			min-width: @tabs-badge-text-min-width;
			width: @tabs-badge-text-width;
			height: @tabs-badge-text-height;
			margin: @tabs-badge-text-margin;
		}
		&-dot {
			position: initial;
			transform: none;
			width: @tabs-badge-dot-width;
			height: @tabs-badge-dot-height;
			margin: @tabs-badge-dot-margin;
		}
	}

}

.@{prefixName}-tabs.@{prefixName}-tabs__placement--left {
	flex-direction: row;
	.@{prefixName}-tabs__bar {
		&:after {
			border-width: @tabs-bar-left-border-width;
		}
	}

}
.@{prefixName}-tabs.@{prefixName}-tabs__placement--right {
	flex-direction: row-reverse;
	.@{prefixName}-tabs__bar {
		&:after {
			border-width: @tabs-bar-right-border-width;
		}
	}
	.@{prefixName}-tabs__line {
		right: 0;
		left: auto;
	}
}
.@{prefixName}-tabs.@{prefixName}-tabs__placement--top {
	flex-direction: column;
	.@{prefixName}-tabs__bar {
		&:after {
			border-width: @tabs-bar-bottom-border-width;
		}
	}
}
.@{prefixName}-tabs.@{prefixName}-tabs__placement--bottom {
	flex-direction: column-reverse;
	.@{prefixName}-tabs__bar {
		&:after {
			border-width: @tabs-bar-top-border-width;
		}
	}
	.@{prefixName}-tabs__line {
		top: 0;
		bottom: auto;
	}
}

.@{prefixName}-tabs.@{prefixName}-tabs__placement--left,
.@{prefixName}-tabs.@{prefixName}-tabs__placement--right {
	.@{prefixName}-tabs__bar {
		width: @tabs-bar-width;
	}
	.@{prefixName}-tabs__panel {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-direction: column;
		position: relative;
		height: @tabs-panel-height;
	}
	.@{prefixName}-tabs__list {
		height: @tabs-list-height;
		flex-direction: column;
	}
	.@{prefixName}-tabs__item {
		min-height: @tabs-tab-height;
		// line-height: @tabs-tab-line-height;
	}
	.@{prefixName}-tabs__line {
		height: @tabs-line-height-horizontal;
		width: @tabs-line-width-horizontal;
	}
}

// .@{prefixName}-tabs.@{prefixName}-tabs__placement--top,
// .@{prefixName}-tabs.@{prefixName}-tabs__placement--bottom {

// }