@layer components {
  .button {
    --button-size: var(--tap-min);
    --icon-size: var(--button-icon-size);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-block-size: var(--button-size);
    padding-inline: var(--space-7);
    border: var(--border-width) solid var(--color-edge);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-sunken);
    color: var(--color-ink);
    font: var(--type-button);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease-calm), transform var(--dur-fast) var(--ease-spring);
  }

  .button:active {
    transform: scale(var(--press-scale));
  }

  .button--round {
    inline-size: var(--button-size);
    padding-inline: var(--space-0);
  }

  .button--large {
    --button-size: var(--button-size-large);
    --icon-size: var(--button-icon-size-large);
  }

  .button--primary,
  .button--danger,
  .button--plain {
    border-color: transparent;
  }

  .button--primary {
    background-color: var(--color-accent);
    color: var(--color-ink-on-accent);
    box-shadow: var(--elev-2);
  }

  .button--danger {
    background-color: var(--color-danger);
    color: var(--color-ink-on-danger);
  }

  .button--plain {
    padding-inline: var(--space-3);
    background-color: transparent;
    color: var(--color-accent-ink);
  }

  .button:disabled {
    background-color: var(--color-surface-sunken);
    color: var(--color-ink-faint);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
  }

  .button--plain:disabled {
    background-color: transparent;
  }

  :is(form, turbo-frame)[aria-busy="true"] .button:disabled {
    color: var(--color-ink);
    cursor: progress;
  }

  :is(form, turbo-frame)[aria-busy="true"] .button--primary:disabled {
    background-color: var(--color-accent-press);
    color: var(--color-ink-on-accent);
  }

  :is(form, turbo-frame)[aria-busy="true"] .button--danger:disabled {
    background-color: var(--color-danger);
    color: var(--color-ink-on-danger);
  }

  :is(form, turbo-frame)[aria-busy="true"] .button--plain:disabled {
    color: var(--color-accent-ink);
  }

  @media (any-hover: hover) {
    .button:hover:where(:not(:disabled)) {
      background-color: var(--color-border);
    }

    .button--primary:hover:where(:not(:disabled)) {
      background-color: var(--color-accent-hover);
    }

    .button--danger:hover:where(:not(:disabled)) {
      background-color: var(--color-danger);
    }

    .button--plain:hover:where(:not(:disabled)) {
      background-color: var(--color-surface-sunken);
    }
  }
}