///////////////////////
// BASE
////
// General rules and styleguide
// 

/*****************/
/** BASE STYLES **/
/*****************/
html
    box-sizing: border-box

*, *:before, *:after
    box-sizing: inherit

body
    font-family: 'Spartan', 'lato', sans-serif
    background-color: $light

img
    max-width: 100%
    height: auto

b, strong
    font-weight: 600
  
em, i 
    font-style: italic

img, br, .no-select
    user-select: none

a 
    &:hover 

p:not(:last-child)
    margin-bottom: 1.5em

section 
    ul
        list-style: disc
        margin-left: 1em
    ol
        list-style: decimal
        margin-left: 1em
    ul, ol 
        li
            margin-bottom: 0.8em

body
    color: $text-color


        
/****************/
/** VISIBILITY **/
/****************/
.hidden
    display: none !important
.tablet-reveal
    display: none !important
.mobile-reveal 
    display: none !important
.hidden-take-space
    opacity: 0 !important
    pointer-events: none !important
.screen-reader-only
    position: absolute
    left: -10000px
    top: auto
    width: 1px
    height: 1px
    overflow: hidden

@mixin base--tablet-and-smaller
    .tablet-hidden
        display: none !important
    .tablet-reveal
        display: block !important
@mixin base--mobile-and-smaller
    .mobile-hidden
        display: none !important
    .mobile-reveal 
        display: block !important

/*******************/
/** ACCESSIBILITY **/
/*******************/
.sr-only 
    border: 0
    padding: 0
    margin: 0
    position: absolute !important
    height: 1px
    width: 1px
    overflow: hidden
    clip: rect(1px 1px 1px 1px)
    clip: rect(1px, 1px, 1px, 1px)
    clip-path: inset(50%)
    white-space: nowrap
    background-color: #eee
    border-radius: 10px
    padding: 10px
    top: 10px
    left: 10px
    font-size: 1.5rem
    font-weight: bold 

.sr-only.sr-only--button:focus 
    width: auto
    height: auto
    margin: 0
    overflow: visible
    clip: auto
    clip-path: initial
    white-space: normal
    z-index: 99