/* ==========================================================================
   CUSTOM SWITCH (Premium Refined 2.0)
   ========================================================================== */
.custom-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
    /* Decreased ~15% from 42px */
    min-width: 36px;
    /* Decreased ~15% from 42px */
    overflow: hidden;
    border-radius: 100px;
    /* Border moved to layer for dynamic coloring */
    /* border: 1px solid rgba(0, 0, 0, 0.25); */
    transition: var(--transition-normal);
    cursor: pointer;
    vertical-align: middle;
    background-color: rgba(0, 0, 0, 0.05);
}

.custom-switch.custom-switch-sm {
    height: 27px;
}

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

.custom-switch-knobs {
    z-index: 2;
    position: relative;
    height: 100%;
    pointer-events: none;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

/* Ghost Sizer */
.custom-switch-knobs::before,
.custom-switch-knobs::after {
    content: attr(data-on);
    visibility: hidden;
    height: 0;
    padding: 0 14px;
    white-space: nowrap;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.custom-switch-knobs::after {
    content: attr(data-off);
}

.custom-switch-sm .custom-switch-knobs::before,
.custom-switch-sm .custom-switch-knobs::after {
    font-size: 8.5px;
    padding: 0 10px;
}

/* The Sliding Knob */
.custom-switch-knobs .knob-internal {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    min-width: 30px;
    height: calc(100% - 6px);
    color: #fff !important;
    font-size: 9.5px;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #6e6e7e;
    border-radius: 100px;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    z-index: 5;
    padding: 0 8px;
}

.custom-switch-sm .custom-switch-knobs .knob-internal {
    min-width: 22px;
    font-size: 8.5px;
    padding: 0 5px;
}

.custom-switch-layer {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transition: var(--transition-normal);
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.05);
    /* Border moved here to allow dynamic override */
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

/* Initial state (OFF) */
.custom-switch-knobs .knob-internal:after {
    content: attr(data-off);
}

/* Checked State - Precise Slide */
.custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    left: calc(100% - 3px);
    transform: translateX(-100%);
}

.custom-switch-input:checked+.custom-switch-knobs .knob-internal:after {
    content: attr(data-on);
}

/* ============================
   DYNAMIC COLOR MAPPING
   Based on data-onstyle and data-offstyle
   ============================ */

/* Primary */
.custom-switch[data-offstyle="primary"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="primary"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: var(--brand-primary);
}

.custom-switch[data-offstyle="primary"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="primary"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(var(--brand-primary-rgb), 0.15);
    border-color: var(--brand-primary);
}

/* Secondary */
.custom-switch[data-offstyle="secondary"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="secondary"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: var(--brand-secondary);
}

.custom-switch[data-offstyle="secondary"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="secondary"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(var(--brand-secondary-rgb), 0.15);
    border-color: var(--brand-secondary);
}

/* Success */
.custom-switch[data-offstyle="success"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="success"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: var(--brand-success);
}

.custom-switch[data-offstyle="success"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="success"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(var(--brand-success-rgb), 0.15);
    border-color: var(--brand-success);
}

/* Danger */
.custom-switch[data-offstyle="danger"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="danger"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: var(--brand-danger);
}

.custom-switch[data-offstyle="danger"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="danger"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(var(--brand-danger-rgb), 0.15);
    border-color: var(--brand-danger);
}

/* Warning */
.custom-switch[data-offstyle="warning"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="warning"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: var(--brand-warning);
}

.custom-switch[data-offstyle="warning"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="warning"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(var(--brand-warning-rgb), 0.15);
    border-color: var(--brand-warning);
}

/* Info */
.custom-switch[data-offstyle="info"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="info"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: var(--brand-info);
}

.custom-switch[data-offstyle="info"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="info"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(var(--brand-info-rgb), 0.15);
    border-color: var(--brand-info);
}

/* Dark */
.custom-switch[data-offstyle="dark"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="dark"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: var(--brand-dark);
}

.custom-switch[data-offstyle="dark"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="dark"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(var(--brand-dark-rgb), 0.15);
    border-color: var(--brand-dark);
}

/* Light */
.custom-switch[data-offstyle="light"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="light"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: rgba(255, 255, 255, 0.9);
    color: #000 !important;
}

.custom-switch[data-offstyle="light"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="light"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(255, 255, 255, 0.45);
    border-color: rgba(0, 0, 0, 0.1);
}