@layer components {

  .btn {
    --btn-border-radius: var(--radius-full);
    --btn-hover-brightness: 0.9;

    align-items: center;
    background-color: var(--btn-background, var(--color-surface));
    border-radius: var(--btn-border-radius);
    border: 1px solid var(--btn-border-color, var(--color-ink-light));
    color: var(--btn-color, var(--color-ink));
    cursor: pointer;
    display: inline-flex;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    gap: var(--space-2);
    justify-content: center;
    letter-spacing: 0;
    line-height: 1.25;
    padding: 0.5em 1.1em;
    pointer-events: auto;
    position: relative;
    text-decoration: none;
    transition: 100ms ease-out;
    transition-property: background-color, border-color, box-shadow, color, filter, opacity;
    white-space: nowrap;

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

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

    &:focus-visible {
      border-radius: var(--btn-border-radius);
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }

    &:disabled,
    &[aria-disabled="true"] {
      cursor: not-allowed;
      opacity: 0.45;
      pointer-events: none;
    }
  }

    .btn--xs {
    padding: 0.25em 0.75em;
    font-size: var(--text-x-small);
  }

  .btn--sm {
    padding: 0.35em 0.85em;
    font-size: var(--text-x-small);
  }

  .btn--lg {
    padding: 0.65em 1.4em;
    font-size: var(--text-normal);
  }

  .btn--full {
    width: 100%;
  }

  .btn--primary {
    --btn-background:    var(--color-brand-base);
    --btn-border-color:  transparent;
    --btn-color:         oklch(var(--lch-white));
    --btn-hover-brightness: 0.88;
  }

  .btn--outline {
    --btn-background:   var(--color-surface);
    --btn-border-color: var(--color-border);
    --btn-color:        var(--color-ink-darker);
  }

  .btn--ghost {
    --btn-background:   transparent;
    --btn-border-color: transparent;
    --btn-color:        var(--color-ink-dark);
  }

  .btn--neutral {
    --btn-background:   var(--color-ink-lightest);
    --btn-border-color: var(--color-border);
    --btn-color:        var(--color-ink-darker);
  }

  .btn--danger {
    --btn-background:   var(--color-danger-base);
    --btn-border-color: transparent;
    --btn-color:        oklch(var(--lch-white));
    --btn-hover-brightness: 0.88;
  }

  .btn--danger-ghost {
    --btn-background:   transparent;
    --btn-border-color: transparent;
    --btn-color:        var(--color-danger-base);
  }

  .btn--danger-outline {
    --btn-background:   var(--color-surface);
    --btn-border-color: var(--color-danger-base);
    --btn-color:        var(--color-danger-base);
  }

  .btn--success {
    --btn-background:   var(--color-success-base);
    --btn-border-color: transparent;
    --btn-color:        oklch(var(--lch-white));
    --btn-hover-brightness: 0.88;
  }

  .btn--circle,
  .btn[aria-label]:where(:has(svg)) {
    aspect-ratio: 1;
    block-size: var(--btn-size);
    inline-size: var(--btn-size);
    padding: 0;
    display: grid;
    place-items: center;
  }

  form[aria-busy] .btn:disabled {
    position: relative;

    > * { visibility: hidden; }

    &::after {
      --mask: no-repeat radial-gradient(#000 68%, #0000 71%);
      --size: 1.25em;

      -webkit-mask: var(--mask), var(--mask), var(--mask);
      -webkit-mask-size: 28% 45%;
      animation: submitting 1s infinite linear;
      aspect-ratio: 8 / 5;
      background: currentColor;
      content: "";
      inline-size: var(--size);
      inset: 50%;
      margin-block: calc((var(--size) / 3) * -1);
      margin-inline: calc((var(--size) / 2) * -1);
      position: absolute;
    }
  }
}

@keyframes submitting {
  to { -webkit-mask-position: 35% 0, 0 0, 65% 0; mask-position: 35% 0, 0 0, 65% 0; }
}