> For the complete documentation index, see [llms.txt](https://docs.scandipwa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scandipwa.com/structure/building-blocks-summary/global-styles.md).

# Global Styles

ScandiPWA defines certain global styles. These are defined in SCSS in the `style` directory, which contains 3 subdirectories, as well as a file that imports all the styles from them.

## Directories in `style`

### `abstract`

The `abstract` subdirectory includes SCSS definitions that do not directly affect any element. Instead, they define utilities such as media selectors (`_media.scss`), SCSS variable declarations (`_variables.scss`) and some generic styles that could be used to style an element (`_loader.scss`, `_button.scss`).

### `base`

This directory defines the base styles for various HTML elements, such as tables, links, buttons and lists. In `_breakpoints.scss`, it defines classes that can be added to elements to easily hide them on some devices (mobile/tablet/desktop)

### `cms`

This directory contains styles for defining the look of various content inserted through a content management system (typically Magento CMS). Currently, it styles various promotion blocks, as well as sliders.

## Breakpoints

| Selector           | Visible on Mobile | Visible on Tablet | Visible on Desktop |
| ------------------ | ----------------- | ----------------- | ------------------ |
| `desktop`          |                   |                   | ✔️                 |
| `before-desktop`   | ✔️                | ✔️                |                    |
| `tablet`           |                   | ✔️                |                    |
| `tablet-landscape` |                   | landscape only    |                    |
| `after-mobile`     |                   |                   | ✔️                 |
| `mobile`           | ✔️                |                   |                    |

To use a breakpoint, use `include`:

```css
@include mobile {
    // your styles
}
```