/*
 * Buttons. Every <button> and submit input looks like a button without a
 * class; .btn gives a link the same look. A form's submit is its primary
 * action, so it takes the lime by default (DESIGN.md §5).
 */
@layer components {
  :where(button, input[type="submit"], input[type="button"], .btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--control-height);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-text);
    border-radius: var(--radius-s);
    background: var(--color-text);
    color: var(--color-surface);
    font: var(--text-body-strong);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;

    &:hover {
      background: var(--color-graphite);
      color: var(--color-surface);
      text-decoration: none;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  :where(input[type="submit"], .btn--primary) {
    background: var(--color-action);
    border-color: var(--color-action);
    color: var(--color-text);

    &:hover {
      background: var(--color-action);
      border-color: var(--color-text);
      color: var(--color-text);
    }
  }

  .btn--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--color-text);

    &:hover {
      background: var(--color-surface-2);
      color: var(--color-ink);
    }
  }

  .btn--danger {
    background: var(--color-negative);
    border-color: var(--color-negative);
    color: var(--color-paper);
  }

  .btn--small {
    min-block-size: auto;
    padding: var(--space-1) var(--space-3);
    font: var(--text-small);
    font-weight: 500;
  }

  /*
   * button_to renders a one-button form for a single state change (remove,
   * mark inactive). Those are secondary actions: small, outlined, and in the
   * text flow next to the links around them.
   */
  form.button_to {
    display: inline-block;
    margin: 0;

    & :where(button, input[type="submit"]) {
      min-block-size: auto;
      padding: var(--space-1) var(--space-3);
      background: transparent;
      border-color: var(--color-line);
      color: var(--color-text);
      font: var(--text-small);
      font-weight: 500;

      &:hover {
        background: var(--color-paper);
        border-color: var(--color-text);
        color: var(--color-ink);
      }
    }
  }
}