/*
 * Theming for the Switch Property Editor (SwitchPropertyEditor.cs).
 *
 * The app runs the DevExpress *Fluent* theme, whose switch TRACK color comes
 * from the "--dxbl-checkbox-primary-*-check-element-bg" variables (by default
 * these resolve to the theme accent, i.e. blue). The generic
 * "--dxbl-checkbox-switch-*" variables only apply to the Bootstrap-based themes.
 * Both sets are overridden below so the colors hold if the theme is switched.
 *
 * ------------------------------------------------------------------
 * CHANGE THE ACTIVE / INACTIVE SWITCH BACK COLORS HERE:
 * ------------------------------------------------------------------
 */
.entirety-switch-editor.dxbl-checkbox.dxbl-checkbox-switch {
    /* Active (checked / "on") track background */
    --entirety-switch-on-color: #21a366;
    --entirety-switch-on-hover-color: #1c8f59;

    /* Inactive (unchecked / "off") track background */
    --entirety-switch-off-color: #eaedf1;
    --entirety-switch-off-hover-color: #dbe0e6;

    /* Inactive (unchecked / "off") track border */
    --entirety-switch-off-border-color: #c8ced6;
    --entirety-switch-off-border-hover-color: #b7bec8;
}

/*
 * ------------------------------------------------------------------
 * Wiring — no need to edit below this line to recolor the switch.
 * The extra ".dxbl-checkbox" qualifier raises specificity above the
 * theme's own rule so these win regardless of stylesheet load order.
 * ------------------------------------------------------------------
 */
.entirety-switch-editor.dxbl-checkbox.dxbl-checkbox-switch {
    /* Fluent theme (track background) */
    --dxbl-checkbox-primary-checked-check-element-bg: var(--entirety-switch-on-color);
    --dxbl-checkbox-primary-checked-hover-check-element-bg: var(--entirety-switch-on-hover-color);
    --dxbl-checkbox-primary-unchecked-check-element-bg: var(--entirety-switch-off-color);

    /* Fluent theme (track border) — match the track so there is no accent ring */
    --dxbl-checkbox-primary-checked-check-element-border: var(--entirety-switch-on-color);
    --dxbl-checkbox-primary-checked-hover-check-element-border: var(--entirety-switch-on-hover-color);
    --dxbl-checkbox-primary-unchecked-check-element-border: var(--entirety-switch-off-border-color);
    --dxbl-checkbox-primary-unchecked-hover-check-element-border: var(--entirety-switch-off-border-hover-color);

    /* Bootstrap-based themes (blazing-berry, office-white, purple, …) */
    --dxbl-checkbox-switch-checked-bg: var(--entirety-switch-on-color);
    --dxbl-checkbox-switch-checked-hover-bg: var(--entirety-switch-on-hover-color);
    --dxbl-checkbox-switch-unchecked-bg: var(--entirety-switch-off-color);
    --dxbl-checkbox-switch-unchecked-hover-bg: var(--entirety-switch-off-hover-color);
}

/*
 * Bootstrap themes render the OFF track as black at 50% opacity while its
 * unchecked-bg variable is unset. Once we supply a real color, force full
 * opacity so it shows exactly. (Disabled / read-only keep their own dimming.)
 * Harmless under Fluent, which does not use this opacity trick.
 */
.entirety-switch-editor.dxbl-checkbox.dxbl-checkbox-switch.dxbl-checkbox-unchecked .dxbl-checkbox-check-element {
    opacity: 1;
}