@import compass/css3
@import compass/utilities/general/clearfix

@import colors
@import variables

@import social

body
    margin: 0

    @media (min-width: $chapterBreakPointLarge)
        margin: 0 0 8em

h1
    text-align: center
    line-height: normal

    .number
        display: block
        font-weight: 300
        text-transform: uppercase
        letter-spacing: .4em
        padding-left: .4em
        font-size: .55em
        line-height: 1
        position: relative
        margin-bottom: 0
        color: #aaa

    .title
        display: block
        font-weight: 100
        margin: .166666em 0 1em
        font-size: 1.5em

img
    max-width: 100%

sup
    vertical-align: baseline
    position: relative
    top: -.5em
    font-size: .85em

.logo
    margin: 0 auto 5em auto

    @media (min-width: $chapterBreakPointLarge)
        margin: 0 auto 8em auto

.page
    padding-top: 2em

    @media (min-width: $chapterBreakPointLarge)
        padding-top: 8em

.chapter
    width: $chapterWidth
    max-width: 100%
    padding: 0 .666666rem 1rem
    margin: 0 auto
    line-height: 1.5em

    a
        color: inherit
        text-decoration: none

        background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#333332, #333332)
        background-size: .05em 1px, .05em 1px, 1px 1px
        background-repeat: no-repeat, no-repeat, repeat-x
        text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff, 0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff, 0.12em 0 #fff, -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff
        background-position-y: 87%, 87%, 87%
        background-position-x: 0%, 100%, 0%

        &::selection
            text-shadow: 0.03em 0 $selectionColor, -0.03em 0 $selectionColor, 0 0.03em $selectionColor, 0 -0.03em $selectionColor, 0.06em 0 $selectionColor, -0.06em 0 $selectionColor, 0.09em 0 $selectionColor, -0.09em 0 $selectionColor, 0.12em 0 $selectionColor, -0.12em 0 $selectionColor, 0.15em 0 $selectionColor, -0.15em 0 $selectionColor
            background: $selectionColor

        &::-moz-selection
            text-shadow: 0.03em 0 $selectionColor, -0.03em 0 $selectionColor, 0 0.03em $selectionColor, 0 -0.03em $selectionColor, 0.06em 0 $selectionColor, -0.06em 0 $selectionColor, 0.09em 0 $selectionColor, -0.09em 0 $selectionColor, 0.12em 0 $selectionColor, -0.12em 0 $selectionColor, 0.15em 0 $selectionColor, -0.15em 0 $selectionColor
            background: $selectionColor

        &::before, &::after, *::before, *::after, *:not(em)
            text-shadow: none

        &:visited
            color: inherit

    h2, h3, h4, h5, h6
        line-height: 1.2em
        margin-top: 2rem
        margin-bottom: .125em

        & + *
            margin-top: 0

    sup a, .chapter-navigation a
        background-image: none
        text-shadow: none

.example
    max-width: 100%
    overflow: auto
    -webkit-overflow-scrolling: touch

    &.side-by-side
        +pie-clearfix

        .left
            float: left
            width: 50%

        .right
            float: right
            width: 50%

        .left, .right

            > p:first-child
                margin-top: 0

    > p:first-child
        margin-top: 0

    > p:last-child
        margin-bottom: 0

$chapterWidthInner: $chapterWidth - (2 * .666666rem)
$exampleWrapperSideBySideWidth: ($chapterWidthInner * 2) + 2rem

@media (min-width: ($exampleWrapperSideBySideWidth + ($chapterWidthInner / 2) + 4rem))
    .example-wrapper
        +pie-clearfix
        width: $exampleWrapperSideBySideWidth
        margin-left: - ($exampleWrapperSideBySideWidth - $chapterWidthInner) / 2
        margin-top: 1em
        margin-bottom: 2em
        transition: opacity .4s

        style[contenteditable], pre, .example
            width: $chapterWidthInner
            margin-top: 0

        pre, style[contenteditable]
            float: left

        .example
            float: right
            overflow: visible

        &.typography-example-wrapper
            margin-bottom: 4em

            .example
                overflow: hidden

        body.contextual-open &
            opacity: 0

style[contenteditable]
    margin: 1em 0
    display: block

code, pre, style[contenteditable]
    font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace

pre, style[contenteditable]
    background-color: #eee
    color: #333
    padding: .5em .666666em
    overflow-x: auto
    -webkit-overflow-scrolling: touch
    font-size: .8em
    line-height: 1.71em
    white-space: pre
    word-wrap: normal

