@{! variants = default, night }
/*
 * Alloy swayosd style
 *
 * OSD overlay for volume, brightness, caps-lock, num-lock. Rendered against
 * @{meta.name}; docs/TOKENS.md is source of truth.
 *
 * swayosd renders in GTK; standard CSS applies. Palette is inlined here
 * because CSS variables inside GTK 4 stylesheets have quirks with
 * osd/window inheritance — verbose but reliable.
 */

window#osd {
    background-color: @{surface.raised};   /* surface-raised */
    color:            @{content.primary};   /* text-primary */
    border:           1px solid @{line.border};  /* border */
    border-radius:    4px;
    padding:          10px 14px;
    /* The drop shadow is an alpha of the theme's darkest tone rather than of
     * its ink: under a dark theme the ink is the pale one, and a shadow made
     * from it would halo the overlay instead of seating it. `ansi.0` is the
     * token that carries "darkest tone" across both polarities. */
    box-shadow:       0 2px 6px alpha(@{ansi.0}, 0.08);
}

image, label {
    color: @{content.primary};              /* text-primary */
}

label.title {
    color: @{content.secondary};              /* text-secondary */
    font-weight: bold;
}

progressbar {
    min-height: 4px;
    background: transparent;
    border: none;
}

progressbar > trough {
    background: @{border.subtle};         /* border-subtle */
    border: none;
    border-radius: 2px;
    min-height: 4px;
}

progressbar > trough > progress {
    background: @{status.warning};         /* accent-warn */
    border: none;
    border-radius: 2px;
    min-height: 4px;
}

/* Caps-lock / num-lock indicator variant */
window#osd.mode {
    background-color: @{surface.raised};
    color:            @{content.primary};
}