@layer components {
  /* Ghost/tool chrome. Solid CTAs use button / .button in base.css. */
  .btn {
    align-items: center;
    background-color: transparent;
    border: var(--border-width) solid var(--border);
    border-radius: 9999px;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    font-size: 1em;
    gap: 0.5em;
    justify-content: center;
    padding: 0.5em 1.1em;
    text-decoration: none;

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

    &:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
    }

    /* The one a toolbar is currently showing, so a filter says which it is. */
    &[aria-current="page"] {
      background-color: var(--accent-bg);
    }
  }

  /* The destructive pair lives here, not in base, because base's accent hover
     matches through :is(button, .button, input:is([type="submit"], …)) — the
     attribute selector makes it (0,3,1), which no .button--negative:hover can
     outrank. A later layer wins outright. */
  .button--negative {
    background-color: var(--bg);
    border-color: var(--color-error);
    color: var(--color-error);

    &:hover {
      background-color: color-mix(in oklch, var(--color-error) 12%, var(--bg));
      border-color: var(--color-error);
      color: var(--color-error);
    }
  }

  .btn--circle {
    aspect-ratio: 1;
    block-size: 2.25em;
    inline-size: 2.25em;
    padding: 0;
    border-radius: 50%;
  }

  @media (max-width: 639px) {
    .btn--circle-mobile {
      aspect-ratio: 1;
      inline-size: 2.5em;
      padding: 0;
      border-radius: 50%;

      kbd,
      strong,
      span:last-of-type:not(.icon) {
        display: none;
      }
    }
  }

  .btn--back {
    border: 0;
  }

  .btn--link {
    border: 0;
    background: none;
    color: var(--accent);
    padding: 0;

    &:hover {
      background: none;
      text-decoration: underline;
    }
  }
}