import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as r}from"./index-CO-0pc0F.js";import{M as o}from"./index-Z-6k0Xrj.js";import{p as i}from"./docsPage-CT2vyZOj.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";function n(s){const t={code:"code",h1:"h1",h3:"h3",p:"p",pre:"pre",...r(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Styles/Intro",parameters:{...i}}),`
`,e.jsx(t.h1,{id:"styles",children:"Styles"}),`
`,e.jsx(t.p,{children:"This library also includes our main SCSS stylesheets with pre-defined classes you can use to style your page."}),`
`,e.jsx(t.h3,{id:"importing-our-main-stylesheet",children:"Importing our main stylesheet"}),`
`,e.jsx(t.p,{children:"Import the SCSS directly in your top-level component. (This is done for you in the graphics kit.)"}),`
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<!-- pages/index.svelte -->
<script>
  // other imports and stuffs ...

  import '@reuters-graphics/graphics-components/scss/main.scss';
<\/script>
`})})]})}function x(s={}){const{wrapper:t}={...r(),...s.components};return t?e.jsx(t,{...s,children:e.jsx(n,{...s})}):n(s)}export{x as default};