@import '~@/uni_modules/lime-style/index.scss';
@import '~@/uni_modules/lime-style/functions.scss';
/* #ifdef  uniVersion >= 4.75 */ 
$use-css-var: true !default;
/* #endif */

$checkbox: #{$prefix}-checkbox;
$icon: #{$checkbox}__icon;


$checkbox-icon-size: create-var(checkbox-icon-size, 20px);
$checkbox-font-size: create-var(checkbox-font-size, 16px);

$checkbox-small-icon-size: create-var(checkbox-small-icon-size, 14px);
$checkbox-small-font-size: create-var(checkbox-small-font-size, 15px);

$checkbox-large-icon-size: create-var(checkbox-large-icon-size, 22px);
$checkbox-large-font-size: create-var(checkbox-large-font-size, 18px);

$checkbox-icon-border-width: create-var(checkbox-icon-border-width, 1px);
// $checkbox-icon-border-color: var(--l-checkbox-border-color, $border-color);
$checkbox-icon-border-radius: create-var(checkbox-icon-border-radius, 3px);

$checkbox-icon-bg-color: create-var(checkbox-icon-bg-color, $bg-color-container);
$checkbox-icon-border-color: create-var(checkbox-border-icon-color, $gray-5);
$checkbox-icon-disabled-color: create-var(checkbox-icon-disabled-color, $gray-5);
$checkbox-icon-disabled-bg-color: create-var(checkbox-icon-disabled-bg-color, $gray-1);
$checkbox-icon-checked-color: create-var(checkbox-icon-checked-color, $primary-color);
$checkbox-text-color: create-var(checkbox-text-color,  $text-color-1);
$checkbox-icon-text-gap: create-var(checkbox-icon-text-gap, $spacer-xs);

