@import "_settings"
@import "_syntax"

body
    font-family $body-font
    font-size $body-font-size
    -webkit-font-smoothing antialiased
    -moz-osx-font-smoothing grayscale
    color $medium
    background-color white
    margin 0
    &.docs
        padding-top: $header-height

@media screen and (max-width: 900px)
    body.docs
        padding-top: 0

a
    text-decoration none
    color $medium

img
    border none

h1, h2, h3, h4, strong
    font-weight 600
    color $dark

code, pre
    font-family $code-font
    font-size $code-font-size
    background-color $codebg
    -webkit-font-smoothing initial
    -moz-osx-font-smoothing initial

code
    color #e96900
    padding 3px 5px
    margin 0 2px
    border-radius 2px
    white-space nowrap

em
    color $light

p
    word-spacing 0.05em

a.button
    padding 0.75em 2em
    border-radius 2em
    display inline-block
    color #fff
    background-color lighten($green, 8%)
    transition all .15s ease
    box-sizing border-box
    border 1px solid lighten($green, 8%)
    &.white
        background-color #fff
        color $green

.highlight
    overflow-x auto
    position relative
    padding 0
    background-color $codebg
    padding .8em .8em .4em
    line-height 1.1em
    border-radius $radius
    table, tr, td
        width 100%
        border-collapse collapse
        padding 0
        margin 0
    .gutter
        width 1.5em
    .code
        $code-line-height = 1.5em
        pre
            padding 1.2em 1.4em
            line-height $code-line-height
            margin 0
        .line
            min-height $code-line-height
    &.html, &.js, &.bash, &.css
        .code:after
            position absolute
            top 0
            right 0
            color #ccc
            text-align right
            font-size .75em
            padding 5px 10px 0
            line-height 15px
            height 15px
            font-weight 600
    &.html .code:after
        content 'HTML'
    &.js .code:after
        content 'JS'
    &.bash .code:after
        content 'Shell'
    &.css .code:after
        content 'CSS'

#main
    position relative
    z-index 1
    padding 0 60px 30px
    overflow-x hidden

#ad
    width 125px
    // text-align center
    position fixed
    z-index 99
    bottom 10px
    right 10px
    padding 10px
    background-color #fff
    border-radius 3px
    font-size 13px
    a
        display inline-block
        color $light
        font-weight normal
    span
        color $light
        display inline-block
        margin-bottom 5px
    img
        width 125px
    .carbon-img, .carbon-text
        display block
        margin-bottom 6px
        font-weight normal
        color $medium
    .carbon-poweredby
        color #aaa
        font-weight normal

#nav
    .nav-link
        cursor pointer
    .nav-dropdown-container
        .nav-link
            &:hover
                border-bottom none
        &:hover
            .nav-dropdown
                display block
        &.language
            margin-left 20px
        .arrow
            pointer-events none
    .nav-dropdown
        display none
        box-sizing border-box
        max-height "calc(100vh - %s)" % $header-height
        overflow-y scroll
        position absolute
        top 100%
        right -15px
        background-color #fff
        padding 10px 0
        border 1px solid #ddd
        border-bottom-color #ccc
        text-align left
        border-radius 4px
        white-space nowrap
        li
            line-height 1.8em
            margin 0
            display block
            > ul
                padding-left: 0
            &:first-child
                h4
                    margin-top 0
                    padding-top: 0
                    border-top: 0
        a, h4
            padding 0 24px 0 20px
        h4
            // text-transform uppercase
            margin .45em 0 0
            padding-top: .45em
            border-top: 1px solid #eee
        a
            color lighten($dark, 10%)
            font-size .9em
            display block
            &:hover
                color $green
    .arrow
        display inline-block
        vertical-align middle
        margin-top -1px
        margin-left 6px
        margin-right -14px
        width 0
        height 0
        border-left 4px solid transparent
        border-right 4px solid transparent
        border-top 5px solid #ccc