/* NexusOS — Segment 8: switches, checkboxes, radios, scales/sliders.
   Switches and checks fill with lime when on. Scales use the lime knob and
   a purple highlight on the filled portion of the track. */

/* ── Switch (GtkSwitch) ──────────────────────────────────── */

switch {
    background-color: @surface_bg_alt;
    background-image: none;
    border: 1px solid @border_strong;
    border-radius: 999px;
    min-width: 42px;
    min-height: 22px;
    padding: 0;
    color: transparent;        /* hide internal ON/OFF labels */
    font-size: 0;
    box-shadow: none;
    transition: background-color 160ms ease,
                border-color     160ms ease;
}

switch:hover {
    background-color: @overlay_bg;
    border-color: @border_strong;
}

switch:focus,
switch:focus-visible {
    outline: 2px solid @focus_ring;
    outline-offset: 2px;
}

switch:checked {
    background-color: @brand_green;
    border-color: @brand_green_dark;
    color: transparent;
}

switch:checked:hover {
    background-color: @brand_green_light;
    border-color: @brand_green;
}

switch:disabled {
    background-color: @surface_bg;
    border-color: @border;
    opacity: 0.6;
}

switch:checked:disabled {
    background-color: alpha(@brand_green, 0.35);
    border-color: transparent;
}

/* The sliding knob */
switch slider {
    background-color: @text_primary;
    background-image: none;
    border: 1px solid @border_strong;
    border-radius: 999px;
    min-width: 18px;
    min-height: 18px;
    margin: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: all 160ms ease;
}

switch:checked slider {
    background-color: #ffffff;
    border-color: @brand_green_dark;
}

switch:disabled slider {
    background-color: @text_disabled;
    box-shadow: none;
}

/* ── Checkbox ────────────────────────────────────────────── */

check,
checkbutton check {
    min-width: 16px;
    min-height: 16px;
    padding: 1px;
    background-color: @surface_bg;
    background-image: none;
    border: 1px solid @border_strong;
    border-radius: 4px;
    color: transparent;
    -gtk-icon-source: none;
    -gtk-icon-shadow: none;
    transition: background-color 120ms ease,
                border-color     120ms ease;
}

check:hover,
checkbutton check:hover {
    border-color: @brand_green_dark;
    background-color: @hover_bg;
}

check:focus,
checkbutton check:focus {
    outline: 2px solid @focus_ring;
    outline-offset: 1px;
}

check:checked,
checkbutton check:checked {
    background-color: @brand_green;
    border-color: @brand_green_dark;
    color: @text_on_accent;
    -gtk-icon-source: -gtk-icontheme("object-select-symbolic");
}

check:checked:hover,
checkbutton check:checked:hover {
    background-color: @brand_green_light;
    border-color: @brand_green;
}

check:indeterminate,
checkbutton check:indeterminate {
    background-color: @brand_green;
    border-color: @brand_green_dark;
    color: @text_on_accent;
    -gtk-icon-source: -gtk-icontheme("checkbox-mixed-symbolic");
}

check:disabled,
checkbutton check:disabled {
    background-color: @insensitive_bg_color;
    border-color: @border;
    color: @text_disabled;
}

check:checked:disabled,
checkbutton check:checked:disabled {
    background-color: alpha(@brand_green, 0.35);
    color: @text_disabled;
    border-color: transparent;
}

/* The label next to the check */
checkbutton:disabled,
checkbutton:disabled label {
    color: @text_disabled;
}

/* ── Radio button ────────────────────────────────────────── */

radio,
radiobutton radio {
    min-width: 16px;
    min-height: 16px;
    padding: 1px;
    background-color: @surface_bg;
    background-image: none;
    border: 1px solid @border_strong;
    border-radius: 999px;
    color: transparent;
    -gtk-icon-source: none;
    transition: background-color 120ms ease,
                border-color     120ms ease;
}

radio:hover,
radiobutton radio:hover {
    border-color: @brand_green_dark;
    background-color: @hover_bg;
}

radio:focus,
radiobutton radio:focus {
    outline: 2px solid @focus_ring;
    outline-offset: 1px;
}

radio:checked,
radiobutton radio:checked {
    background-color: @surface_bg;
    border-color: @brand_green;
    color: @brand_green;
    /* Inner filled dot via icon */
    -gtk-icon-source: -gtk-icontheme("radio-checked-symbolic");
}

