@import '~@/uni_modules/lime-style/index.scss';
/* #ifdef  uniVersion >= 4.75 */ 
$use-css-var: true;
/* #endif */
$segmented: #{$prefix}-segmented;

$segmented-primary-color: create-var(segmented-defalut-color, $primary-color);
$segmented-bg-color: create-var(segmented-bg-color, $fill-3);
$segmented-padding-x: create-var(segmented-padding-x, $spacer-tn);
$segmented-padding-y: create-var(segmented-padding-y, $spacer-tn);
$segmented-radius: create-var(segmented-radius, $border-radius-sm);
$segmented-text-color: create-var(segmented-text-color, $text-color-1);
$segmented-active-bg-color: create-var(segmented-active-bg-color, white);
$segmented-active-text-color: create-var(segmented-active-text-color, $primary-color);
// $segmented-disabled-text-color: create-var(segmented-disabled-text-color, $text-color-4);


$segmented-small-height: create-var(segmented-small-height, 32px);
$segmented-small-font-size: create-var(segmented-small-font-size, $font-size-sm);

$segmented-medium-height: create-var(segmented-medium-height, 36px);
$segmented-medium-font-size: create-var(segmented-medium-font-size, $font-size);

$segmented-large-height: create-var(segmented-large-height, 40px);
$segmented-large-font-size: create-var(segmented-large-font-size, $font-size-md);

.#{$segmented} {
	/* #ifndef UNI-APP-X */
	display: flex;
	box-sizing: border-box;
	overflow: hidden;
	/* #endif */
	flex-direction: row;
	position: relative;
	align-items: stretch;
	// justify-items: flex-start;
	width: 100%;
	// border-radius: $segmented-radius;
	@include border-radius($segmented-radius);
	
	&--disabled {
		/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
		cursor: no-drop;
		/* #endif */
		opacity: 0.5;
		// &.#{$segmented}--text,&.#{$segmented}--button {
		// 	opacity: 0.6;
		// }
	}
	&--card {
		// padding: $segmented-padding;
		 @include padding($segmented-padding-y $segmented-padding-x);
		background-color: $segmented-bg-color;
	}
	&--button {
		// border: 1px solid $segmented-primary-color;
		border-width: 1px;
		border-style: solid;
		border-color: $segmented-primary-color;
		
		.#{$segmented} {
			&__item {
				// padding: $segmented-padding 0;
				box-sizing: content-box;
				border-left-color: $segmented-primary-color;
				border-left-width: 1px;
				border-left-style: solid;
				border-radius: 0;
				color: $segmented-primary-color;
				&--active {
					background-color: $segmented-primary-color;
					color: white;
				}
				&--first {
					border-left-width: 0px;
				}
			}
		}
	}
	&--round {
		border-radius: 999px;
	}
	&__item {
		flex: 1;
		text-align: center;
		color: $segmented-text-color;
		font-weight: 400;
		// padding: 0 12px;
		// border-radius: $segmented-radius;
		@include border-radius($segmented-radius);
		position: relative;
		z-index: 1;
	
		transition-property: background,color;
		transition-duration: 300ms;
			/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
		/* #endif */
		transition-timing-function: linear;
		&--small {
			font-size: $segmented-small-font-size;
			height: $segmented-small-height;
			line-height: $segmented-small-height;
		}
		&--medium {
			font-size: $segmented-medium-font-size;
			height: $segmented-medium-height;
			line-height: $segmented-medium-height;
		}
		&--large {
			font-size: $segmented-large-font-size;
			height: $segmented-large-height;
			line-height: $segmented-large-height;
		}
		&--active {
			color: $segmented-active-text-color;
			font-weight: bold;
		}
		// &--disabled {
		// 	color: $segmented-disabled-text-color;
		// }
	}
	&__slider {
		position: absolute;
		left: 0;
		transition-property: transform,width,height;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		transition-duration: 200ms;
		background-color: $segmented-active-bg-color;
		// border-radius: $segmented-radius;
		@include border-radius($segmented-radius);
		&--card {
			// top: 0;
			// bottom: 0;
			// height: 100%;
		}
		&--round {
			border-radius: 999px;
		}
		// &--disabled {
		// 	opacity: 0.8;
		// }
		&--text {
			bottom: 0;
			height: 2px;
			background-color: $segmented-primary-color;
		}
	}
}