@layer components {
  .btn {
    display: inline-block;
    cursor: pointer;
    background-color: var(--btn-bg-color, transparent);
    color: var(--btn-text-color, var(--color-text));
    border: 1px solid var(--btn-border-color, var(--color-text));
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: var(--text-base);
    width: var(--width, fit-content);

    &:has(.icon) {
      border-color: transparent;
    }
  }

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

  .btn--danger {
    --btn-bg-color: var(--color-surafce);
    --btn-text-color: var(--color-error);
    --btn-border-color: var(--color-error);
  }

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

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