@layer components {
  .btn {
    --btn-background: var(--color-canvas);
    --btn-color: var(--color-ink);
    --btn-border-color: var(--color-border);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    font-size: var(--text-small);
    font-weight: 600;
    background: var(--btn-background);
    color: var(--btn-color);
    border: 1px solid var(--btn-border-color);
    border-radius: var(--radius-small);
    padding: 0.5em 1em;
    cursor: pointer;
    transition: filter 0.15s var(--ease-out-expo), transform 0.1s var(--ease-out-expo);

    @media (any-hover: hover) {
      &:hover {
        filter: brightness(0.96);
        text-decoration: none;
      }
    }

    &:active {
      transform: scale(0.97);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

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

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

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

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

  .btn--ghost {
    --btn-background: transparent;
    border-color: transparent;
  }
}