
.switch-checkbox {
    height: 0;
    width: 0;
    visibility: hidden;
}

.switch-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 38.35px;
    height: 19.17px;
    background: $border;
    border-radius: 38.35px;
    position: relative;
    transition: background-color .2s;
    border: 1px solid $border;

}

.switch-label .switch-button {
    content: '';
    position: absolute;
    top: 1.5px;
    left: 1.5px;
    width: 14px;
    height: 14px;
    border-radius: 14px;
    transition: 0.2s;
    background: $white;

}

.switch-checkbox:checked+.switch-label .switch-button {
    left: calc(100% - 1.5px);
    transform: translateX(-100%);
}

.switch-label:active .switch-button {
    width: 23px;
}
.switch-label.off {
    &:hover {
        background: $white;
        border: 1px solid $border;

        .switch-button {
            background: $border;
        }
    }
    &.disabled {
        background: $border;

        .switch-button {
            background: $tab-background;
        }

        &:hover {
            background: $border;

            .switch-button {
                background: $tab-background;
            }
        }
    }
}


.switch-label.on {
    background: $primary-brand;
    border: 1px solid $primary-brand;

    .switch-button {
        background: $white;
    }

    &:hover {
        background: $white;

        .switch-button {
            background: $primary-brand;
        }
    }

    &.disabled {
        background: $border;
        border: 1px solid $border;

        .switch-button {
            background: $tab-background;
        }

        &:hover {
            background: $border;

            .switch-button {
                background: $tab-background;
            }
        }
    }

}