@use '../tokens' as t;

.button {
  @include t.focus-ring;
  @include t.transition(background, border-color, color, box-shadow, transform);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: t.space(2);
  border: 1px solid transparent;
  border-radius: t.radius(md);
  font-weight: t.weight(semibold);
  line-height: t.leading(tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  &:active:not(:disabled, [aria-disabled='true']) {
    transform: translateY(1px);
  }

  @include t.disabled;

  // A BUSY control is one the reader is waiting on, so it has to stay readable: `t.disabled` dims
  // to 0.55, and WCAG exempts a disabled control from the contrast minimum precisely because
  // nobody is meant to read it. `loading` now carries `aria-disabled` too — this is what keeps the
  // two states from sharing one appearance. Written after the mixin: same specificity, later wins.
  &[aria-busy='true'] {
    opacity: 1;
    cursor: progress;
  }
}

.full {
  inline-size: 100%;
}

.label {
  @include t.truncate;
}

.spinner {
  display: inline-flex;
}

// --- sizes -------------------------------------------------------------------

.size-sm {
  @include t.padding-inline(t.space(3));
  padding-block: t.space(1);
  font-size: t.text(sm);
}

.size-md {
  @include t.padding-inline(t.space(4));
  padding-block: t.space(2);
  font-size: t.text(md);
}

.size-lg {
  @include t.padding-inline(t.space(6));
  padding-block: t.space(3);
  font-size: t.text(lg);
}

// --- variants x tones --------------------------------------------------------
// `--tone-*` is set by the tone class, so each variant is written once.

@include t.tone-classes;

.variant-primary {
  background: var(--tone);
  color: var(--tone-fg);

  &:hover:not(:disabled, [aria-disabled='true']) {
    background: var(--tone-strong);
  }
}

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

  &:hover:not(:disabled, [aria-disabled='true']) {
    border-color: var(--tone);
    background: var(--tone-soft);
    color: var(--tone);
  }
}

.variant-ghost {
  background: transparent;
  color: var(--tone);

  &:hover:not(:disabled, [aria-disabled='true']) {
    background: var(--tone-soft);
  }
}

.variant-link {
  @include t.padding-inline(0);
  background: transparent;
  color: var(--tone);
  text-decoration: underline;
  text-underline-offset: 0.2em;

  &:hover:not(:disabled, [aria-disabled='true']) {
    color: var(--tone-strong);
  }
}