@import "checkbox-api";
// checkbox label
.#{$eps-prefix}checkbox {
-webkit-appearance: none;
border-radius: $eps-checkbox-border-radius;
width: $eps-checkbox-size;
height: $eps-checkbox-size;
outline: 0;
background-color: var(--checkbox-background-color);
display: inline-flex;
justify-content: center;
align-items: center;
border: 1px solid var(--checkbox-border-color);
&::after {
display: inline-block;
margin-bottom: calc(#{$eps-checkbox-indicator-scale-unit} / 2 * 100%);
content: " ";
width: $eps-checkbox-indicator-size-unit;
height: (2 * $eps-checkbox-indicator-size-unit);
transform: rotate(45deg);
}
&:hover {
--checkbox-border-color: var(--checkbox-hover-border-color);
}
&:active {
--checkbox-border-color: var(--checkbox-active-border-color);
}
&:checked {
--checkbox-background-color: var(--checkbox-checked-background-color);
--checkbox-border-color: var(--checkbox-checked-background-color);
&::after {
border: solid $eps-checkbox-indicator-color;
border-width: 0 $eps-checkbox-indicator-border-width $eps-checkbox-indicator-border-width 0;
}
&:hover {
--checkbox-background-color: var(--checkbox-checked-hover-background-color);
--checkbox-border-color: var(--checkbox-checked-hover-background-color);
}
&:active {
--checkbox-background-color: var(--checkbox-checked-active-background-color);
--checkbox-border-color: var(--checkbox-checked-active-background-color);
}
&:disabled {
--checkbox-background-color: var(--checkbox-checked-disabled-background-color);
--checkbox-border-color: var(--checkbox-checked-disabled-background-color);
}
}
&--rounded {
border-radius: 50%;
}
&--indeterminate {
&::after {
display: inline-block;
margin-bottom: 0;
content: " ";
width: $eps-checkbox-indeterminate-indicator-size-unit;
height: 0;
transform: rotate(0deg);
border-top: $eps-checkbox-indicator-border-width solid $eps-checkbox-indicator-color;
}
--checkbox-background-color: var(--checkbox-checked-background-color);
--checkbox-border-color: var(--checkbox-checked-background-color);
}
&--error,
&--error:checked {
&::before,
&::after {
display: inline-block;
margin-bottom: 0;
content: " ";
width: $eps-checkbox-indeterminate-indicator-size-unit;
height: 0;
border: solid $eps-checkbox-indicator-color;
border-width: $eps-checkbox-indicator-border-width 0 0 0;
position: absolute;
}
&::before {
transform: rotate(45deg);
}
&::after {
transform: rotate(-45deg);
}
&,
&:hover {
--checkbox-background-color: var(--checkbox-error-background-color);
--checkbox-border-color: var(--checkbox-error-background-color);
}
}
}