/*
 * Button system — Tailwind-first.
 *
 * The wrapper .btn is a transparent flex container: background, radius
 * and padding live on its two inner parts, the label pill (first <span>)
 * and the arrow circle (.btn-arrow). Both share the same --btn-bg so the
 * two shapes read as a single unit when touching, while staying separate
 * elements so the arrow can slide and rotate over the label on hover.
 *
 * Hover interaction:
 *  - the label pill stays put, text unchanged,
 *  - the arrow circle rotates -45° (counterclockwise) and slides left
 *    by 25% of its width (−11px on 44px), overlapping the label pill
 *    underneath — the label pill stays on top visually because the
 *    arrow gets a negative z-index in hover via stacking order.
 *
 * Expected markup:
 *   <a class="btn btn-blue group" href="#">
 *     <span class="btn-label">Label</span>
 *     <span class="btn-arrow"></span>
 *   </a>
 *
 * Note: .btn-label and .btn-arrow are reusable CSS components (not BEM
 * children of .btn) — they can theoretically be used standalone if ever
 * needed, though in practice they're always paired inside a .btn.
 *
 * Variants (.btn-blue / .btn-pink / .btn-lime / ...) only swap the
 * --btn-bg / --btn-fg custom properties; all the layout and the hover
 * animation live on .btn, .btn-label and .btn-arrow.
 */

.btn {
    --btn-bg: var(--color-blue-50);
    --btn-fg: var(--color-quartz-20);
    --btn-circle-size: 44px;
    --btn-radius: 44px;
    --btn-pad-x: 1.25rem;

    align-items: center;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    gap: 0;
    padding: 0;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}

.btn:focus-visible {
    outline: 2px solid var(--color-blue-50);
    outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────
 * Label pill — the main shape with bg and text.
 * ───────────────────────────────────────────────────────── */

.btn-label {
    align-items: center;
    background-color: var(--btn-bg);
    border-radius: var(--btn-radius);
    color: var(--btn-fg);
    display: inline-flex;
    font-family: var(--font-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    height: var(--btn-circle-size);
    justify-content: center;
    letter-spacing: 0;
    line-height: 26px;
    padding: 0 var(--btn-pad-x);
    position: relative;
    text-transform: uppercase;
    z-index: 2;
}

/* ─────────────────────────────────────────────────────────
 * Arrow circle — sits to the right of the label pill.
 * On hover rotates counterclockwise and slides left by 25% of its size
 * so it tucks under the label pill (z-index:1 vs label's 2).
 * ───────────────────────────────────────────────────────── */

.btn-arrow {
    --btn-arrow-size: 15px;

    align-items: center;
    background-color: var(--btn-bg);
    border-radius: var(--btn-radius);
    color: var(--btn-fg);
    display: inline-flex;
    flex-shrink: 0;
    height: var(--btn-circle-size);
    justify-content: center;
    position: relative;
    transform: translateX(0) rotate(0);
    transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
    width: var(--btn-circle-size);
    z-index: 1;
}

.btn-arrow::before {
    background-color: currentColor;
    content: "";
    height: var(--btn-arrow-size);
    mask-image: url("../icons/arrow.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("../icons/arrow.svg");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    transform: translateX(1px);
    width: var(--btn-arrow-size);
}

.btn:hover .btn-arrow {
    transform: translateX(-25%) rotate(-45deg);
}

/* ─────────────────────────────────────────────────────────
 * Variants — one .btn-{family} per palette family defined in
 * theme_palette_choices(). All use the /50 step of the family as
 * background; foreground is Blue/50 except on Blue (Quartz/20) and
 * Navy (Quartz/20) where contrast requires a light text.
 *
 * Following Tailwind's convention, variants are named by color family
 * (blue, pink, taupe, …) rather than by semantic role (primary,
 * secondary). Semantic roles, if ever needed, belong in the design-token
 * layer (--color-primary -> --color-blue-50) — never as button classes.
 * ───────────────────────────────────────────────────────── */

.btn-blue {
    --btn-bg: var(--color-blue-50);
    --btn-fg: var(--color-quartz-20);
}

.btn-pink {
    --btn-bg: var(--color-pink-50);
    --btn-fg: var(--color-blue-50);
}

.btn-taupe {
    --btn-bg: var(--color-taupe-50);
    --btn-fg: var(--color-blue-50);
}

.btn-lime {
    --btn-bg: var(--color-lime-50);
    --btn-fg: var(--color-blue-50);
}

.btn-ice {
    --btn-bg: var(--color-ice-50);
    --btn-fg: var(--color-blue-50);
}

.btn-quartz {
    --btn-bg: var(--color-quartz-50);
    --btn-fg: var(--color-blue-50);
}

.btn-navy {
    --btn-bg: var(--color-navy-80);
    --btn-fg: var(--color-quartz-20);
}

/* ─────────────────────────────────────────────────────────
 * Reduced motion — disable the arrow slide+rotate.
 * ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .btn-arrow {
        transition-duration: 1ms;
    }

    .btn:hover .btn-arrow {
        transform: none;
    }
}