/* Switch */
:root{
    --nb-switch-width: 30px;
    --nb-switch-height: 16px;
    --nb-switch-border-color: var(--nb-border-color);
    --nb-switch-bg: var(--nb-color-white);
    --nb-switch-checked-border-color: var(--nb-spec-color);
    --nb-switch-checked-bg: var(--nb-spec-color);
    --nb-switch-border-radius: 10px;

    --nb-switch-2-width: var(--nb-switch-width);
    --nb-switch-2-height: var(--nb-switch-height);
    --nb-switch-2-border-color: var(--nb-border-color);
    --nb-switch-2-bg: var(--nb-color-white);
    --nb-switch-2-border-radius: var(--nb-switch-border-radius);
    --nb-switch-2-bg-active: var(--nb-color-success);
    --nb-switch-2-bg-disabled: var(--nb-color-danger);

    --nb-switch-3-width: 55px;
    --nb-switch-3-height: 28px;
    --nb-switch-3-border-color: var(--nb-spec-color);
    --nb-switch-3-bg: var(--nb-spec-color);
    --nb-switch-3-border-radius: 40px;
    --nb-switch-3-bg-active: var(--nb-color-white);
    --nb-switch-3-bg-disabled: var(--nb-color-white);
}

.nb-form-switch{
    padding-left: 0;
}

.nb-form-switch .nb-switch{
    width: var(--nb-switch-width);
    height: var(--nb-switch-height);
    margin-left: 0;
    position: relative;
    border-radius: var(--nb-switch-border-radius);
    cursor: pointer;
    box-shadow: none;
    background-color: var(--nb-switch-bg);
    border-color: var(--nb-switch-border-color);
    background-image: none !important;
}

.nb-form-switch .nb-switch:before{
    content: '';
    width: calc(var(--nb-switch-height) - 5px);
    height: calc(var(--nb-switch-height) - 5px);
    border-radius: 50%;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    background: var(--nb-switch-border-color);
}

.nb-form-switch .nb-switch:checked{
    background-color: var(--nb-switch-checked-bg);
    border-color: var(--nb-switch-checked-border-color);
}

.nb-form-switch .nb-switch:checked:before{
    right: 2px;
    left: unset;
    background: var(--nb-color-white);
}

/* NB switch 2 */
.nb-form-switch .nb-switch.nb-switch-2{
    width: var(--nb-switch-2-width);
    height: var(--nb-switch-2-height);
    border-radius: var(--nb-switch-2-border-radius);
    background-color: var(--nb-switch-2-bg);
    border-color: var(--nb-switch-2-border-color);
}

.nb-form-switch .nb-switch.nb-switch-2:before{
    width: calc(var(--nb-switch-2-height) - 5px);
    height: calc(var(--nb-switch-2-height) - 5px);
    background: var(--nb-switch-2-bg-disabled);
}

.nb-form-switch .nb-switch.nb-switch-2:checked{
    background-color: var(--nb-switch-2-bg);
    border-color: var(--nb-switch-2-border-color);
}

.nb-form-switch .nb-switch.nb-switch-2:checked:before{
    background:  var(--nb-switch-2-bg-active);
}

/* NB switch 3 */
.nb-form-switch:has(.nb-switch.nb-switch-3){
    display: flex;
    gap: 5px;

    .nb-label{
        margin-left: 0;
        color: var(--nb-text-color-primary);
        font-size: 12px;
    }
}
.nb-form-switch .nb-switch.nb-switch-3{
    width: var(--nb-switch-3-width);
    height: var(--nb-switch-3-height);
    border-radius: var(--nb-switch-3-border-radius);
    background-color: var(--nb-switch-3-bg);
    border-color: var(--nb-switch-3-border-color);
    margin-top: 0;
}

.nb-form-switch .nb-switch.nb-switch-3:before{
    width: calc(var(--nb-switch-3-height) - 5px);
    height: calc(var(--nb-switch-3-height) - 5px);
    background: var(--nb-switch-3-bg-disabled);
}

.nb-form-switch .nb-switch.nb-switch-3:checked{
    background-color: var(--nb-switch-3-bg);
    border-color: var(--nb-switch-3-border-color);
}

.nb-form-switch .nb-switch.nb-switch-3:checked:before{
    background:  var(--nb-switch-3-bg-active);
}