@layer components {
  .btn {
    --btn-hover-brightness: 0.9;
    --icon-size: var(--btn-icon-size, 1.3em);

    align-items: center;
    background-color: var(--btn-background, var(--color-canvas));
    border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-ink-light));
    border-radius: var(--radius);
    color: var(--btn-color, var(--color-ink));
    cursor: pointer;
    display: inline-flex;
    font-size: 1em;
    font-weight: var(--btn-font-weight, 600);
    gap: var(--btn-gap, 0.5em);
    justify-content: center;
    padding: var(--btn-padding, 0.5em 1.1em);
    position: relative;
    text-decoration: none;
    transition: 100ms ease-out;
    transition-property: background-color, border, box-shadow, color, opacity;

    @media (prefers-color-scheme: dark) {
      --btn-hover-brightness: 1.25;
    }

    @media (any-hover: hover) {
      &:hover {
        filter: brightness(var(--btn-hover-brightness));
      }
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.3;
      pointer-events: none;
    }
  }

  .btn--plain {
    --btn-background: transparent;
    --btn-border-size: 0;
    --btn-color: inherit;
    --btn-padding: 0;
  }

  /* Icon-only buttons, labeled by aria-label, are squares the height of a text button */
  .btn[aria-label]:where(:has(.icon)) {
    --btn-padding: 0;

    aspect-ratio: 1;
    block-size: var(--btn-size, calc(1lh + 1em + 2 * var(--btn-border-size, 1px)));
    display: grid;
    justify-content: normal; /* Stretches the track, so a percentage --icon-size resolves against the button */
    place-items: center;
  }

  /* No background or border until hovered, for secondary actions like toolbars */
  .btn--ghost {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --btn-color: inherit;

    @media (any-hover: hover) {
      &:hover {
        --btn-background: var(--color-ink-lighter);
      }
    }
  }

  .btn--link {
    --btn-background: var(--color-link);
    --btn-border-color: var(--color-link);
    --btn-color: var(--color-ink-inverted);
  }

  .btn--negative {
    --btn-background: var(--color-negative);
    --btn-border-color: var(--color-negative);
    --btn-color: var(--color-ink-inverted);
    --focus-ring-color: var(--color-negative);
  }

  .btn--positive {
    --btn-background: var(--color-positive);
    --btn-border-color: var(--color-positive);
    --btn-color: var(--color-ink-inverted);
    --focus-ring-color: var(--color-positive);
  }

  .btn--reversed {
    --btn-background: var(--color-ink);
    --btn-border-color: var(--color-ink);
    --btn-color: var(--color-canvas);
    --focus-ring-color: var(--color-ink);
  }
}