radio:checked:hover,
radiobutton radio:checked:hover {
    border-color: @brand_green_light;
}

radio:disabled,
radiobutton radio:disabled {
    background-color: @insensitive_bg_color;
    border-color: @border;
}

radio:checked:disabled,
radiobutton radio:checked:disabled {
    color: @text_disabled;
    border-color: @border;
}

radiobutton:disabled,
radiobutton:disabled label {
    color: @text_disabled;
}

/* Gap between the indicator and its label. Without this the label sits
   flush against the box. first/last-child keeps it correct under RTL;
   :only-child excludes indicator-only (label-less) check/radio buttons. */
checkbutton check:first-child:not(:only-child),
radiobutton radio:first-child:not(:only-child) {
    margin-right: 6px;
}

checkbutton check:last-child:not(:only-child),
radiobutton radio:last-child:not(:only-child) {
    margin-left: 6px;
}

/* ── Scale / slider (GtkScale) ───────────────────────────── */

scale {
    min-height: 18px;
    min-width: 18px;
    padding: 8px 4px;
    color: @text_primary;
}

scale.horizontal {
    min-height: 18px;
}

scale.vertical {
    min-width: 18px;
}

/* The track */
scale trough {
    background-color: @surface_bg_alt;
    border: 1px solid @border;
    border-radius: 999px;
    min-height: 4px;
    min-width: 4px;
}

scale.horizontal trough {
    min-height: 4px;
}

scale.vertical trough {
    min-width: 4px;
}

/* The filled portion (left of the knob on a horizontal scale) */
scale highlight {
    background-color: @brand_purple;
    background-image: none;
    border-radius: 999px;
    min-height: 4px;
    min-width: 4px;
}

scale.horizontal highlight {
    min-height: 4px;
}

scale.vertical highlight {
    min-width: 4px;
}

/* A secondary fill (e.g. media-player buffered range) */
scale fill {
    background-color: alpha(@brand_purple, 0.35);
    border-radius: 999px;
    min-height: 4px;
    min-width: 4px;
}

scale:disabled trough,
scale:disabled highlight,
scale:disabled fill {
    background-color: @insensitive_bg_color;
}

scale:disabled highlight {
    background-color: alpha(@brand_purple, 0.30);
}

/* The knob */
scale slider {
    background-color: @brand_green;
    background-image: none;
    border: 1px solid @brand_green_dark;
    border-radius: 999px;
    min-width: 14px;
    min-height: 14px;
    margin: -6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
    transition: background-color 120ms ease,
                box-shadow       120ms ease,
                min-width        120ms ease,
                min-height       120ms ease;
}

scale slider:hover {
    background-color: @brand_green_light;
    border-color: @brand_green;
    box-shadow: 0 0 0 4px alpha(@brand_green, 0.18),
                0 1px 3px rgba(0, 0, 0, 0.40);
}

scale slider:active {
    background-color: @brand_green_dark;
    box-shadow: 0 0 0 6px alpha(@brand_green, 0.25),
                0 1px 3px rgba(0, 0, 0, 0.40);
}

scale slider:focus {
    outline: 2px solid @focus_ring;
    outline-offset: 2px;
}

scale slider:disabled {
    background-color: @text_disabled;
    border-color: @border;
    box-shadow: none;
}

/* Tick marks */
scale marks {
    color: @text_secondary;
}

scale marks indicator {
    background-color: @text_secondary;
    min-height: 4px;
    min-width: 1px;
}

scale.has-marks-above {
    margin-top: 4px;
}

scale.has-marks-below {
    margin-bottom: 4px;
}

/* Value label (shown when draw-value is set) */
scale value {
    color: @text_primary;
    padding: 0 6px;
    font-feature-settings: "tnum";
}

/* "Fine-tune" mode — the slider gets a slightly bigger halo */
scale.fine-tune slider {
    box-shadow: 0 0 0 6px alpha(@brand_green, 0.25),
                0 1px 3px rgba(0, 0, 0, 0.40);
}

/* OSD scale (used in media players over video) */
scale.osd trough {
    background-color: alpha(#000000, 0.45);
    border-color: transparent;
}

scale.osd highlight {
    background-color: @brand_green;
}

scale.osd slider {
    background-color: @brand_green;
    border-color: @brand_green_dark;
}
