import { createGlobalStyle } from 'styled-components'
import { fonts } from './fonts'
import { fontSizes } from './sizes'

export const GlobalStyle = createGlobalStyle`
    .leaflet-container {
        width: 100%;
        height: 100vh;
    }
    *,
    *::after,
    *::before {
        box-sizing: border-box;
    }
    body {
        background: ${({ theme }) => theme.colors.backgroundPrimary};

        color: ${({ theme }) => theme.colors.primary};

        padding: 0;
        margin: 0;
        max-width: 100%;
        /* to make 'overflow-x: hidden;' work on mobile as well */
        position: relative;

        /* to make light text on dark backgrounds look lighter */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        font-family: ${fonts.default};
        font-size: ${fontSizes.text};
    }
    html, body, #root, #root>div {
        overflow-x: hidden;
    }
    h1, h2, h3, h4 {
        color: ${({theme}) => theme.colors.primary};
        margin-block-start: 0;
        margin-block-end: 0;
    }
    h1, h2 {
        color: ${({theme}) => theme.colors.secondary};
    }
    code {
        font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
    }
    a {
        color: ${({ theme }) => theme.colors.secondary};
        text-decoration: none;
    }
`