// see http://highlightjs.org/static/test.html
@import "vendor/code-themes/github"


default-style(font-size = 16px, color = #333)
    font-family: 'Avenir Next', Avenir, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: font-size;
    color: color;

mono-style(font-size = 16px)
    font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace
    font-size: font-size;

box-sizing(box-sizing = border-box)
    -webkit-box-sizing: box-sizing;
    -moz-box-sizing: box-sizing;
    box-sizing: box-sizing;

link()
    color: #4A90E2
    text-decoration: none
    font-weight: 400


body
  margin: 0
  padding: 0
  background-color: #FFF;


.cssd-App
    min-height: 100vh
    overflow: hidden
    position: relative


.cssd-App-header
    default-style()
    display: block
    background-color: #323A44
    color: #333
    padding: 20px 16px

    h1, a
        font-size: 20px
        color: #FFF
        text-decoration: none



.cssd-App-content
    display: block
    margin-left: 20%
    background-color: #F7F7F7;
    padding-left: 30px
    position: relative;
    border-top: 1px solid transparent
    min-height: 100vh


.cssd-App-sidebar
    default-style(14px)
    float: left
    height: 100%
    width: 20%
    background-color: #3E4752
    position: relative
    z-index: 9999

    &:after
        content: ''
        width: 100%
        height: 1000%
        position: absolute
        background-color: #3E4752


    ul
        list-style: none

        a, span
            default-style(14px, rgba(255, 255, 255, 0.5))
            display: block
            padding-top: 8px
            padding-left: 16px
            margin-bottom: 10px
            text-decoration: none
            line-height: 1
            font-weight: 600

        a:hover
            color: rgba(255, 255, 255, 0.8)

        ul
            position: relative
            margin-left: 16px
            border-left: 1px solid rgba(255, 255, 255, 0.5)

            &:after
                content: ''
                width: 6px
                height: 6px
                border-top: 1px solid rgba(255, 255, 255, 0.5)
                position: absolute
                left: -1px
                bottom: 0
                background: #3E4752

            &:last-child:after
                border-top: none;

            li a,
            li span
                position: relative

                &:after
                    content: ''
                    width: 6px
                    height: 6px
                    border-top: 1px solid rgba(255, 255, 255, 0.5)
                    position: absolute
                    left: 0
                    bottom: 0
                    background: #3E4752

    > ul
        margin: 20px 20px 0 6px

        > li
            margin-bottom: 30px

            > a, > span
                text-transform: uppercase
                default-style(13px, #FFF)
                padding-bottom: 8px

    .js-isActive
        > a, > a:hover
            color: #FFF
            cursor: default;



.cssd-Breadcrumbs
    position: absolute
    top: -1px
    left: 0
    width: 100%
    background-color: #FFF
    padding-left: 0px

    .cssd-separator
        display: none

    a, span
        default-style(13px)
        padding: 12px 30px
        line-height: 1.1
        display: inline-block
        text-decoration: none
        text-transform: uppercase
        border-right: 1px solid #E4E4E4
        border-top-right-radius: 70px
        border-bottom-right-radius: 70px
        box-shadow: 5px 0 10px rgba(50, 58, 68, 0.1)
        color: #3E4752;
        opacity: 0.6;

    a:hover
        opacity: 1



.cssd-Doc {
    margin-top: 80px
    margin-right: 40px;
    margin-left: 10px;
    padding: 40px 40px 40vh
    background-color: #FFF
    border-top-left-radius: 5px
    border-top-right-radius: 5px
}

.cssd-DocBlock
    position: relative
    margin-bottom: 100px

.cssd-DocBlock-cssLink
    default-style(12px)
    link()
    position: absolute
    right: 0
    top: 0

    + .cssd-DocBlock-depends,
    + .cssd-DocBlock-extends
        margin-top: -14px

.cssd-DocBlock-title
    default-style(28px)
    margin: 0 0 20px

.cssd-DocBlock-subtitle
    margin: 3.2em 0 1.6em
    text-transform: uppercase

h3.cssd-DocBlock-subtitle,
h4.cssd-DocBlock-subtitle
    default-style(15px, #323A44)

h5.cssd-DocBlock-subtitle
    default-style(14px, #323A44)


.cssd-DocBlock-description
    default-style()
    margin-top: 40px
    max-width: 44em

    > p, > pre, > ul, > ol
        default-style(16px)
        margin-top: 20px
        &:first-child
            margin-top: 0

    > ul, > ol
        margin-left: 18px

    li
        margin-bottom: 6px


.cssd-DocBlock-states,
.cssd-DocBlock-modifier
    list-style: none
    > li
        margin-bottom: 30px


.cssd-DocBlock-depends,
.cssd-DocBlock-extends
    default-style(14px, #999DA2)
    list-style: none
    margin-bottom: 3px;

    > strong
        font-weight: 600
        margin-right: 8px


    strong, ul, li
        display: inline-block
        vertical-align: baseline

    ul li a
        link()
        marign-right: 10px



// highlight.js
.cssd-DocBlock,
.cssd-DocBlock-snippet
    .hljs
        font-size: 14px
        background-color: #FFF;

    .hljs, code
        box-sizing()
        mono-style(14px)


.cssd-DocBlock-description
.cssd-DocBlock-snippet
    > .hljs
        width: 100%
        display: block


.cssd-DocBlock-render,
.cssd-DocBlock-snippet
    border: 1px dashed #CECECE
    padding: 20px
    border-radius: 5px;


.cssd-DocBlock-theme--dark
    background-color: #454755;

.cssd-DocBlock-theme--gray,
.cssd-DocBlock-theme--grey
    background-color: #DDDDDD;


.cssd-DocBlock-render-header
    // background-color: #EEE
    border: 1px dashed #CECECE
    padding: 10px 20px
    border-top-right-radius: 4px
    border-top-left-radius: 4px
    overflow: hidden

    > code
        mono-style(15px)
        float: left
        width: 200px
        color: #444
        font-weight: bold
        margin-top: 3px

    > p
        default-style(16px, #999DA2)
        display: block
        margin-left: 220px


    + .cssd-DocBlock-render
        border-top-right-radius: 0
        border-top-left-radius: 0
        border-top: none


.cssd-Toc
    padding: 0 20px
    color: #323a44

    a
        color: #4a90e2

    span, a
        display: inline-block;
        padding: 0 0 0.8em

    ul
        list-style: none

    > ul > li ul
        padding-bottom: 20px

    > ul > li > ul
        overflow: hidden
        > li
            box-sizing: border-box
            display: inline-block
            vertical-align: top
            width: 30%
            > ul ul
                padding-left: 15px;