contract-front/uni_modules/lime-radio/components/l-radio/index-u.scss

@import '~@/uni_modules/lime-style/index.scss';
@import '~@/uni_modules/lime-style/functions.scss';
$radio: #{$prefix}-radio;
$icon: #{$radio}__icon;


$radio-icon-size: create-var(radio-icon-size, 40rpx);
$radio-font-size: create-var(radio-font-size, 32rpx);

$radio-small-icon-size: create-var(radio-small-icon-size, 28rpx);
$radio-small-font-size: create-var(radio-small-font-size, 30rpx);

$radio-large-icon-size: create-var(radio-large-icon-size, 44rpx);
$radio-large-font-size: create-var(radio-large-font-size, 36rpx);

$radio-icon-border-width: create-var(radio-icon-border-width, 1rpx);
// $radio-icon-border-color: var(--l-radio-border-color, $border-color);
$radio-icon-border-radius: create-var(radio-icon-border-radius, 999rpx);

$radio-icon-bg-color: create-var(radio-icon-bg-color, white);
$radio-icon-border-color: create-var(radio-border-icon-color, $gray-5);
$radio-icon-disabled-color: create-var(radio-icon-disabled-color, $gray-5);
$radio-icon-disabled-bg-color: create-var(radio-icon-disabled-bg-color, $gray-1);
$radio-icon-checked-color: create-var(radio-icon-checked-color, $primary-color);


.#{$radio} {
	/* #ifndef UNI-APP-X */
	display: inline-flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	&__icon {
		position: relative;
		box-sizing: border-box;
		width: $radio-icon-size;
		height: $radio-icon-size;
		align-self: center;	
		transition-property: all;
		transition-duration: 200ms;
		transition-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
		/* #ifndef APP-ANDROID || APP-IOS */
		&: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 */
		&--dot,&--circle {
			background-color: $radio-icon-bg-color;
			border: $radio-icon-border-width solid $radio-icon-border-color;
			border-radius: $radio-icon-border-radius;
		}
		&--circle {
			/* #ifndef APP-ANDROID || APP-IOS */
			&:after {
				top: 48%;
				left: 24%;
				display: table;
				width: divide(100%, 20) * 7;
				height: divide(100%, 20) * 12;
				border: calc(#{$radio-icon-size} / 7) solid transparent;
				border-top: 0;
				border-inline-start: 0;
				transform: rotate(45deg) scale(0) translate(-50%,-50%);
				content: "";
			}
			/* #endif */
		}
		&--circle#{&}--checked {
			background-color: $radio-icon-checked-color;
			border-color: $radio-icon-checked-color;
			/* #ifndef APP-ANDROID || APP-IOS */
			&:after {
				opacity: 1;
				transform: rotate(45deg) scale(1) translate(-50%,-50%);
				border-color: white;		
			}
			/* #endif */
		}
		
		&--dot {
			/* #ifndef APP-ANDROID || APP-IOS */
			&:after {
				background-color: white;
				border-radius: $radio-icon-border-radius;
				transform: scale(0) translate(-50%,-50%);
			}
			/* #endif */
		}
		&--dot#{&}--checked{
			background-color: $radio-icon-checked-color;
			/* #ifndef APP-ANDROID || APP-IOS */
			border-color: $radio-icon-checked-color;
			&:after{
				opacity: 1;
				width: 44%;
				height: 44%;
				transform: scale(1) translate(-50%,-50%);
			}
			/* #endif */
		}
		&--line {
			/* #ifndef APP-ANDROID || APP-IOS */
			&:after {
				top: 46%;
				left: 0%;
				inset-inline-start: 10%;
				display: table;
				width:  divide(100%, 14) * 7;
				height:  divide(100%, 14) * 12;
				border: calc(#{$radio-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 APP-ANDROID || APP-IOS */
			&:after{
				opacity: 1;
				transform: rotate(45deg) scale(1) translate(-50%,-50%);
				border-color: $radio-icon-checked-color;
			}
			/* #endif */
		}
		&--circle#{&}--disabled, &--dot#{&}--disabled {
			border-color: $radio-icon-disabled-color;
			background-color: $radio-icon-disabled-bg-color;
		}
		&--circle#{&}--disabled#{&}--checked, &--dot#{&}--disabled#{&}--checked {
			/* #ifndef APP-ANDROID || APP-IOS */
			&:after {
				border-color: $radio-icon-disabled-color;
			}
			/* #endif */
		}
		&--dot#{&}--disabled#{&}--checked {
			/* #ifndef APP-ANDROID || APP-IOS */
			&:after {
				background-color: $radio-icon-disabled-color;
			}
			/* #endif */
		}
		&--line#{&}--disabled#{&}--checked {
			/* #ifndef APP-ANDROID || APP-IOS */
			&:after {
				border-color: $radio-icon-disabled-color;
			}
			/* #endif */
		}
	}
	&__label {
		padding-left: $spacer-xs;
		// padding-right: $spacer-xs;
		font-size: $radio-font-size;
		color: $text-color-1;
		&--disabled {
			color: $radio-icon-disabled-color;
		}
	}
}