@import '../default/var';
// @import './icon';
.#{$prefix}-checkbox {
    display: inline-block;
    white-space: nowrap;
    line-height: 1;
    outline: 0;
    cursor: pointer;
    user-select: none;
    &__label,
    &__input {
        display: inline-block;
        vertical-align: middle;
    }
    &__label {
        margin-left: 10px;
        color: $checkbox-color-fore;
    }
    &__input {
        width: 14px;
        height: 14px;
        border: solid 1px $checkbox-color-border;
        border-radius: 2px;
        position: relative;
        box-sizing: border-box;
        &:hover:not(:is-disabled) {
            border-color: $checkbox-color-border-hover;
        }
        .native {
            display: none;
        }
    }
    &.is-checked {
        .#{$prefix}-checkbox {
            &__input {
                border-color: $checkbox-color-border-hover;
                color: $checkbox-color-border-hover;
                font-size: 14px;
                border: none;
            }
        }
    }
    &.is-indeterminate {
        .#{$prefix}-checkbox {
            &__input {
                border-color: $checkbox-color-border-hover;
                color: $checkbox-color-border-hover;
                font-size: 14px;
                border: none;
            }
            &__label {
                color: $checkbox-color-border-hover;
            }
        }
    }
    &.is-disabled {
        cursor: not-allowed;
        .#{$prefix}-checkbox {
            &__label {
                color: $checkbox-color-disabled-fore;
            }
            &__input {
                background-color: $checkbox-color-disabled-back;
            }
        }
        &.is-checked {
            .#{$prefix}-checkbox {
                &__input {
                    border-color: $checkbox-color-border;
                    color: $checkbox-color-border;
                }
            }
        }
        &.is-indeterminate {
            .#{$prefix}-checkbox {
                &__input {
                    border-color: $checkbox-color-border;
                    color: $checkbox-color-border;
                }
            }
        }
    }
}