Variable name	Default value	Description
`--b-btn`	`purple`	Background color for the button component.
`--border-btn`	`purple`	Border color for the button component.
`--br-btn`	`.3rem`	Border radius for the button component.
`--c-btn`	`#fff`	Text color for the button component.
`--c-btn-s`	`var(--b-btn, purple)`	Secondary text color for the button component, used in the .btn-s class.
`--c-btn-t`	`var(--b-btn, purple)`	Tertiary text color for the button component, used in the .btn-t class.
`--fs-btn`	`1rem`	Font size for the button component.
`--fw-btn`	`500`	Font weight for the button component.
`--p-btn`	`.6rem 1.2rem`	Padding for the button component.
`--g-btn`	`.6rem`	Gap between elements inside the button component.

CSS Class	Description
`btn`	Base class for the button component. Sets up alignment, background, border, color, cursor, display, font-size, font-weight, gap, justify-content, outline, overflow, padding, position, text-decoration, transition, and user-select.
`btn::before`	Before pseudo-element for the btn class. Defines background color, content, inset, opacity, position, and transition.
`btn::after`	After pseudo-element for the btn class. Defines animation, border, border-left-color, border-radius, content, display, height, left, opacity, position, top, transition, width, and z-index.
`btn:hover::before, btn.syncing::before`	Styles for the before pseudo-element when the btn class is hovered over or has the syncing class.
`btn:active`	Style for the btn class when it is active. Applies transform.
`btn:disabled`	Style for the btn class when it is disabled. Applies opacity and pointer-events.
`btn.syncing`	Modifier class for the btn component when syncing. Adjusts pointer-events.
`btn-s`	Secondary style for the button component. Adjusts background and color, mainly used for secondary button styling.
`btn-t`	Tertiary style for the button component. Adjusts background, border-color, and color, mainly used for tertiary button styling.