/* Icona, bottone, bottone tondo, preferito.
   Le varianti cambiano le variabili --btn-* / --round-*: stati (hover, disattivo) restano in un posto solo. */

@layer components {
  /* Icona dallo sprite: {% icon "heart" %} */
  .icon {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ---------- Bottone ---------- */
  .btn {
    --btn-bg: var(--ink);
    --btn-fg: var(--on-ink);
    --btn-bg-hover: var(--accent);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--control-h);
    padding: 0 24px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font: 500 var(--step-body)/1 var(--font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);

    &:hover { background: var(--btn-bg-hover); }
    &:active { transform: scale(.97); }
    & .icon { transition: translate .25s var(--ease); }
    &:hover .icon.arrow { translate: 4px 0; }

    /* Varianti */
    &.accent { --btn-bg: var(--accent); --btn-bg-hover: var(--ink); }   /* l'azione principale della scheda */
    /* ghost: l'unico con il contorno */
    &.ghost { --btn-bg: var(--ground); --btn-fg: var(--ink); --btn-bg-hover: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
    &.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
    &.light { --btn-bg: var(--ground); --btn-fg: var(--ink); --btn-bg-hover: var(--accent-soft); } /* su foto e su fondo scuro */
    &.sm { min-height: var(--control-h-sm); padding: 0 16px; font-size: var(--step-small); }
    &.block { width: 100%; }

    /* Disattivo: ultimo, vince sulle varianti */
    /* tiene i colori della sua variante, sbiadito: non si confonde con i menu a tendina sul fondo --tint */
    &:is(:disabled, [aria-disabled="true"]) {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;
      transform: none;
    }
    &:is(:disabled, [aria-disabled="true"]):hover { background: var(--btn-bg); }
    &.ghost:is(:disabled, [aria-disabled="true"]):hover { box-shadow: inset 0 0 0 1px var(--line); }
    &:is(:disabled, [aria-disabled="true"]):hover .icon.arrow { translate: none; }
  }

  /* ---------- Bottone tondo (solo icona: serve sempre aria-label) ---------- */
  .round {
    --round-bg: var(--ground);
    --round-fg: var(--ink);
    --round-ring: var(--line);
    --round-bg-hover: var(--ground);
    --round-fg-hover: var(--ink);
    --round-ring-hover: var(--ink);

    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--field-h);
    height: var(--field-h);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--round-bg);
    color: var(--round-fg);
    box-shadow: inset 0 0 0 1px var(--round-ring);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);

    &:hover { background: var(--round-bg-hover); color: var(--round-fg-hover); box-shadow: inset 0 0 0 1px var(--round-ring-hover); }

    &.dark { --round-bg: var(--ink); --round-fg: var(--on-ink); --round-ring: transparent; --round-bg-hover: var(--accent); --round-fg-hover: var(--on-ink); --round-ring-hover: transparent; }
    &.soft { --round-bg: var(--tint); --round-ring: transparent; --round-bg-hover: var(--ink); --round-fg-hover: var(--on-ink); --round-ring-hover: transparent; } /* condivisione */

    &:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; --round-bg-hover: var(--round-bg); --round-fg-hover: var(--round-fg); --round-ring-hover: var(--round-ring); }
  }

  /* ---------- Preferito: un bottone con aria-pressed ---------- */
  .fav {
    display: inline-grid;
    place-items: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ground) 90%, transparent);
    color: var(--ink);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);

    & .icon { transition: fill var(--dur-fast) var(--ease); }
    &:hover { transform: scale(1.08); }
    &[aria-pressed="true"] { color: var(--heart); }
    &[aria-pressed="true"] .icon { fill: currentColor; }

    /* Su fondo bianco (scheda) prende il bordo dei tondi */
    &.outline { width: var(--field-h); height: var(--field-h); background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
  }

  /* ---------- Interruttore acceso/spento ----------
     <button class="toggle" aria-pressed="true">Mappa <span class="knob" aria-hidden="true"></span></button>
     Il pallino dice lo stato: verde acceso, rosso spento. La guida resta neutra (colore del testo, trasparente),
     cosi' funziona sia su fondo chiaro sia su ink. */
  .toggle .knob {
    position: relative;
    flex: none;
    width: 38px;
    height: 24px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, currentColor 18%, transparent);
  }
  .toggle .knob::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--toggle-off);
  }
  .toggle[aria-pressed="true"] .knob::after { background: var(--toggle-on); transform: translateX(14px); }

  @media (prefers-reduced-motion: no-preference) {
    .toggle .knob::after { transition: transform .35s var(--ease-spring), background-color .25s var(--ease); }
    .fav[aria-pressed="true"] .icon { animation: pop .45s var(--ease-spring); }
  }
}

@keyframes pop {
  40% { transform: scale(1.25); }
}