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

$button: #{$prefix}-button;

$button-gap: create-var(button-gap, 4px);
$button-border-width: create-var(button-border-width, 0.71px);
$button-border-radius: create-var(button-border-radius, $border-radius-sm);
$button-solid-text-color: create-var(button-solid-text-color, white);
$button-disabled-opacity: create-var(button-disabled-opacity, 0.6);

$button-default-type-map:(
	solid-color: create-var(button-default-solid-text-color, white),
	color: create-var(button-default-color, $gray-14),
	hover-color: create-var(button-default-hover-color, rgba(0,0,0,1)),
	light: create-var(button-default-light-color,  $gray-2),
	light-hover: create-var(button-default-light-hover-color, $gray-3),
	border-color: create-var(button-default-border-color,  $gray-5)
);

$button-primary-type-map:(
	solid-color: create-var(button-primary-solid-text-color, white),
	color: create-var(button-primary-color,  $primary-color),
	hover-color: create-var(button-primary-hover-color,  $primary-color-7),
	light: create-var(button-primary-light-color,  $primary-color-1),
	light-hover: create-var(button-primary-light-hover-color,  $primary-color-2),
	border-color: create-var(button-primary-border-color,  $primary-color)
);

$button-danger-type-map:(
	solid-color: create-var(button-dangert-solid-text-color, white),
	color: create-var(button-danger-color,  $error-color),
	hover-color: create-var(button-danger-hover-color, $error-color-7),
	light: create-var(button-danger-light-color,  $error-color-1),
	light-hover: create-var(button-danger-light-hover-color,  $error-color-3),
	border-color: create-var(button-danger-border-color,  $error-color)
);

$button-warning-type-map:(
	solid-color: create-var(button-warning-solid-text-color, white),
	color: create-var(button-warning-color,  $warning-color),
	hover-color: create-var(button-warning-hover-color, $warning-color-7),
	light: create-var(button-warning-light-color,  $warning-color-1),
	light-hover: create-var(button-warning-light-hover-color,  $warning-color-2),
	border-color: create-var(button-warning-border-color,  $warning-color)
);

$button-success-type-map:(
	solid-color: create-var(button-success-solid-text-color, white),
	color: create-var(button-success-color,  $success-color),
	hover-color: create-var(button-success-hover-color, $success-color-7),
	light: create-var(button-success-light-color,  $success-color-1),
	light-hover: create-var(button-success-light-hover-color,  $success-color-2),
	border-color: create-var(button-success-border-color,  $success-color)
);

$button-info-type-map:(
	solid-color: create-var(button-info-solid-text-color, white),
	color: create-var(button-info-color,  $info-color),
	hover-color: create-var(button-info-hover-color, $info-color-7),
	light: create-var(button-info-light-color, $info-color-2),
	light-hover: create-var(button-info-light-hover-color, $info-color-3),
	border-color: create-var(button-info-border-color,  $info-color)
);


$button-type-map:(
	default: $button-default-type-map,
	primary: $button-primary-type-map,
	danger: $button-danger-type-map,
	warning: $button-warning-type-map,
	success: $button-success-type-map,
	info: $button-info-type-map,
);


$button-icon-size-map:(
	mini: create-var(button-icon-size, 32rpx),
	small: create-var(button-icon-size, 36rpx),
	medium: create-var(button-icon-size, 36rpx),
	large: create-var(button-icon-size, 48rpx),
);

$button-font-size-map:(
	mini: create-var(button-font-size, $font-size-sm),
	small: create-var(button-font-size, $font-size),
	medium: create-var(button-font-size, $font-size-md),
	large: create-var(button-font-size, $font-size-md),
);

// $button-padding-map:(
// 	mini: create-var(button-padding, 0 $spacer-xs),
// 	small: create-var(button-padding,0 $spacer-sm),
// 	medium: create-var(button-padding, 0 $spacer),
// 	large: create-var(button-padding, 0 $spacer-md),
// );

$button-padding-x-map:(
	mini: create-var(button-padding-x, $spacer-xs),
	small: create-var(button-padding-x, $spacer-sm),
	medium: create-var(button-padding-x, $spacer),
	large: create-var(button-padding-x, $spacer-md),
);

$button-padding-y-map:(
	mini: create-var(button-padding-y, 0),
	small: create-var(button-padding-y, 0),
	medium: create-var(button-padding-y, 0),
	large: create-var(button-padding-y, 0),
);



$button-height-map:(
	mini: create-var(button-mini-height, 56rpx),
	small: create-var(button-small-height, 64rpx),
	medium: create-var(button-medium-height, 80rpx),
	large: create-var(button-large-height, 96rpx),
);

