/* Bottoni e badge tondi con sola icona: frecce dei caroselli (.icon-button) e freccia decorativa delle card (.round-icon). */
@layer components {
  .icon-button-group { display: flex; gap: 8px; }

  .icon-button {
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--color-bg); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink);
    transition: background-color .25s, color .25s, box-shadow .25s;
    &:hover { background: var(--color-accent); color: var(--color-on-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
    &:disabled { opacity: .35; cursor: default; }
  }
  .icon-button--filled {
    background: var(--color-primary); color: var(--color-on-primary); box-shadow: none;
    &:hover { background: var(--color-primary-dark); color: var(--color-on-primary); box-shadow: none; }
  }

  .round-icon {
    width: 40px; height: 40px; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary); color: var(--color-on-primary);
  }
  .round-icon--sm { width: 36px; height: 36px; }
}