/* #ifdef MP */
:host {
	display: inline-flex;
}
/* #endif */
.#{$checkbox} {
	/* #ifndef UNI-APP-X */
	display: inline-flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	&__icon {
		position: relative;
		box-sizing: border-box;
		width: $checkbox-icon-size;
		height: $checkbox-icon-size;
		align-self: center;	
		transition-property: all; 
		// #ifdef UNI-APP-X && APP
		// #ifndef APP-HARMONY || APP-ANDROID
		// 鸿蒙加上时间会导致无法描边 安卓会没有尺寸
		transition-duration: 200ms;
		/* #endif */
		/* #endif */
		transition-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
		/* #ifndef UNI-APP-X && APP */
		&:after {
			box-sizing: border-box;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			opacity: 0;
			content: "";
			transition-property: all;
			transition-duration: 200ms;
			transition-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
		}
		/* #endif */
		&--rectangle {
			// border-radius: $checkbox-icon-border-radius;
			@include border-radius($checkbox-icon-border-radius);
		}
		&--dot,
		&--circle {
			border-radius: 99px;
		}
		&--rectangle,
		&--dot,
		&--circle{
			background-color: $checkbox-icon-bg-color;
			border-width: $checkbox-icon-border-width;
			border-style: solid;
			border-color: $checkbox-icon-border-color;
			// border: $checkbox-icon-border-width solid $checkbox-icon-border-color;
		} 
		&--rectangle,&--circle {
			/* #ifndef UNI-APP-X && APP */
			&:after {
				top: 48%;
				left: 24%;
				display: table;
				width: divide(100%, 20) * 7;
				height: divide(100%, 20) * 12;
				border: calc(#{$checkbox-icon-size} / 7) solid transparent;
				border-top: 0;
				border-inline-start: 0;
				transform: rotate(45deg) scale(0) translate(-50%,-50%);
				content: "";
			}
			/* #endif */
		}
		&--rectangle#{&}--checked, 
		&--circle#{&}--checked {
			background-color: $checkbox-icon-checked-color;
			border-color: $checkbox-icon-checked-color;
			/* #ifndef UNI-APP-X && APP */
			&:after {
				opacity: 1;
				transform: rotate(45deg) scale(1) translate(-50%,-50%);
				border-color: white;		
			}
			/* #endif */
		}
		&--rectangle#{&}--indeterminate,
		&--circle#{&}--indeterminate{
			background-color: $checkbox-icon-checked-color;
			border-color: $checkbox-icon-checked-color;
			/* #ifndef UNI-APP-X && APP */
			&:after {
				opacity: 1;
				height: 0;
				width: 50%;
				top: 50%;
				left: 50%;
				transform: scale(1) translate(-50%,-50%);
				border-color: white;		
			}
			/* #endif */
		}
		
		&--dot {
			/* #ifndef UNI-APP-X && APP */
			&:after {
				background-color: white;
				border-radius: 99px;//$checkbox-icon-border-radius;
				transform: scale(0) translate(-50%,-50%);
			}
			/* #endif */
		}
		&--dot#{&}--checked{
			background-color: $checkbox-icon-checked-color;
			border-color: $checkbox-icon-checked-color;
			/* #ifndef UNI-APP-X && APP */
			&:after{
				opacity: 1;
				width: 44%;
				height: 44%;
				transform: scale(1) translate(-50%,-50%);
			}
			/* #endif */
		}
		&--dot#{&}--indeterminate {
			background-color: $checkbox-icon-checked-color;
			border-color: $checkbox-icon-checked-color;
			/* #ifndef UNI-APP-X && APP */
			&:after {
				opacity: 1;
				border-radius: 0;
				transform: scale(1) translate(-50%,-50%);
				width: 50%;
				height: calc(#{$checkbox-icon-size} / 7);
			}
			/* #endif */
		}
		&--line {
			/* #ifndef UNI-APP-X && APP */
			&:after {
				top: 46%;
				left: 0%;
				inset-inline-start: 10%;
				display: table;
				width:  divide(100%, 14) * 7;
				height:  divide(100%, 14) * 12;
				border: calc(#{$checkbox-icon-size} / 7) solid transparent;
				border-top: 0;
				border-inline-start: 0;
				transform: rotate(45deg) scale(0) translate(-50%,-50%);
				content: "";
				transition-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
			}
			/* #endif */
		}
		&--line#{&}--checked {
			/* #ifndef UNI-APP-X && APP */
			&:after {
				opacity: 1;
				transform: rotate(45deg) scale(1) translate(-50%,-50%);
				border-color: $checkbox-icon-checked-color;
			}
			/* #endif */
		}
		&--line#{&}--indeterminate {
			/* #ifndef UNI-APP-X && APP */
			&:after {
				opacity: 1;
				height: 0;
				left: 50%;
				width: 70%;
				transform: scale(1) translate(-50%,-50%);
				border-color: $checkbox-icon-checked-color;
			}
			/* #endif */
		}
		
		&--rectangle#{&}--disabled, 
		&--circle#{&}--disabled, 
		&--dot#{&}--disabled {
			border-color: $checkbox-icon-disabled-color;
			background-color: $checkbox-icon-disabled-bg-color;
		}
		&--rectangle#{&}--disabled#{&}--checked, 
		&--circle#{&}--disabled#{&}--checked, 
		&--dot#{&}--disabled#{&}--checked,
		&--rectangle#{&}--disabled#{&}--indeterminate,
		&--circle#{&}--disabled#{&}--indeterminate, 
		&--dot#{&}--disabled#{&}--indeterminate {
			/* #ifndef UNI-APP-X && APP */
			&:after {
				border-color: $checkbox-icon-disabled-color;
			}
			/* #endif */
		}
		&--dot#{&}--disabled#{&}--checked,
		&--dot#{&}--disabled#{&}--indeterminate {
			/* #ifndef UNI-APP-X && APP */
			&:after {
				background-color: $checkbox-icon-disabled-color;
			}
			/* #endif */
		}
		&--line#{&}--disabled#{&}--checked,
		&--line#{&}--disabled#{&}--indeterminate{
			/* #ifndef UNI-APP-X && APP */
			&:after {
				border-color: $checkbox-icon-disabled-color;
			}
			/* #endif */
		}
	}
	&__label {
		padding-left: $checkbox-icon-text-gap;//$spacer-xs;
		// padding-right: $spacer-xs;
		font-size: $checkbox-font-size;
		color: $checkbox-text-color;//$text-color-1;
		white-space: nowrap; //ios
		&--disabled {
			color: $checkbox-icon-disabled-color;
		}
	}
}