@mixin button-size($size) {
	$iconSize: map-get($button-icon-size-map, $size);
	$fontSize: map-get($button-font-size-map, $size);
	// $padding: map-get($button-padding-map, $size);
	$paddingX: map-get($button-padding-x-map, $size);
	$paddingY: map-get($button-padding-y-map, $size);
	$height: map-get($button-height-map, $size);
	
	.#{$button}--#{$size} {
		// padding: $padding;
		@include padding($paddingY $paddingX);
		height: $height;
		
		/* #ifndef UNI-APP-X */
		font-size: $fontSize;
		--l-loading-size: #{$iconSize};
		/* #endif */
		
		/* #ifdef UNI-APP-X */
		.#{$button} {
			&__content {
				font-size: $fontSize;
				// line-height: 1;
			}
			// &__icon {
			// 	font-size: $iconSize;
			// }
			/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */ 
			&__loading {
				--l-loading-size: #{$iconSize};
				font-size: $iconSize;
			}
			/* #endif */
		}
		/* #endif */
		
		&.#{$button} {
			&--square,&--circle {
				width: $height;
				padding-left: 0;
				padding-right: 0;
			}
		}
	}
}
@mixin button-type($type) {
	$type-map: map-get($button-type-map, $type);
	
	$color: map-get($type-map, color);
	$solid-color: map-get($type-map, solid-color);
	$hoverColor: map-get($type-map, hover-color);
	$borderColor: map-get($type-map, border-color);
	$lightColor: map-get($type-map, light);
	$lightHoverColor: map-get($type-map, light-hover);
	
	.#{$button}--hover {
		&.#{$button}--#{$type} {
			background-color: $lightColor;
			&.#{$button}--solid {
				background-color: $hoverColor;
			}
			&.#{$button}--light {
				background-color: $lightHoverColor;
			}
		}
		
	}
	.#{$button}--#{$type} {
		/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
		color: $color;
		&:not(.#{$button}--solid) {
			--l-loading-color: #{$color};
		}
		/* #endif */
		.#{$button} {
			/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
			&__content {
				color: $color;
			}
			/* #endif */
		}
		
		
		
		
		&.#{$button}--solid {
			background-color: $color;
			/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
			color: $solid-color;
			--l-loading-color: #{$solid-color};
			&:after {
				border-color: transparent;
			}
			/* #endif */
			/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
			// border-style: solid;
			.#{$button} {
				&__content {
					color: $solid-color;
				}
				&__icon {
					color: $solid-color;
				}
				&__loading {
					// color: $button-solid-text-color;
				}
			}
			/* #endif*/
		}
		
		/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
		&.#{$button}--outline {
			border-color: $borderColor;
		}
		&.#{$button}--dashed {
			border-color: $borderColor;
		}
		/* #endif */
		/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
		&.#{$button}--outline {
			&:after {
				border-color: $borderColor;
			}
		}
		&.#{$button}--dashed {
			&:after {
				border-color: $borderColor;
			}
		}
		/* #endif */
		&.#{$button}--light {
			background-color: $lightColor;
			/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
			&:after {
				border-color: transparent;
			}
			/* #endif */
		}
		
		&.#{$button}--ghost {
			background-color: transparent;
			/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
			border-color: $borderColor;
			/* #endif */
			/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
			&:after {
				border-color: $borderColor;
			}
			/* #endif */
		}
	}
}

@include button-size(mini);
@include button-size(small);
@include button-size(medium);
@include button-size(large);


@include button-type(default);
@include button-type(primary);
@include button-type(danger);
@include button-type(info);
@include button-type(warning);
@include button-type(success);


/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY || MP-WEIXIN */
#{$button} {
    &[data-block]{
        width:100%;
        display: flex;
        margin-right: 0!important;
        .#{$button} {
            display: flex;
            width: 100%; 
        }
    }
}
/* #endif */
.#{$button} {
	opacity: 1; // uniapp x IOS必须存在
	/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
	display: inline-flex;
	white-space: nowrap;
	font-family: PingFang SC, Microsoft YaHei, Arial Regular;
	vertical-align: top;
	-webkit-appearance: none;
	margin: 0;
	background-color: transparent;
	/* #endif */
	
	position: relative;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	// css var 不支持过渡？
	/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
	transition-duration: 200ms;
	/* #endif */
	//  background-color ios 无法恢复
	transition-property:opacity,border-color,width,height;
	
	// border-radius: $button-border-radius;
	@include border-radius($button-border-radius);
	
	
	&__button {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border: none;
		background-color: transparent;
	}
	// border-width: $button-border-width;
	// border-color: transparent;
	//,&--loading
	&.#{$button}--disabled {
		opacity: $button-disabled-opacity;
		/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
		cursor: no-drop;
		/* #endif */
	}
	
	&--block {
		/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
		// border-style: solid;
		/* #endif*/
		width: 100%; 
		align-self: auto
	}
	// &--solid {
	// 	/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
	// 	color: $button-solid-text-color;
	// 	--l-loading-color: #{$button-solid-text-color};
	// 	/* #endif*/
	// 	/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
	// 	// border-style: solid;
	// 	.#{$button} {
	// 		&__content {
	// 			color: $button-solid-text-color;
	// 		}
	// 		&__icon {
	// 			color: $button-solid-text-color;
	// 		}
	// 		&__loading {
	// 			// color: $button-solid-text-color;
	// 		}
	// 	}
	// 	/* #endif*/
	// }
	/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
	&--outline {
		border-style: solid;
		border-width: $button-border-width;
	}
	&--dashed {
		border-style: dashed;
		border-width: $button-border-width;
	}
	/* #endif*/
	&__loading,&__icon{
		align-self: center;
	}
	&--round,&--circle {
		border-radius: 999px;
		/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
		--l-button-border-radius: 999px
		/* #endif*/
	}
	/* #ifdef UNI-APP-X */
	.gap {
		margin-left: $button-gap;
	}
	/* #endif*/
	/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY || MP-WEIXIN */
	&::after {
	    border-radius: calc($button-border-radius * 2);
		border-color: var(--l-button-border-color);
	}
	&--text {
		&::after {
		    border: 0;
		}
	}
	
	view+&__content:not(:empty),
	l-button+&__content:not(:empty),
	l-icon+&__content:not(:empty),
	&__loading+&__content:not(:empty),
	&__icon+&__content:not(:empty) {
	    margin-left: $button-gap;
	}
	/* #endif*/
}