@use '../tokens' as t;

.iconButton {
  @include t.focus-ring;
  @include t.transition(background, color, border-color);
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: t.radius(md);
  color: t.role('fg-muted');
  cursor: pointer;

  @include t.disabled;
}

.round {
  border-radius: t.radius(full);
}

.glyph {
  display: inline-flex;
  // Icons inherit the text colour so a tone change needs no icon variant.
  color: currentcolor;
}

.size-sm {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  font-size: t.text(sm);
}

.size-md {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  font-size: t.text(md);
}

.size-lg {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  font-size: t.text(lg);
}

@include t.tone-classes;

.variant-primary {
  background: var(--tone);
  // `--tone-fg` rather than a hardcoded accent-fg: a danger IconButton needs danger's on-colour.
  color: var(--tone-fg);
}

.variant-secondary {
  border-color: t.role('line');
  background: t.role('surface-raised');

  &:hover:not(:disabled) {
    color: var(--tone);
  }
}

.variant-ghost,
.variant-link {
  background: transparent;

  &:hover:not(:disabled) {
    background: var(--tone-soft);
    color: var(--tone);
  }
}