style[contenteditable]
    +transition(box-shadow .2s)
    +box-shadow(0 0 #ccc)
    padding: .666666em 1em

    &:focus
        +box-shadow(-.5em 0 #ccc)
        outline: none

code
    font-size: .8em
    padding: .15625em .3125em
    background: #eee
    white-space: nowrap
    font-style: normal

    @media (min-width: $chapterBreakPointLarge)
        padding: 3px 6px

pre > code
    font-size: inherit
    background: transparent
    padding: 0
    white-space: inherit

hr
    +background-image(linear-gradient(left, transparent, rgba(0, 0, 0, .1) 10%, rgba(0, 0, 0, .1) 90%, transparent))
    height: 1px
    width: 100%
    border: 0
    margin: 2em auto

nav.chapter-navigation
    position: relative
    height: 2.5em
    max-width: 100%
    overflow: hidden

    a
        box-sizing: border-box
        +inline-block
        position: absolute
        padding: .43em .94em
        line-height: 1.7em
        background: #eee
        border: 0
        height: 100%
        text-decoration: none

        &, &:visited
            color: inherit

        .title
            display: none

            &.preface-title
                display: inline

        .number::before
            content: "Chapter "

        @media (min-width: $chapterBreakPointLarge)

            .title
                display: inline

            .number::after
                content: ": "

        &::after
            content: ""
            position: absolute
            background: transparent
            height: 0
            width: 0
            border: 1.25em solid
            top: 0

        &.previous-chapter
            left: 1.25em

            &::after
                right: 99.9%
                border-color: transparent #eee transparent transparent

        &.next-chapter
            right: 1.25em

            &::after
                left: 99.9%
                border-color: transparent transparent transparent #eee

nav.chapter-navigation-fullpage

    @media (max-width: $chapterBreakPointXLarge)
        display: none

    a
        box-sizing: content-box
        position: fixed
        -webkit-transform: translate3d(0, 0, 0)
        top: 0
        height: 100%
        width: 4rem
        background-image: linear-gradient($red, $purple)
        background-size: 1rem 100%
        background-repeat: no-repeat
        color: inherit
        text-decoration: none
        transition: background-position .4s

        .title
            position: absolute
            top: 0
            bottom: 0
            height: 2em
            line-height: 2em
            margin: auto
            opacity: 0
            pointer-events: none
            white-space: nowrap

        &:hover .title
            opacity: 1

        &::before
            content: ""
            position: absolute
            top: 0
            bottom: 0
            margin: auto
            height: 1em
            width: 1em
            border: 1px solid
            opacity: 0
            transform: rotateZ(45deg)

        &:hover::before
            opacity: 1

    .previous-chapter
        left: 0
        background-position: -1rem top

        &::before
            left: 1rem
            border-right: 0
            border-top: 0
            transition: opacity .4s, left .4s

        .title
            left: 1rem
            transition: opacity .4s, left .4s

        &:hover
            background-position: left top

            &::before
                left: 1.75rem

            .title
                left: 3rem

    .next-chapter
        right: 0
        background-position: 5rem top

        &::before
            right: 1rem
            border-left: 0
            border-bottom: 0
            transition: opacity .4s, right .4s

        .title
            right: 1rem
            transition: opacity .4s, right .4s

        &:hover
            background-position: right top

            &::before
                right: 1.75rem

            .title
                right: 3rem

h3.magic
    position: relative

    &::before
        display: block

    @media (min-width: $chapterBreakPoint)

        $bandWidth: -.625em

        &::before
            +box-shadow(0 ($bandWidth * 2) $blue, 0 ($bandWidth * 3) $green, 0 ($bandWidth * 4) $yellow, 0 ($bandWidth * 5) $orange, 0 ($bandWidth * 6) $red)
            +border-radius(50%)
            position: absolute
            content: ""
            font-size: 1rem
            height: .9375em
            width: .9375em
            right: 100%
            margin: auto
            margin-right: 1.25em
            margin-top: 3.75em
            top: 0
            bottom: 0

        &::after
            transform: rotateZ(-90deg)
            position: absolute
            content: "Magic"
            text-transform: uppercase
            letter-spacing: .4em
            font-size: .625rem
            right: 100%
            color: #fff
            margin-top: 1.25rem
            margin-right: .0625rem
            line-height: 1.25em

    @media (max-width: $chapterBreakPoint)

        &::before
            +background-image(linear-gradient(left, $purple, $red, rgba($orange, .8), rgba($yellow, .6), rgba($green, .4), rgba($blue, .2), rgba($purple, 0), transparent, transparent))
            +border-radius(0)
            +box-shadow(none)
            content: "Magic"
            position: static
            height: auto
            width: auto
            text-transform: uppercase
            letter-spacing: .4em
            font-size: .625rem
            color: #fff
            margin: 1rem -.666666rem
            padding: .1rem .666666rem

        &::after
            display: none

dl
    +pie-clearfix
    margin: 1.5em auto

    dt
        +inline-block
        line-height: 2em
        border-left: .25em solid

        &:nth-of-type(5n + 1)
            border-left-color: $red

        &:nth-of-type(5n + 2)
            border-left-color: $orange

        &:nth-of-type(5n + 3)
            border-left-color: $yellow

        &:nth-of-type(5n + 4)
            border-left-color: $green

        &:nth-of-type(5n + 5)
            border-left-color: $blue

        &:nth-of-type(5n + 6)
            border-left-color: $purple

    @media (min-width: $chapterBreakPointLarge)

        dt, dd
            float: left

        dt
            width: 30%
            padding-right: 5%
            clear: left

        dd
            width: 70%
            margin: 0 0 1.5em

            &:last-child
                margin-bottom: 0

em > em
    font-style: normal

figure
    position: relative
    margin: 1em 0
    text-align: center

    img
        margin: 0 auto
        display: block

    figcaption
        padding-top: 1em
        color: #888
        font-weight: 300
        letter-spacing: .03em

    @media (min-width: $chapterWidth)

        figcaption
            position: relative
            margin-top: 1em
            margin-left: 40%
            text-align: right

            &::after
                +background-image(linear-gradient(left, transparent, rgba(0, 0, 0, .1) 10%, rgba(0, 0, 0, .1) 90%))
                content: ""
                position: absolute
                top: 0
                right: 0
                left: 0
                height: 1px

    @media (min-width: ($exampleWrapperSideBySideWidth + ($chapterWidthInner / 2) + 4rem))

        figcaption
            position: absolute
            right: 100%
            top: 0
            bottom: 0
            padding: 0
            width: 20em

            display: -webkit-box
            display: -webkit-flex
            display: -moz-box
            display: -ms-flexbox
            display: flex

            -webkit-box-align: center
            -webkit-align-items: center
            -moz-box-align: center
            -ms-flex-align: center
            align-items: center

            -webkit-box-pack: flex-end
            -webkit-justify-content: flex-end
            -moz-box-pack: flex-end
            -ms-flex-pack: flex-end
            justify-content: flex-end

            &::after
                +background-image(linear-gradient(top, transparent, rgba(0, 0, 0, .1) 10%, rgba(0, 0, 0, .1) 90%, transparent))
                content: ""
                position: absolute
                top: 20%
                bottom: 20%
                right: 1.875em
                width: 1px
                height: auto
                left: auto

            .figcaption
                text-align: right
                padding-right: 3.75em

figure.cushy
    margin-top: 2em
    margin-bottom: 2em

@media (min-width: $chapterBreakPointLarge)

    figure.cushy
        margin-top: 8em
        margin-bottom: 8em

.magic-color
    min-height: 4em
    border-radius: .1875em
    margin: 0 0 1em

    @media (min-width: $chapterBreakPointLarge)
        margin: 4em -4em

    @media (min-width: $chapterBreakPointXLarge)
        margin: 4em -8em

    h2
        padding: 1em 0
        text-align: center
        color: #fff
        font-weight: 300
        text-transform: uppercase
        letter-spacing: .4em
        margin-left: .4em

    &.red-gradient
        background-image: linear-gradient(135deg, #723362, #9d223c)
        background-color: #9d223c

    &.green-gradient
        background-image: linear-gradient(135deg, #5fa4ee, #56e7ca)
        background-color: #5fa4ee

code + code.color
    position: relative
    border-radius: 0 .1875em .1875em 0

    &::after
        content: "\00a0"

    &::before
        content: ""
        position: absolute
        top: 0
        bottom: 0
        left: 0
        right: 0
        background-color: #fff
        background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc)
        background-size: .625rem .625rem
        border-radius: 0 .1875rem .1875rem 0
        background-position: 0 0, .3125rem .3125rem

    > span
        position: absolute
        top: 0
        bottom: 0
        left: 0
        right: 0
        border-radius: 0 .1875rem .1875rem 0

.contextual-display-wrapper
    position: absolute
    top: 0
    left: 0
    right: 0
    pointer-events: none
    overflow: hidden
    z-index: 25
    background: rgba(255, 255, 255, .6)
    opacity: 0
    transition: opacity .4s
    -webkit-transform: translate3d(0, 0, 0)

    @media (min-width: $chapterBreakPointLarge)
        position: fixed
        left: -100%
        right: -100%

    body.contextual-open &
        opacity: 1

.contextual-display
    position: absolute
    padding: 0 .666666rem
    width: $chapterWidth
    max-width: 100%
    left: 0
    right: 0
    margin: auto
    background: #fff
    padding-top: 1rem
    box-shadow: 0 0 10px rgba(0, 0, 0, .3)
    margin-top: 2rem

    body.contextual-open &
        pointer-events: initial

    @media (min-width: $chapterBreakPointLarge)
        padding-top: 0
        box-shadow: none
        margin-top: 0
        width: $chapterWidth / 2
        left: $chapterWidth + ($chapterWidth / 2)
        padding-left: 3.75em

        &::before
            +background-image(linear-gradient(top, rgba(0, 0, 0, .1) 10%, rgba(0, 0, 0, .1) 90%, transparent))
            content: ""
            position: absolute
            top: 0
            bottom: 20%
            left: 1.875em
            width: 1px

    a[data-contextual-close]
        -webkit-tap-highlight-color: transparent
        position: absolute
        top: 1rem
        right: .6666rem
        color: inherit
        cursor: pointer

        @media (min-width: $chapterBreakPointLarge)
            top: 0
            right: 0

        &::before
            content: "×"
            position: absolute
            top: -.15em
            right: 0
            width: 1em
            text-align: center
            line-height: 1.12em
            overflow: hidden
            height: 1em
            border-radius: 4px
            font-size: 1.75em

        &:hover::before
            background: #eee

    > *:first-child
        margin-top: 0

    > *:last-child
        margin-bottom: 0

.page
    transition: -webkit-transform .4s
    -webkit-transform: translate3d(0, 0, 0)

@media (min-width: $chapterBreakPointLarge)
    body.contextual-open

        .page
            -webkit-transform: translate3d(- $chapterWidth / 2, 0, 0)

.contextual-description
    margin-bottom: 1em

.contextual-example
    border-top: .0625em solid #eee
    padding: 2em 0
    text-align: center

    .box
        +inline-block
        text-align: left
        min-width: 4em
        min-height: 4em
        background: #888
        margin-bottom: 2em

        &.light
            background: #eee

    .text-box
        box-shadow: inset 0 0 0 .1em #888
        padding: .5em 1em
        text-align: left
        margin-bottom: 1em

    .text
        +inline-block

code.contextual-code-example
    cursor: pointer
    position: relative

    &:hover, &.contextual-open-tree
        background: #e0e0e0
        z-index: 50

        &::after
            +background-image(linear-gradient(left, $purple, $red, $orange, $yellow, $green, $blue, $purple))
            content: ""
            position: absolute
            left: 0
            right: 0
            top: 0
            height: 1px

@media (min-width: $chapterBreakPointLarge)
    body.contextual-open

        .contextual-open-tree-parent
            position: relative
            z-index: 50

.meta
    margin: 1em 0
    background: rgba($purple, .05)
    padding: 1em
    border-left: .2em solid $purple

    > *

        &:first-child
            margin-top: 0

        &:last-child
            margin-bottom: 0

    code
        background: rgba($purple, .15)

        &.contextual-code-example

            &:hover, &.contextual-open-tree
                background: rgba($purple, .21)

header.social
    position: absolute
    z-index: 3
    -webkit-transform: translate3d(0, 0, 0)
    margin: auto
    top: 0
    left: 0
    right: 0
    height: 4em

    @media (max-width: $chapterBreakPointLarge)
        display: none

    a.github
        position: absolute
        top: 0
        left: 0
        margin: 0
        padding: 2em
        opacity: .5

        &, &:visited
            color: #777
            text-decoration: none

            &:hover
                color: $purple

    a.twitter
        position: absolute
        display: block
        height: 3.5em
        width: 11.5em
        top: 0
        right: 0
        text-decoration: none
        opacity: .5
        background: none
        text-shadow: none

        &, &:visited
            color: #777
            text-decoration: none

            &:hover
                color: $blue

        &::before
            position: absolute
            top: 2em
            right: 3.4em
            content: "@adamfschwartz"
            opacity: 0

        &:hover::before
            opacity: 1

        &::after
            position: absolute
            top: 2em
            right: 2em
            font-family: "social-icons"
            content: '\e800'
            line-height: 1.4em

@import eager

.eager
    margin-top: 1em
    margin-bottom: 1em

    @media (min-width: $chapterBreakPointLarge)
        margin-top: 4em
