/* .btn is the secondary (outlined) button. Variants set the three local properties. */
@layer components {
  .btn, :where(button, input[type=submit]) {
    --btn-background: var(--color-bg-raised);
    --btn-color: var(--color-link);
    --btn-border: var(--color-link);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--inline-space);
    min-block-size: var(--touch-target);
    padding: var(--block-space-half) var(--inline-space-double);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--btn-color);
    text-decoration: none;
    background: var(--btn-background);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius);
    transition: background var(--transition), border-color var(--transition);

    &:hover { --btn-color: var(--color-link-hover); --btn-border: var(--color-link-hover); }

    &:disabled, &[aria-disabled=true] {
      --btn-background: var(--color-border);
      --btn-color: var(--color-subtle);
      --btn-border: var(--color-border);
    }
  }

  .btn--reversed {
    --btn-background: var(--color-link);
    --btn-color: var(--color-text-reversed);
    --btn-border: var(--color-link);

    &:hover { --btn-background: var(--color-link-hover); --btn-color: var(--color-text-reversed); }
  }

  .btn--negative {
    --btn-background: var(--color-negative);
    --btn-color: var(--color-text-reversed);
    --btn-border: var(--color-negative);

    &:hover { --btn-color: var(--color-text-reversed); --btn-border: var(--color-negative); }
  }

  .btn--plain {
    --btn-background: transparent;
    --btn-border: transparent;

    &:hover { --btn-border: transparent; text-decoration: underline; }
  }

  /* Size lg (48 px): the counter's one-handed actions (design-system.md, Button). */
  .btn--large {
    min-block-size: 3rem;
    font-size: var(--text-normal);
  }

  /* Loading: the button waits, and says so to assistive technology. */
  .btn[aria-busy=true] { cursor: progress; opacity: 0.7; }
}