/* bootstrap-evf-switch.css */

/* loud base colors */
:root,
[data-bs-theme="light"] {
    --evf-ui-switch-track-off: var(--evf-creammap); /* switch track OFF */
    --evf-ui-switch-track-on: var(--evf-bluecoat-base); /* switch track ON */
    --evf-ui-switch-knob-off: rgba(var(--evf-bluecoat-base-rgb),0.5); /* switch knob OFF */
    --evf-ui-switch-knob-on: var(--evf-creammap); /* switch knob ON */
}

[data-bs-theme="dark"] {
    --evf-ui-switch-track-off: var(--evf-tarink); /* switch track OFF */
    --evf-ui-switch-track-on: var(--evf-icesail-base); /* switch track ON */
    --evf-ui-switch-knob-off: rgba(var(--evf-icesail-base-rgb),0.5); /* switch knob OFF */
    --evf-ui-switch-knob-on: var(--evf-tarink); /* switch knob ON */
}

/* checkbox / radio base */
.form-check-input {
    border-color: var(--evf-ui-switch-knob-off) !important;
    box-shadow: none !important;
}
/* switch track + knob (Bootstrap draws knob via background-image) */
.form-switch .form-check-input {
    background-color: var(--evf-ui-switch-track-off) !important;
    background-image: radial-gradient(circle, var(--evf-ui-switch-knob-off) 48%, transparent 49%) !important;
    background-repeat: no-repeat !important;
    background-size: 1em 1em !important;
    background-position: left center !important;
}

    .form-switch .form-check-input:checked {
        background-color: var(--evf-ui-switch-track-on) !important;
        border-color: var(--evf-ui-switch-track-on) !important;
        background-image: radial-gradient(circle, var(--evf-ui-switch-knob-on) 48%, transparent 49%) !important;
        background-position: right center !important;
    }