@import './var.scss';

:root {
    --switch-size: #{$switch-size};
    --switch-width: #{$switch-width};
    --switch-height: #{$switch-height};
    --switch-handle-size: #{$switch-handle-size};
    --switch-handle-bg: #{$switch-handle-bg};
    --switch-border-color: #{$switch-border-color};
    --switch-radius-round: #{$switch-radius-round};
    --switch-bg: #{$switch-bg};
}

.jing-switch {
    &__input {
        position: relative;
        width: var(--switch-width);
        height: var(--switch-height);
        font-size: var(--switch-size);
        border: calc((var(--switch-height) - var(--switch-handle-size)) / 2)
            solid var(--switch-border-color);
        border-radius: var(--switch-radius-round);
        background-color: var(--switch-bg);
        vertical-align: middle;
        transition: background-color 0.1s, border 0.1s;
        outline: 0;
        cursor: pointer;
        -webkit-appearance: none;

        &:before,
        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: var(--switch-handle-size);
            border-radius: var(--switch-radius-round);
        }
        &:before {
            width: calc(
                var(--switch-width) - var(--switch-height) +
                    var(--switch-handle-size)
            );
            background-color: var(--switch-bg);
            transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1),
                -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
        }

        &:after {
            width: var(--switch-handle-size);
            background-color: var(--switch-handle-bg);
            box-shadow: 0 r(1) r(3) rgba(0, 0, 0, 0.4);
            transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35),
                -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
        }

        &:checked {
            border: calc((var(--switch-height) - var(--switch-handle-size)) / 2)
                solid var(--primary-color);
            background-color: var(--primary-color);

            &:before {
                transform: scale(0);
            }

            &:after {
                transform: translateX(
                    calc(var(--switch-width) - var(--switch-height))
                );
            }
        }
    }

    &--disabled {
        .jing-switch__input {
            cursor: not-allowed;
            opacity: var(--opacity-disabled);
        }
    }
}