/**
 * Richer buttons (LXP-2579): loaded after components.css by ux2HeadTags (engine/ux2.php) with UX2_SHELL_NEXT_ON.
 * Demo: tools/ux2-components-demo.php, "Buttons rich".
 * The main button gets depth: a soft gradient from the brand colour, a light edge on top, a darker edge below, a
 * close shadow and a faint brand glow. Pressed, it sinks: the gradient flips and the shadow goes inside. The other
 * buttons only get the edges and the close shadow, so the main one still stands out. Brand colours only (--sko-*).
 * Inside .ux2-btn-flat buttons keep today's flat look (the demo's "Today" column).
 */
:root {
--ux2k-btn-edge-hi: rgb(255 255 255 / .16);
    --ux2k-btn-edge-lo: rgb(9 10 12 / .16);
    --ux2k-btn-drop: 0 1px 2px rgb(15 23 42 / .14);
}

/* Main (LXP-2604): a whisper of gradient, a faint top edge and a small neutral shadow at rest; a soft brand glow tucked
   under the button only on hover; pressed: the darker brand, sunk in */
.ux2-btn-main:not(:where(.ux2-btn-flat *)):not(.is-done):not(:disabled):not([aria-disabled="true"]) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ux2k-brand) 92%, #fff) 0%, var(--ux2k-brand) 100%);
    box-shadow: inset 0 1px 0 var(--ux2k-btn-edge-hi), var(--ux2k-btn-drop);
}

.ux2-btn-main:not(:where(.ux2-btn-flat *)):not(.is-done):not(:disabled):not([aria-disabled="true"]):hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ux2k-brand) 88%, #fff) 0%, var(--ux2k-brand) 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 1px 2px rgb(15 23 42 / .12),
        0 6px 16px -6px color-mix(in srgb, var(--ux2k-brand) 45%, transparent);
}

.ux2-btn-main:not(:where(.ux2-btn-flat *)):not(.is-done):not(:disabled):not([aria-disabled="true"]):active {
    background: var(--ux2k-brand-dark, var(--ux2k-brand));
    box-shadow: inset 0 1px 3px rgb(9 10 12 / .28) !important;
}

/* SKOAI and danger: the edges and the close shadow on their own colours */
.ux2-btn-ai:not(:where(.ux2-btn-flat *)):not(:disabled),
.ux2-btn-danger:not(:where(.ux2-btn-flat *)):not(:disabled) {
box-shadow: inset 0 1px 0 var(--ux2k-btn-edge-hi), var(--ux2k-btn-drop);
}

.ux2-btn-ai:not(:where(.ux2-btn-flat *)):not(:disabled):active,
.ux2-btn-danger:not(:where(.ux2-btn-flat *)):not(:disabled):active {
    box-shadow: inset 0 2px 5px rgb(9 10 12 / .3) !important;
}

/* Ghost: a white key with a hairline shadow under it */
.ux2-btn-ghost:not(:where(.ux2-btn-flat *)):not(:disabled) {
    background-image: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
    box-shadow: inset 0 -1px 0 rgb(9 10 12 / .05), 0 1px 2px rgb(9 10 12 / .08);
}

.ux2-btn-ghost:not(:where(.ux2-btn-flat *)):not(:disabled):active {
    background-image: none;
    box-shadow: inset 0 1px 3px rgb(9 10 12 / .12) !important;
}

/* Calm (Display) and reduced motion: same look, no glow growing on hover */
html.ux2-calm .ux2-btn-main:not(:where(.ux2-btn-flat *)):hover {
    box-shadow: inset 0 1px 0 var(--ux2k-btn-edge-hi), var(--ux2k-btn-drop);
}

/* White buttons on hover: no brand edge (that's for the main action); the white key lifts a touch onto a soft slate
   shadow, and presses in on click (above). Keyboard focus keeps its brand ring (components.css :focus-visible). */
.ux2-btn-ghost:not(:where(.ux2-btn-flat *)):hover:not(:disabled),
a.ux2-btn-ghost:not(:where(.ux2-btn-flat *)):hover {
    color: var(--ux2k-ink);
    background-image: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    border-color: #e2e8f0;
    box-shadow: inset 0 -1px 0 rgb(15 23 42 / .05), 0 2px 4px rgb(15 23 42 / .06), 0 6px 14px -6px rgb(15 23 42 / .16);
}

/* The segmented filter's gliding pill (motion.js) as the same white key: a soft top-to-bottom white, a hairline,
   a low inner edge and a small drop; also the picked option when the pill isn't there */
.ux2-seg-thumb:not(:where(.ux2-btn-flat *)),
.ux2-seg:not(.has-thumb):not(:where(.ux2-btn-flat *)) button[aria-checked="true"],
.ux2-seg:not(.has-thumb):not(:where(.ux2-btn-flat *)) > label:has(input:checked) {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    box-shadow: inset 0 -1px 0 rgb(15 23 42 / .05), 0 0 0 1px rgb(15 23 42 / .05), 0 1px 2px rgb(15 23 42 / .1),
        0 3px 8px -3px rgb(15 23 42 / .14);
}