@import '@/uni_modules/lime-style/index.scss';
@import '@/uni_modules/lime-style/mixins/hairline.scss';

/* #ifdef  uniVersion >= 4.75 */ 
$use-css-var: true;
/* #endif */

$tabs: l-tabs;
$item: l-tabs__item;

$text-color-disabled: create-var(text-color-disabled, $text-color-4);

$tab-font-size: create-var(tab-font-size, 14px);
$tab-large-font-size: create-var(tab-font-size, 16px);
$tab-nav-bg-color: create-var(tab-nav-bg-color, $bg-color-container);
$tab-content-bg-color: create-var(tab-content-bg-color, $bg-color-container);

$tab-item-height: create-var(tab-item-height, 48px);
$tab-item-padding-x: create-var(tab-item-padding-x, 16px);
$tab-item-padding-y: create-var(tab-item-padding-y, 0);

$tab-item-color: create-var(tab-item-color, $text-color-1);
$tab-item-active-color: create-var(tab-item-active-color, $primary-color);
$tab-item-disabled-color: create-var(tab-item-disabled-color, $text-color-4);
// track
$tab-split-color: create-var(tab-split-color, $border-color-2);
$tab-track-color: create-var(tab-track-color, $primary-color);
$tab-track-height: create-var(tab-track-height, 3px);
$tab-track-width: create-var(tab-track-width, 16px);
$tab-track-radius: create-var(tab-track-radius, 4px);

.#{$tabs} {
	position: relative;
	/* #ifndef UNI-APP-X & APP */
	font-size: $tab-font-size;
	/* #endif */ 
	// background-color: $tab-nav-bg-color;
	// flex-wrap: wrap;
	&__wrap {
		/* #ifndef UNI-APP-X */
		display: flex;
		/* #endif */ 
		flex: 1;
		background-color: $tab-nav-bg-color;
		flex-direction: row;
	}
	&__scroll {
		position: relative;
		flex: 1;
		/* #ifdef UNI-APP-X & APP  || UNI-APP-X & WEB */
		flex-direction: row;
		/* #endif */ 
		/* #ifndef UNI-APP-X & APP */
		:deep(.uni-scroll-view) {
			&::-webkit-scrollbar {
				display: none;
			}
		}
		// &::-webkit-scrollbar {
		// 	display: none;  
		// 	width: 0 !important;  
		// 	height: 0 !important;  
		// 	-webkit-appearance: none;  
		// 	background: transparent;  
		// }
		/* #endif */ 
		
		&--split {
			/* #ifndef UNI-APP-X & APP */
			&:after {
				@include hairline-bottom($tab-split-color);
			}
			/* #endif */
			/* #ifdef UNI-APP-X & APP */
			// border-bottom: 1rpx solid $tab-split-color;
			border-bottom-color: $tab-split-color;
			border-bottom-style: solid;
			border-bottom-width: 0.7px;
			/* #endif */
		}
	}
	&__nav {
		/* #ifndef UNI-APP-X */
		display: flex;
		/* #endif */ 
		/* #ifndef UNI-APP-X & APP */
		user-select: none;
		min-width: fit-content;
		width: 100%;
		/* #endif */
		flex-direction: row;
		position: relative;
		// width: 100%;
		// align-self: flex-start;
		flex-wrap: nowrap;
		align-items: center;
	}
	&__track {
		position: absolute;
		z-index: 1;
		transition-duration: 0.3s;
		background-color: $tab-track-color;
		left: 0;
		bottom: 1rpx;
		width: $tab-track-width;
		height: $tab-track-height;
		// border-radius: $tab-track-radius;
		@include border-radius($tab-track-radius);
	}
	
	&__content {
		width: 100%;
		// flex: 1;
		overflow: hidden;
		background-color: $tab-content-bg-color;
		&-inner {
			display: flex;
			flex-direction: row;
			flex: 1;
			overflow: visible;
			/* #ifdef UNI-APP-X & APP */
			// 为了不让首次把所有界面显示 先隐藏一下
			opacity: 0;
			/* #endif */ 
		}
		// &--animated {
		// 	display: flex;
		// 	transition-property: left;
		// }
		&--animated .l-tabs__content-inner {
			position: relative;
			width: 100%;
			height: 100%;
			/* #ifndef UNI-APP-X & APP */
			display: flex;
			will-change: left;
			/* #endif */ 
			transition-property: transform;
		}
	}
}


.#{$item} {
	position: relative;
	/* #ifndef UNI-APP-X */
	display: flex;
	/* #endif */ 
	flex: none;
	align-items: center;
	justify-content: center;
	overflow: visible;
	// padding: $tab-item-padding;
	@include padding($tab-item-padding-y $tab-item-padding-x);
	box-sizing: border-box;
	
	height: $tab-item-height;
	
	/* #ifndef UNI-APP-X & APP */
	font-weight: 400;
	color: $tab-item-color;
	white-space: nowrap;
	/* #endif */
	
	
	&-text {
		font-weight: 400;
		font-size: $tab-font-size;
		white-space: nowrap;
		transition: color 300ms;
		
		color: $tab-item-color;
		&--large {
			font-size: $tab-large-font-size;
			/* #ifndef UNI-APP-X */
			.l-tabs__item-text {
				font-size: inherit;
			}
			/* #endif */
		}
		&--active {
			font-weight: 700;
			color: $tab-item-active-color;
			
		}
		&--disabled {
			color: $tab-item-disabled-color;
		}
		/* #ifdef UNI-APP-X & APP */
		/* #endif */
		
	}
	&--evenly {
		flex: 1;
	}
	/* #ifndef UNI-APP-X & APP */ 
	&--active {
		font-weight: 700;
		color: $tab-item-active-color;
		/* #ifndef UNI-APP-X */
		.l-tabs__item-text {
			font-weight: inherit;
			color: inherit
		}
		/* #endif */
	}
	&--disabled {
		color: $tab-item-disabled-color;
		/* #ifndef UNI-APP-X */
		.l-tabs__item-text {
			color: inherit
		}
		/* #endif */
	}
	/* #endif */
	
}