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

@mixin switchSize($size) {
    $width: $--switch-width-default;
    $height: $--switch-height-default;
    $font-size: 12px;
    @if ($size == 'mini') {
        $width: $--switch-width-mini;
        $height: $--switch-height-mini;
    } @else if ($size == 'small') {
        $width: $--switch-width-small;
        $height: $--switch-height-small;
    } @else if ($size == 'large') {
        $width: $--switch-width-large;
        $height: $--switch-height-large;
    }
    width: $width;
    height: $height;
    line-height: $height;
    border-radius: $height;
    font-size: $font-size;

    &::before {
        width: #{$height / 2};
        height: #{$height / 2};
        left: #{($height - 4px) / 2 + 2px - ($height / 4)};
    }

    &::after {
        width: #{$height - 4px};
        height: #{$height - 4px};
        border-radius: #{$height - 4px};
    }

    &:not(.is-disabled):not(.is-loading):active:after {
        width: #{$height - 4px + ($height - 4px) / 2};
    }

    @include e(inner, false) {
        right: #{$height / 4 + 2px};
    }

    &.is-checked {
        &::before {
            right: #{($height - 4px) / 2 + 2px - ($height / 4)};
            left: auto;
            transform: translateX(50%);
        }

        &::after {
            width: #{$height - 4px};
            left: auto;
            right: 2px;
        }

        @include e(inner, false) {
            left: #{$height / 4};
            right: auto;
        }
    }
}

@include c(switch) {
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    outline: none;
    vertical-align: middle;
    background-color: $--switch-background-color-default;
    transition: all $--animation-time;
    @include utils-ellipsis();

    &::before {
        content: '';
        display: none;
        box-sizing: border-box;
        border-radius: 50%;
        background-color: transparent;
        position: absolute;
        right: auto;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 1;
        border: 1px solid $--border-color-primary;
        border-color: transparent transparent transparent $--border-color-primary;
        animation: rotateInfinite 2s linear infinite;
    }

    &::after {
        content: '';
        display: inline-block;
        position: absolute;
        left: 2px;
        top: 0;
        bottom: 0;
        right: auto;
        margin: auto;
        transition: all $--animation-time;
        background-color: $--color-white;
        box-shadow: $--box-shadow-default;
    }

    @include e(inner) {
        display: inline-block;
        color: $--color-white;
        height: 100%;
        vertical-align: middle;
        position: absolute;
        left: auto;
    }

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

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

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

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

    @include when(checked) {
        background-color: $--switch-background-color-checked;
    }

    @include when(disabled) {
        cursor: not-allowed;
        opacity: $--opacity-disabled;
    }

    @include when(loading) {
        opacity: $--opacity-disabled;
        &::before {
            display: inline-block;
        }
    }
}
