@import '../sass/colors';
@import '../sass/mixins';

@mixin hc-checkbox-container() {
    overflow: hidden;
    display: flex;
    padding: 3px 4px;
}

@mixin hc-checkbox-content() {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

@mixin hc-checkbox-content-label() {
    cursor: pointer;
}

@mixin hc-checkbox-content-disabled() {
    color: $gray-10;
    cursor: not-allowed;
}

@mixin hc-checkbox-content-label-disabled() {
    cursor: not-allowed;
    color: $gray-90;
}

@mixin hc-checkbox-label() {
    padding: 3px 0 3px 16px;
    font-size: 16px;
}

@mixin hc-checkbox-overlay() {
    position: relative;
    width: 22px;
    height: 22px;
    min-width: 22px;
    background-color: $white;
    border: 2px solid $gray-50;
    border-radius: 3px;

    @include formFieldFocusTransition();

    &:after {
        content: '';
        position: absolute;
        top: 3.5px;
        left: 3px;
        width: 12px;
        height: 7px;
        opacity: 0;
        transform: rotate(-45deg);
        border: 3px solid $white;
        border-top: none;
        border-right: none;
    }
}

@mixin hc-checkbox-focused {
    @include formFieldFocusedState();
}

@mixin hc-checkbox-overlay-hover() {
    border: 2px solid $wcf-blue;
}

@mixin hc-checkbox-overlay-checked() {
    background-color: $wcf-blue;
    border: 2px solid $wcf-blue;
    &:after {
        opacity: 1;
    }
}

@mixin hc-checkbox-overlay-disabled() {
    background-color: $gray-02;
    border: 2px solid $gray-10 !important;
}

@mixin hc-checkbox-overlay-checked-and-disabled() {
    background-color: $gray-10 !important;
}

@mixin hc-checkbox-overlay-indeterminate() {
    border: 2px solid $wcf-blue;
    &:after {
        opacity: 1;
        border-color: $wcf-blue;
        transform: none;
        border-left: none;
    }
}

@mixin hc-checkbox-overlay-indeterminate-disabled() {
    &:after {
        border-color: $gray-10;
    }
}

@mixin hc-checkbox-input() {
    display: none;
}

@mixin hc-checkbox-invalid() {
    border-color: $error !important;
}