/* 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-switch-4-width: 55px;
    --nb-switch-4-height: 28px;
    --nb-switch-4-border-color: var(--nb-border-color);
    --nb-switch-4-bg: var(--nb-color-white);
    --nb-switch-4-circle-color: var(--nb-color-white);
    --nb-switch-4-circle-border-color: var(--nb-border-color);
    --nb-switch-4-border-radius: 40px;
    --nb-switch-4-bg-active: var(--nb-spec-color);
    --nb-switch-4-bg-disabled: var(--nb-color-white);

    --nb-custom-switch-bg: var(--nb-spec-color);
    --nb-custom-switch-height: 28px;
    --nb-custom-switch-label-color: var(--nb-color-white);
    --nb-custom-switch-label-font-size: 12px;
    --nb-custom-switch-active-label-bg: var(--nb-color-white);
    --nb-custom-switch-active-label-color: var(--nb-text-color-primary);
}

.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);
}

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

    .nb-label{
        margin-left: 0;
        color: var(--nb-text-color-primary);
        font-size: 14px;
    }
}
.nb-form-switch .nb-switch.nb-switch-4{
    width: var(--nb-switch-4-width);
    height: var(--nb-switch-4-height);
    border-radius: var(--nb-switch-4-border-radius);
    background-color: var(--nb-switch-4-bg);
    border-color: var(--nb-switch-4-border-color);
    margin-top: 0;
    background-image: unset !important;
}

.nb-form-switch .nb-switch.nb-switch-4:before{
    width: calc(var(--nb-switch-4-height) - 5px);
    height: calc(var(--nb-switch-4-height) - 5px);
    border: var(--nb-border-width) var(--nb-border-style) var(--nb-switch-4-circle-border-color);
    background: var(--nb-switch-4-circle-color);
}

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

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

.nb-form-switch.nb-custom-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: 0;
    min-width: 130px;
    height: var(--nb-custom-switch-height);
    background: var(--nb-custom-switch-bg);
    border-radius: 50px;
}

.nb-form-switch.nb-custom-switch .form-check-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 3;
}

.nb-form-switch.nb-custom-switch .nb-label {
    position: relative;
    z-index: 2;
    width: 50%;
    height: calc(var(--nb-custom-switch-height) - 8px);
    margin: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nb-custom-switch-label-color);
    font-size: var(--nb-custom-switch-label-font-size);
    line-height: 1;
    border-radius: 50px;
    cursor: pointer;
    transition: all .2s ease;
}

.nb-custom-switch .form-check-input:not(:checked) ~ .nb-label:first-of-type {
    background: var(--nb-custom-switch-active-label-bg);
    color: var(--nb-custom-switch-active-label-color);
}

.nb-form-switch.nb-custom-switch .form-check-input:checked ~ .nb-label:last-of-type {
    background: var(--nb-custom-switch-active-label-bg);
    color: var(--nb-custom-switch-active-label-color);
}