
.vui-icon-hover.vui-checkbox-icon-hover::before {
	width:24px;
	height:24px
}
.vui-checkbox {
	position:relative;
	display:inline-flex;
	align-items:center;
	box-sizing:border-box;
	padding-left:5px;
	font-size:14px;
	line-height:unset;
	cursor:pointer
}
.vui-checkbox>input[type='checkbox'] {
	position:absolute;
	top:0;
	left:0;
	width:0;
	height:0;
	opacity:0
}
.vui-checkbox>input[type='checkbox']:focus-visible + .vui-checkbox-icon-hover::before {
	background-color:var(--color-fill-2)
}
.vui-checkbox:hover .vui-checkbox-icon-hover::before {
	background-color:var(--color-fill-2)
}
.vui-checkbox-label {
	margin-left:8px;
	color:var(--color-text-1)
}
.vui-checkbox-icon {
	position:relative;
	box-sizing:border-box;
	width:14px;
	height:14px;
	background-color:var(--color-bg-2);
	border:2px solid var(--color-fill-3);
	border-radius:var(--border-radius-small);
	user-select:none
}
.vui-checkbox-icon::after {
	position:absolute;
	top:50%;
	left:50%;
	display:block;
	width:6px;
	height:2px;
	background:var(--color-white);
	border-radius:.5px;
	transform:translateX(-50%) translateY(-50%) scale(0);
	content:''
}
.vui-checkbox-icon-check {
	position:relative;
	display:block;
	width:8px;
	height:100%;
	margin:0 auto;
	color:var(--color-white);
	transform:scale(0);
	transform-origin:center 75%
}
.vui-checkbox:hover .vui-checkbox-icon {
	border-color:var(--color-fill-4);
	transition:border-color .1s cubic-bezier(0,0,1,1),transform .3s cubic-bezier(.3,1.3,.3,1)
}
.vui-checkbox-checked:hover .vui-checkbox-icon,.vui-checkbox-indeterminate:hover .vui-checkbox-icon {
	transition:transform .3s cubic-bezier(.3,1.3,.3,1)
}
.vui-checkbox-checked .vui-checkbox-icon {
	background-color:rgb(var(--primary-6));
	border-color:transparent
}
.vui-checkbox-checked .vui-checkbox-icon-check {
	transform:scale(1);
	transition:transform .3s cubic-bezier(.3,1.3,.3,1)
}
.vui-checkbox-indeterminate .vui-checkbox-icon {
	background-color:rgb(var(--primary-6));
	border-color:transparent
}
.vui-checkbox-indeterminate .vui-checkbox-icon svg {
	transform:scale(0)
}
.vui-checkbox-indeterminate .vui-checkbox-icon::after {
	transform:translateX(-50%) translateY(-50%) scale(1);
	transition:transform .3s cubic-bezier(.3,1.3,.3,1)
}
.vui-checkbox.vui-checkbox-disabled {
	cursor:not-allowed
}
.vui-checkbox.vui-checkbox-disabled .vui-checkbox-icon-hover {
	cursor:not-allowed
}
.vui-checkbox.vui-checkbox-disabled:hover .vui-checkbox-mask {
	border-color:var(--color-fill-3)
}
.vui-checkbox-checked:hover .vui-checkbox-icon,.vui-checkbox-indeterminate:hover .vui-checkbox-icon {
	border-color:transparent
}
.vui-checkbox-disabled .vui-checkbox-icon {
	background-color:var(--color-fill-2);
	border-color:var(--color-fill-3)
}
.vui-checkbox-disabled.vui-checkbox-checked .vui-checkbox-icon,.vui-checkbox-disabled.vui-checkbox-checked:hover .vui-checkbox-icon {
	background-color:var(--color-primary-light-3);
	border-color:transparent
}
.vui-checkbox-disabled:hover .vui-checkbox-icon-hover::before,.vui-checkbox-checked:hover .vui-checkbox-icon-hover::before,.vui-checkbox-indeterminate:hover .vui-checkbox-icon-hover::before {
	background-color:transparent
}
.vui-checkbox-disabled:hover .vui-checkbox-icon {
	border-color:var(--color-fill-3)
}
.vui-checkbox-disabled .vui-checkbox-label {
	color:var(--color-text-4)
}
.vui-checkbox-disabled .vui-checkbox-icon-check {
	color:var(--color-fill-3)
}
