@import '../../less/palette';
@import '../../less/palette-brand-@{theme}';

.switch {
    height: 48px;
    width: 88px;
    border-radius: 24px;
    position: relative;
    cursor: pointer;
    background: @color-border;
    transition: background 0.05s linear 0.05s;

    overflow: hidden;

    &:after {
        content: '';
        position: absolute;

        top: 4px;
        left: 4px;

        width: 40px;
        height: 40px;

        border-radius: 20px;

        background: #fff;

        transition: left 0.15s linear 0.05s, box-shadow 0.15s;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
        z-index: 1;
    }

    &.active {
        transition: background 0.05s linear 0.1s;
        background: @color-brand;

        &:after {
            transition: left 0.15s linear 0s;
            box-shadow: none;
            left: 44px;
        }
    }
}
