/* Bottone rotondo con sola icona (IconButton.jsx): etichetta in aria-label. */
@layer components {
  .icon-btn {
    --icon-btn-size: 48px;
    --icon-btn-bg: var(--surface-page);
    --icon-btn-hover: var(--surface-soft);
    --icon-btn-fg: var(--text-brand);
    --icon-btn-border: var(--border-default);

    flex: none;
    display: grid;
    place-items: center;
    width: var(--icon-btn-size);
    height: var(--icon-btn-size);
    padding: 0;
    border: 1px solid var(--icon-btn-border);
    border-radius: var(--radius-pill);
    background: var(--icon-btn-bg);
    color: var(--icon-btn-fg);
    cursor: pointer;
    transition: background-color var(--dur-fast);

    &:hover { background: var(--icon-btn-hover); color: var(--icon-btn-fg); }
    & .icon { transition: transform var(--dur-fast); }
  }

  .icon-btn--accent { --icon-btn-bg: var(--action-accent); --icon-btn-hover: var(--action-accent-hover); --icon-btn-border: transparent; }
  .icon-btn--soft { --icon-btn-bg: var(--surface-soft); --icon-btn-hover: var(--border-default); --icon-btn-border: transparent; }
  .icon-btn--primary { --icon-btn-bg: var(--action-primary); --icon-btn-hover: var(--action-primary-hover); --icon-btn-fg: var(--text-inverse); --icon-btn-border: transparent; }
  .icon-btn--on-image { --icon-btn-hover: var(--surface-page); --icon-btn-border: transparent; box-shadow: var(--shadow-on-image); }
  .icon-btn--lg { --icon-btn-size: 56px; }
}