@alifd/next/es/checkbox/main.scss

@charset "UTF-8";

@import '../core/index-noreset';
@import 'scss/variable';
@import './rtl.scss';

/* stylelint-disable max-nesting-depth */

#{$checkbox-prefix}-wrapper {
    @include box-sizing;
    display: inline-block;

    #{$checkbox-prefix} {
        display: inline-block;
        position: relative;
        line-height: 1;
        vertical-align: middle;
    }

    input[type="checkbox"] {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: $checkbox-size;
        height: $checkbox-size;
        margin: 0;
        cursor: pointer;
    }

    #{$checkbox-prefix}-inner {
        display: block;
        width: $checkbox-size;
        height: $checkbox-size;
        background: $checkbox-bg-color;
        border-radius: $checkbox-border-radius;
        border: $checkbox-border-width solid $checkbox-border-color;
        transition: all $motion-duration-immediately $motion-linear;
        text-align: left; /* 防止继承父级 */
        box-shadow: $checkbox-shadow;

        > .#{$css-prefix}icon {
            transform: scale(0);
            position: absolute;
            top: 0;
            opacity: 0;
            line-height: $checkbox-size;
            transition: all $motion-duration-immediately $motion-linear;
            color: $checkbox-checked-circle-color;
            left: calc((#{$checkbox-size} - #{$checkbox-circle-size}) / 2);
            @if (get-compiling-value($checkbox-circle-size) == 12) {
                margin-top: 1px;
            }
            @include icon-size($checkbox-circle-size, 0px);
        }
        > .#{$css-prefix}icon::before {
            vertical-align: top;
            margin-top: 0;
        }
        > .#{$css-prefix}checkbox-select-icon::before {
            content: $checkbox-select-icon-content;
        }
        > .#{$css-prefix}checkbox-semi-select-icon::before {
            content: $checkbox-semi-select-icon-content;
        }
    }

    &.checked,
    &.checked.focused {
        > #{$checkbox-prefix} {
            > #{$checkbox-prefix}-inner {
                border-color: $checkbox-checked-border-color;
                background-color: $checkbox-checked-bg-color;

                &:hover,
                &.hovered {
                    border-color: $checkbox-checked-border-color;
                }
                > .#{$css-prefix}icon {
                    opacity: 1;
                    transform: scale(1);
                    @include icon-size($checkbox-circle-size, 0px); /* font-size < 12px的时候进行覆盖。 */
                }
            }
        }
    }

    &.indeterminate,
    &.indeterminate.focused {
        > #{$checkbox-prefix} {
            > #{$checkbox-prefix}-inner {
                border-color: $checkbox-checked-border-color;
                background-color: $checkbox-checked-bg-color;

                &:hover,
                &.hovered {
                    border-color: $checkbox-checked-border-color;
                }
                > .#{$css-prefix}icon {
                    opacity: 1;
                    transform: scale3d(1, 1, 1);
                    @include icon-size($checkbox-circle-size, 0px); /* font-size < 12px的时候进行覆盖。 */
                }
            }
        }
    }

    &:not(.disabled):hover,
    &.hovered,
    &.focused {
        > #{$checkbox-prefix} {
            > #{$checkbox-prefix}-inner {
                border-color: $checkbox-hovered-border-color;
                background-color: $checkbox-hovered-bg-color;
            }
        }
        #{$checkbox-prefix}-label {
            cursor: pointer;
        }
    }

    &.indeterminate:not(.disabled):hover,
    &.indeterminate:not(.disabled).hovered,
    &.checked:not(.disabled):hover,
    &.checked:not(.disabled).hovered {
        > #{$checkbox-prefix} {
            #{$checkbox-prefix}-inner {
                border-color: $checkbox-checked-hovered-border-color;
                background-color: $checkbox-checked-hovered-bg-color;

                > .#{$css-prefix}icon {
                    color: $checkbox-checked-hovered-circle-color;
                    opacity: 1;
                }
            }
        }
    }

    &.disabled {
        input[type="checkbox"] {
            cursor: not-allowed;
        }
        #{$checkbox-prefix}-inner {
            border-color: $checkbox-disabled-border-color;
            background: $checkbox-disabled-bg-color;
        }
        &.checked,
        &.indeterminate {
            #{$checkbox-prefix}-inner {
                border-color: $checkbox-disabled-border-color;
                background: $checkbox-disabled-bg-color;

                &:hover, &.hovered {
                    border-color: $checkbox-disabled-border-color;
                }

                > .#{$css-prefix}icon {
                    color: $checkbox-disabled-circle-color;
                    opacity: 1;
                }
            }
        }
        &.checked.focused {
            #{$checkbox-prefix}-inner {
                border-color: $checkbox-disabled-border-color;
                background: $checkbox-disabled-bg-color;

                > .#{$css-prefix}icon {
                    color: $checkbox-disabled-circle-color;
                    opacity: 1;
                }
            }
        }
        #{$checkbox-prefix}-label {
            color: $checkbox-disabled-label-color;
            cursor: not-allowed;
        }
    }
}

#{$checkbox-prefix}-group {
    #{$checkbox-prefix}-wrapper {
        display: inline-block;
        margin-right: 12px;
        &:last-child {
            margin-right: 0;
        }
    }

    &-ver {
        #{$checkbox-prefix}-wrapper {
            display: block;
            margin-left: 0;
            margin-right: 0;
            margin-bottom: 8px;
        }
    }
}

#{$checkbox-prefix}-label {
    font-size: $checkbox-font-size;
    color: $checkbox-label-color;
    vertical-align: middle;
    margin: 0;
    margin-left: $checkbox-margin-left;
    /* 使用已存margin-left变量 */
    margin-right: $checkbox-margin-left;
    line-height: 1;
}