import { createGlobalStyle } from 'styled-components'

export const CSSReset = createGlobalStyle`
    /* CSS Reset (Inspired by TailwindCSS) */
    html{
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
    }
    body{
        margin: 0;
    }
    main{
        display: block;
    }
    hr{
        box-sizing: content-box;
        height: 0;
        overflow: visible;
    }
    pre{
        font-family: monospace,monospace;
        font-size: 1em;
    }
    a{
        background-color: transparent;
    }
    abbr[title]{
        border-bottom: none;
        text-decoration: underline;
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
    }
    b,strong{
        font-weight: bold;
    }
    code,kbd,samp{
        font-family: monospace,monospace;
        font-size: 1em;
    }
    small{
        font-size: 80%;
    }
    sub,sup{
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    sub{
        bottom: -0.25em;
    }
    sup{
        top: -.5em;
    }
    img{
        border-style: none;
    }
    button,input,optgroup,select,textarea{
        font-family: inherit;
        font-size: 100%;
        line-height: 1.15;
        margin: 0;
    }
    button,input{
        overflow: visible;
    }
    button,select{
        text-transform: none;
    }
    [type=button],[type=reset],[type=submit],button{
        -webkit-appearance: button;
    }
    [type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{
        border-style: none;
        padding: 0;
    }
    [type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{
        outline: 1px dotted ButtonText;
    }
    fieldset{
        padding: 0.35em 0.75em 0.625em;
    }
    legend{
        box-sizing: border-box;
        color: inherit;
        display: table;
        max-width: 100%;
        padding: 0;
        white-space: normal;
    }
    progress{
        vertical-align: baseline;
    }
    textarea{
        overflow: auto;
    }
    [type=checkbox],
    [type=radio]{
        box-sizing: border-box;
        padding: 0;
    }
    [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{
        height: auto;
    }
    [type=search]{
        -webkit-appearance: textfield;
        outline-offset: -2px;
    }
    [type=search]::-webkit-search-decoration{
        -webkit-appearance: none;
    }
    ::-webkit-file-upload-button{
        -webkit-appearance: button;
        font: inherit;
    }
    details{
        display: block;
    }
    summary{
        display: list-item;
    }
    template{
        display: none;
    }
    [hidden]{
        display: none;
    }
    html{
        box-sizing: border-box;
        font-family: sans-serif;
    }
    *,::after,::before{
        box-sizing: inherit;
    }
    blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{
        margin: 0;
    }
    button{
        background: 0 0;
        padding: 0;
        border: 0;
    }
    button:focus{
        outline: 1px dotted;
        outline: 5px auto -webkit-focus-ring-color;
    }
    fieldset{
        margin: 0;
        padding: 0;
    }
    ol,ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    html{
        font-family: ${props => props.theme.fonts.sans};
        line-height: 1.5;
    }
    img{
        border: 0;
    }
    textarea{
        resize: vertical;
    }
    input:-ms-input-placeholder,textarea:-ms-input-placeholder{
        color: ${props => props.theme.colors.neutral[700]};
    }
    input::-ms-input-placeholder,textarea::-ms-input-placeholder{
        color: ${props => props.theme.colors.neutral[700]};
    }
    input::placeholder,textarea::placeholder{
        color: ${props => props.theme.colors.neutral[700]};
    }
    [role=button],button{
        cursor: pointer;
    }
    table{
        border-collapse: collapse;
    }
    h1,h2,h3,h4,h5,h6{
        font-size: inherit;
        font-weight: inherit;
    }
    a{
        color: inherit;
        text-decoration: inherit;
    }
    button,input,optgroup,select,textarea{
        padding: 0;
        line-height: inherit;
        color: inherit;
    }
    code,kbd,pre,samp{
        font-family: ${props => props.theme.fonts.mono}
    }
    audio,canvas,embed,iframe,img,object,svg,video{
        display: block;
        vertical-align: middle;
    }
    img,video{
        max-width: 100%;
        height: auto;
    }
`

export default CSSReset