@layer components {
  .btn {
    cursor: pointer;
    background-color: var(--btn-bg-color, var(--color-text));
    color: var(--btn-text-color, var(--color-surface));
    border: 1px solid var(--btn-border-color, var(--color-surface));
  }

  .btn--primary {
    --btn-bg-color: var(--color-text);
    --btn-text-color: var(--color-surface);
    --btn-border-color: var(--color-text);
  }
}