/* =========================================================================
   Storefront Button System
   -------------------------------------------------------------------------
   Single source of truth for the .ubxBtn / .ubxBtn-light / .ubxBtn-dark
   classes. The actual colors, radius, and hover effect come from the
   saved `BUTTON_PROFILE` (DB only) which is rendered into
   `--ubx-btn-{tone}-*` CSS variables by `ButtonProfile::cssVariables()`.
   Typography (font-family / size / weight / line-height / letter-spacing)
   is global and lives on the storefront / iframe head via theme_setting()
   — buttons inherit it, they don't carry their own font.

   Each tone (light / dark) gets its own:
     * `--ubx-btn-{tone}-bg`         — background gradient / colour
     * `--ubx-btn-{tone}-text`       — text + border colour
     * `--ubx-btn-{tone}-radius`     — border radius (per-tone)

   Variants:
     * contained      — solid gradient background (the default `.ubxBtn-light`
                       / `.ubxBtn-dark` rules)
     * outlined       — transparent background, border uses colour1
     * text           — no background, no border, small padding
     * parallelogram  — skewed filled button

   Hover effects use a BEM-ish `ubxFx{Name}` token per effect so the
   dropdown id maps 1:1 to the class (see ButtonHoverAnimations).
   No shared numeric namespace — there is no way to render "Text Shadow's
   CSS rule when Scale Up was picked".
   ========================================================================= */

.ubxBtn {
    display: inline-block;
    padding: var(--ubx-btn-padding, 12px 24px);
    /* Typography (family / size / weight / line-height / letter-spacing)
       is intentionally NOT set here — buttons inherit it from their
       parent so the storefront's global `BUTTON_FONT_FAMILY` /
       `BUTTON_FONT_SIZE` / etc. settings (configured via the Font
       Configuration page) apply uniformly. The CSS variables below
       used to carry per-button font overrides — they have been
       removed so the button has no separate typography of its own. */
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    background: transparent;
}

/* Light tone — base rules. Contained / text / parallelogram all render
   WITHOUT a stroke — only the outlined variant adds one below. Toggling
   from contained to outlined (or vice versa) shifts the button by 4px;
   that trade-off keeps the base look clean. */
.ubxBtn-light,
.ubxBtn-light:hover {
    background: var(--ubx-btn-light-bg);
    color: var(--ubx-btn-light-text) !important;
    border-radius: var(--ubx-btn-light-radius, 5px);
    text-transform: var(--ubx-btn-light-uppercase, uppercase);
}

/* Dark tone — same as light but with its own per-tone variables. */
.ubxBtn-dark,
.ubxBtn-dark:hover {
    background: var(--ubx-btn-dark-bg);
    color: var(--ubx-btn-dark-text) !important;
    border-radius: var(--ubx-btn-dark-radius, 5px);
    text-transform: var(--ubx-btn-dark-uppercase, uppercase);
}

/* ============================ Variant: contained ============================ */
.ubxBtn--contained {
    /* The default `.ubxBtn-light` / `.ubxBtn-dark` rules above already
       give us a solid filled button. The variant class exists so JS /
       admin can read the active variant from the DOM. */
}

/* ============================ Variant: outlined ============================ */
/* Outlined is the ONLY variant that draws a stroke — 2px solid using the
   per-tone "color1" key (the Border Color picker in the admin). The
   base .ubxBtn-light / .ubxBtn-dark rules deliberately leave `border`
   unset so contained / text / parallelogram stay borderless. */
.ubxBtn--outlined {
    box-shadow: none !important;
}
.ubxBtn--outlined.ubxBtn-light,
.ubxBtn--outlined.ubxBtn-light:hover {
    background: transparent !important;
    border: 2px solid var(--ubx-btn-light-color1, var(--ubx-btn-light-text));
}
.ubxBtn--outlined.ubxBtn-dark,
.ubxBtn--outlined.ubxBtn-dark:hover {
    background: transparent !important;
    border: 2px solid var(--ubx-btn-dark-color1, var(--ubx-btn-dark-text));
}

/* ============================ Variant: text ============================ */
.ubxBtn--text {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 12px;
}
.ubxBtn--text.ubxBtn-light,
.ubxBtn--text.ubxBtn-light:hover {
    background: transparent !important;
    color: var(--ubx-btn-light-text) !important;
    border: none !important;
}
.ubxBtn--text.ubxBtn-dark,
.ubxBtn--text.ubxBtn-dark:hover {
    background: transparent !important;
    color: var(--ubx-btn-dark-text) !important;
    border: none !important;
}

