@import "var";

:host{
	width: 100%;
	font-size: 0;
	vertical-align: middle;
}

.@{prefixName}-checkbox-wrap{
	.flex(@align-items: center);
	display: inline-flex;
	vertical-align: middle;
	font-size: 0;
	padding: 4px 0;
	margin-inline-end: 10rpx;
	&.is-checked{
		.@{prefixName}-checkbox{
			background-color: @checkbox-active-color;
			&::after{
				border: none;
			}
			&.@{prefixName}-checkbox--square::after{
				.border(1px, @checkbox-active-background-color, 50%);
			}
		}

		&.is-disabled .@{prefixName}-checkbox{
			background-color: @checkbox-active-disabled-color;
		}
	}
	&.is-disabled{
		color: @checkbox-disabled-text-color;
		.@{prefixName}-checkbox{
			background-color: @checkbox-base-disabled-color;
			&::after{
				.border(1px, @checkbox-disabled-border-color, 50%);
			}
		}
  }
  &.@{prefixName}-checkbox__wrap--outline{
    width: 100%;
		height: 36px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000;
		position: relative;
		box-sizing: border-box;
		.@{prefixName}-checkbox__label{
			margin-left: 0;
			font-size: 14px;
			line-height: 1;
		}

		&.is-checked{
			border: 1px solid #006EFF;
			color: #006EFF;
			background-color: #EBF4FF;
			// .@{prefixName}-checkbox{
			// 	position: absolute;
			// 	top: 0;
			// 	right: 0;
			// 	transform: translate3d(50%, -50%, 0);
			// }
		}
		&.is-disabled{
			color: @checkbox-disabled-text-color;
		}
  }
	.@{prefixName}-checkbox{
		flex-grow: 0;
		flex-shrink: 0;
		vertical-align: middle;

		width: @checkbox-width;
		height: @checkbox-height;
		background-color: @checkbox-background-color;
		box-sizing: border-box;
		border-radius: 50%;
		position: relative;
		.flex-center();
		&.@{prefixName}-checkbox--square{
			border-radius: 0;
			&::after{
				.border(1px, @checkbox-border-color);
			}
		}
		&::after{
			.border(1px, @checkbox-border-color, 50%);
		}
		&.is-checked{
			background-color: @checkbox-active-color;
			&::after{
				.border(1px, @checkbox-active-background-color, 50%);
			}
		}
	}
	.@{prefixName}-checkbox__label{
		font-size: @checkbox-label-text-size;
		margin-left: @checkbox-label-margin-left;
		line-height: @checkbox-label-line-height;
		&:empty{
			margin-left: 0;
		}
	}

	&.@{prefixName}-checkbox__wrap--agreement{
		align-items: flex-start;
		.@{prefixName}-checkbox{
			width: @checkbox-agreement-width;
			height: @checkbox-agreement-height;
			margin-top: @checkbox-agreement-margin-top;
		}
		.@{prefixName}-checkbox__label{
			font-size: @checkbox-agreement-label-text-size;
			margin-left: @checkbox-agreement-margin-left;
			line-height: @checkbox-agreement-line-height;
		}
	}
}