@import "./base/var";
@import "./mixins/index.scss";


@mixin checkboxSize($size) {
    $font-size: $--font-size-default;
    $width: $--checkbox-input-width-default;
    $height: $--checkbox-input-height-default;
    $after-width: 4px;
    $after-height: 8px;
    $border-width: 1px;

    @if ($size == 'mini') {
        $font-size: $--font-size-mini;
        $width: $--checkbox-input-width-mini;
        $height: $--checkbox-input-height-mini;
        $after-width: 3px;
        $after-height: 6px;
    } @else if ($size == 'small') {
        $font-size: $--font-size-small;
        $width: $--checkbox-input-width-small;
        $height: $--checkbox-input-height-small;
        $after-width: 3.5px;
        $after-height: 7px;
    } @else if ($size == 'large') {
        $font-size: $--font-size-large;
        $width: $--checkbox-input-width-large;
        $height: $--checkbox-input-height-large;
        $after-width: 5px;
        $after-height: 10px;
    }

    @include e(label, false) {
        font-size: $font-size;
    }
    @include e(inner, false) {
        width: $width;
        height: $height;
    }
    &.is-checked {
        @include e(inner, false) {
            &::after {
                border-width: $border-width;
                width: $after-width;
                height: $after-height;
            }
        }
    }
    &.is-indeterminate {
        @include e(inner, false) {
            &::after {
                border-width: $border-width;
                width: #{$width / 2};
                height: $border-width;
            }
        }
    }
}

@include c(checkbox) {
    color: $--color-text-default;
    display: inline-block;
    position: relative;
    transition: all $--animation-time ease-in-out;
    margin-right: 20px;

    @include e(input) {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
        font-size: 0;
    }

    @include e(label) {
        //display: inline-block;
        margin-left: 5px;
        cursor: pointer;
        vertical-align: middle;
    }

    @include e(inner) {
        border-radius: $--border-radius-default;
        border: $--checkbox-border;
        background-color: $--color-white;
        display: inline-block;
        position: relative;
        cursor: pointer;
        transition: all $--animation-time ease-in-out;

        &:hover {
            border-color: $--radio-border-color-hover;
        }

        &::after {
            content: '';
            width: 0;
            height: 0;
            display: block;
            transform-origin: top;
            transform: rotate(45deg) scale(1) translate(-50%, -50%);
            border: 0 solid $--color-white;
            position: absolute;
            top: 50%;
            left: 50%;
        }
    }

    @include when(checked) {
        color: $--checkbox-font-color-checked;
        @include e(inner, false) {
            background-color: $--checkbox-background-color-checked;
            border-color: $--checkbox-border-color-checked;
            &::after {
                border-top: 0;
                border-left: 0;
            }
        }
    }

    @include when(indeterminate) {
        @include e(inner, false) {
            background-color: $--checkbox-background-color-checked;
            border-color: $--checkbox-border-color-checked;
            &::after {
                content: '';
                position: absolute;
                display: block;
                background-color: $--color-white;
                border: none;
                transform: translate(-50%, -50%);
                left: 50%;
                top: 50%;
            }
        }
    }

    @include when(disabled) {
        cursor: not-allowed;
        color: $--color-text-disabled;
        @include e(label, false) {
            cursor: not-allowed;
        }
        @include e(inner, false) {
            cursor: not-allowed;
            background-color: $--background-color-disabled;
            border-color: $--border-color-disabled;
            &::after {
                cursor: not-allowed;
                background: $--background-color-disabled;
            }
        }
    }

    &.is-disabled.is-checked {
        color: $--color-text-disabled;

        @include e(inner, false) {
            cursor: not-allowed;
            background-color: $--background-color-disabled;
            border-color: $--border-color-disabled;
            &::after {
                border-color: $--color-text-icon;
                cursor: not-allowed;
            }
        }
    }

    &.is-disabled.is-indeterminate {
        color: $--color-text-disabled;

        @include e(inner, false) {
            background-color: $--background-color-disabled;
            border-color: $--border-color-disabled;
            cursor: not-allowed;
            &::after {
                background-color: $--color-text-icon;
                cursor: not-allowed;
            }
        }
    }

    @include m(mini) {
        @include checkboxSize(mini)
    }

    @include m(small) {
        @include checkboxSize(small)
    }

    @include m(default) {
        @include checkboxSize(default)
    }

    @include m(large) {
        @include checkboxSize(large)
    }
}
