/* ═══════════════════════════════════════════════════════════
   LievoEngine — Componente: forms/button
   Versione: 14-05-2026 (S2 — estensione input layer)

   8 variant (primary/secondary/ghost/danger/success/warning/info/link),
   5 dimensioni (xs/sm/md/lg/xl), full-width, loading state con spinner
   CSS-only, icon-pos left/right, icon-only mode, render come <a> o <button>.

   Tutto namespacato .lv-btn / .lv-btn--* per evitare collisioni.
   ═══════════════════════════════════════════════════════════ */

/* ─── Base ────────────────────────────────────────────── */
.lv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lv-s-2);
    padding: var(--lv-s-2) var(--lv-s-4);
    font-family: var(--lv-ff-sans);
    font-size: var(--lv-fs-base);
    font-weight: var(--lv-fw-medium);
    line-height: var(--lv-lh-tight);
    border: var(--lv-b-width) solid transparent;
    border-radius: var(--lv-b-radius-0);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition:
        background-color var(--lv-d-fast) var(--lv-ease),
        border-color var(--lv-d-fast) var(--lv-ease),
        color var(--lv-d-fast) var(--lv-ease);
}

.lv-btn:focus-visible {
    outline: none;
    box-shadow: var(--lv-focus-ring);
}

.lv-btn[disabled],
.lv-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.lv-btn__icon {
    flex-shrink: 0;
}

/* ─── icon-pos: right (placeholder, ordine markup gestisce) ─ */
.lv-btn--icon-right {
    /* placeholder */
}

/* ─── Variante: primary ──────────────────────────────── */
.lv-btn--primary {
    background-color: var(--lv-c-accent);
    color: var(--lv-c-bg);
    border-color: var(--lv-c-accent);
}
.lv-btn--primary:hover,
.lv-btn--primary:focus-visible {
    background-color: var(--lv-c-accent-strong);
    border-color: var(--lv-c-accent-strong);
}

/* ─── Variante: secondary ────────────────────────────── */
.lv-btn--secondary {
    background-color: var(--lv-c-surface);
    color: var(--lv-c-fg);
    border-color: var(--lv-c-border);
}
.lv-btn--secondary:hover,
.lv-btn--secondary:focus-visible {
    background-color: var(--lv-c-surface-alt);
    border-color: var(--lv-c-border-strong);
}

/* ─── Variante: ghost ────────────────────────────────── */
.lv-btn--ghost {
    background-color: transparent;
    color: var(--lv-c-fg);
    border-color: transparent;
}
.lv-btn--ghost:hover,
.lv-btn--ghost:focus-visible {
    background-color: var(--lv-c-surface-alt);
}

/* ─── Variante: danger ───────────────────────────────── */
.lv-btn--danger {
    background-color: var(--lv-c-danger);
    color: var(--lv-c-bg);
    border-color: var(--lv-c-danger);
}
.lv-btn--danger:hover,
.lv-btn--danger:focus-visible {
    filter: brightness(0.9);
}

/* ─── Variante: success ──────────────────────────────── */
.lv-btn--success {
    background-color: var(--lv-c-success);
    color: var(--lv-c-bg);
    border-color: var(--lv-c-success);
}
.lv-btn--success:hover,
.lv-btn--success:focus-visible {
    filter: brightness(0.9);
}

/* ─── Variante: warning ──────────────────────────────── */
.lv-btn--warning {
    background-color: var(--lv-c-warning);
    color: var(--lv-c-bg);
    border-color: var(--lv-c-warning);
}
.lv-btn--warning:hover,
.lv-btn--warning:focus-visible {
    filter: brightness(0.9);
}

/* ─── Variante: info ─────────────────────────────────── */
.lv-btn--info {
    background-color: var(--lv-c-info);
    color: var(--lv-c-bg);
    border-color: var(--lv-c-info);
}
.lv-btn--info:hover,
.lv-btn--info:focus-visible {
    filter: brightness(0.9);
}

/* ─── Variante: link (azione testuale, no chrome) ───── */
.lv-btn--link {
    background-color: transparent;
    color: var(--lv-c-accent);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lv-btn--link:hover,
.lv-btn--link:focus-visible {
    color: var(--lv-c-accent-strong);
    background-color: transparent;
    text-decoration: underline;
}
.lv-btn--link[disabled],
.lv-btn--link[aria-disabled="true"] {
    text-decoration: none;
}

/* ─── Dimensioni (5: xs/sm/md/lg/xl) ───────────────── */
.lv-btn--xs {
    padding: 2px var(--lv-s-2);
    font-size: var(--lv-fs-xs);
    gap: var(--lv-s-1);
}
.lv-btn--sm {
    padding: var(--lv-s-1) var(--lv-s-3);
    font-size: var(--lv-fs-sm);
    gap: var(--lv-s-1);
}
.lv-btn--md { /* default già in .lv-btn */ }
.lv-btn--lg {
    padding: var(--lv-s-3) var(--lv-s-6);
    font-size: var(--lv-fs-md);
    gap: var(--lv-s-3);
}
.lv-btn--xl {
    padding: var(--lv-s-4) var(--lv-s-8);
    font-size: var(--lv-fs-lg);
    gap: var(--lv-s-3);
}

/* ─── Full width ────────────────────────────────────── */
.lv-btn--full {
    display: flex;
    width: 100%;
}

/* ─── Icon-only (bottone quadrato) ──────────────────── */
.lv-btn--icon-only {
    padding: var(--lv-s-2);
    aspect-ratio: 1 / 1;
}
.lv-btn--icon-only.lv-btn--xs { padding: 2px; }
.lv-btn--icon-only.lv-btn--sm { padding: var(--lv-s-1); }
.lv-btn--icon-only.lv-btn--lg { padding: var(--lv-s-3); }
.lv-btn--icon-only.lv-btn--xl { padding: var(--lv-s-4); }

/* ─── Loading state (spinner CSS-only) ──────────────── */
.lv-btn--loading {
    cursor: wait;
}
.lv-btn--loading .lv-btn__label {
    opacity: 0.7;
}
.lv-btn__spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: lv-btn-spin 700ms linear infinite;
}
@keyframes lv-btn-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .lv-btn__spinner { animation: none; }
}