/* ============================ Variant: parallelogram ============================ */
.ubxBtn--parallelogram {
    transform: skewX(-20deg);
}
.ubxBtn--parallelogram > span {
    display: inline-block;
    transform: skewX(20deg);
}

/* No per-effect parallelogram overrides here — each fx class
   carries its own parallelogram-aware rule in the Hover effects block
   below so the skew + the effect transform compose correctly. */

/* ============================ Sizes ============================ */
.ubxBtn--sm { padding: 8px 16px; font-size: 12px; }
.ubxBtn--md { padding: 12px 24px; font-size: 14px; }
.ubxBtn--lg { padding: 16px 32px; font-size: 16px; }

/* ============================ Hover effects ============================ */
/* Each effect gets its own class with a BEM-ish `ubxFx{Name}` token.
   No shared numeric namespace — the dropdown id maps 1:1 to the class
   via ButtonHoverAnimations::classFor(), so there is no way to render
   "Text Shadow's CSS rule when Scale Up was picked".
   No multi-stop gradient crossfades (CSS can't smoothly transition
   between two `background` gradients), no nested pseudo-element layering
   beyond a single ::before / ::after per effect. Each rule works on any
   background because it uses solid colours / opacity / transform. */

/* (1) No Effect — intentional no-op so the class is a known token. */
.ubxBtn.ubxFxNone {}

/* (2) Glow Effect — generic dark outer shadow. Works on every
       background; no `currentColor` dependency. */
.ubxBtn.ubxFxGlow:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* (3) Background Shift — the button translates down + shrinks a touch
       on hover, like it's been pressed in. Clearly distinct from
       Gradient Overlay (which is a static tint). The shadow also drops
       a little so the "press" reads visually. */
.ubxBtn.ubxFxShift:hover {
    transform: translateY(2px) scale(0.97);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.ubxBtn--parallelogram.ubxFxShift:hover {
    transform: skewX(-20deg) translateY(2px) scale(0.97);
}

/* (4) Scale Up */
.ubxBtn.ubxFxScale:hover {
    transform: scale(1.05);
}
.ubxBtn--parallelogram.ubxFxScale:hover {
    transform: skewX(-20deg) scale(1.05);
}

/* (5) Text Shadow — soft glow around the label in the button's own
       text colour (currentColor). */
.ubxBtn.ubxFxTextShadow:hover {
    text-shadow: 0 0 8px currentColor;
}

/* (6) Gradient Overlay — slightly darker tint than Background Shift
       so the two effects are visually distinct, via a ::after overlay. */
.ubxBtn.ubxFxOverlay {
    position: relative;
}
.ubxBtn.ubxFxOverlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: inherit;
}
.ubxBtn.ubxFxOverlay:hover::after {
    opacity: 1;
}
.ubxBtn--parallelogram.ubxFxOverlay::after {
    transform: skewX(20deg);
}

/* (7) Slide In Background — a solid white-tint panel sweeps in from the
       left edge of the button via a scaleX transform. */
.ubxBtn.ubxFxSlide {
    position: relative;
    overflow: hidden;
}
.ubxBtn.ubxFxSlide::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.3);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
    pointer-events: none;
}
.ubxBtn.ubxFxSlide:hover::before {
    transform: scaleX(1);
}
.ubxBtn--parallelogram.ubxFxSlide::before {
    transform: skewX(20deg) scaleX(0);
    transform-origin: left center;
}
.ubxBtn--parallelogram.ubxFxSlide:hover::before {
    transform: skewX(20deg) scaleX(1);
}

/* (8) Rotate */
.ubxBtn.ubxFxRotate:hover {
    transform: rotate(5deg);
}
.ubxBtn--parallelogram.ubxFxRotate:hover {
    transform: skewX(-20deg) rotate(5deg);
}

/* (9) Pulse — soft scale loop */
.ubxBtn.ubxFxPulse:hover {
    animation: ubxFxPulse 0.5s infinite alternate;
}
@keyframes ubxFxPulse {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
}
.ubxBtn--parallelogram.ubxFxPulse:hover {
    animation: ubxFxParallelogramPulse 0.5s infinite alternate;
}
@keyframes ubxFxParallelogramPulse {
    from { transform: skewX(-20deg) scale(1); }
    to   { transform: skewX(-20deg) scale(1.05); }
}

/* ============================ Mobile (kept from legacy) ============================ */
@media (max-width: 480px) {
    .ubxBtn {
        padding: 8px 16px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .ubxBtn {
        padding: 10px 20px;
        font-size: 12px;
    }
}