/*
 * Buttons, from `button_classes`. Flat, with a pressed state that changes
 * colour and never the box: the old slab changed height on press and shoved
 * its neighbours.
 *
 *   .button--primary    the one action a region is for. Accent, full strength.
 *   .button--secondary  everything beside it.
 *   .button--danger     destructive.
 *   .button--small / --large, .button--block
 *
 * A small button is 36px on a mouse and 44px on a touch screen.
 */
@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-block-size: var(--control-height);
    padding: var(--space-xs) var(--space-lg);
    border: var(--rule-width) solid transparent;
    border-radius: var(--radius-control);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-wrap: balance;
    cursor: pointer;
    transition:
      background-color var(--duration-fast),
      border-color var(--duration-fast),
      box-shadow var(--duration-fast);

    &:disabled,
    &[aria-disabled="true"] {
      background-color: var(--color-surface-sunken);
      border-color: var(--color-rule-strong);
      color: var(--color-ink-muted);
      box-shadow: none;
      cursor: not-allowed;
    }
  }

  .button--primary {
    background-color: var(--color-accent);
    color: var(--color-ink-inverse);
    box-shadow: var(--shadow-accent);

    &:hover {
      background-color: var(--color-accent-strong);
    }

    &:active {
      background-color: color-mix(in srgb, var(--color-accent-strong) 82%, var(--color-ink));
      box-shadow: none;
    }
  }

  .button--secondary {
    background-color: var(--color-surface);
    border-color: var(--color-rule-strong);
    color: var(--color-ink);
    font-weight: var(--weight-medium);

    &:hover {
      background-color: var(--color-surface-raised);
      border-color: var(--color-rule-control);
    }

    &:active {
      background-color: var(--color-surface-sunken);
    }
  }

  .button--danger {
    background-color: var(--color-loss);
    color: var(--color-ink-inverse);

    &:hover {
      background-color: color-mix(in srgb, var(--color-loss) 85%, var(--color-ink));
    }

    &:active {
      background-color: color-mix(in srgb, var(--color-loss) 70%, var(--color-ink));
    }
  }

  .button--small {
    min-block-size: var(--control-height-sm);
    padding: var(--space-2xs) var(--space-md);
    font-size: var(--text-ui-sm);

    @media (pointer: coarse) {
      min-block-size: var(--target-min);
    }
  }

  .button--large {
    min-block-size: 3rem;
    padding: var(--space-xs) var(--space-2xl);
    font-size: var(--text-input);
  }

  .button--block {
    display: flex;
    inline-size: 100%;
  }
}