#post-index
    width: 100%
    max-width: 900px
    margin: 0 auto
    #post-index-wrapper
        //padding: 0.75rem
        overflow: hidden
        #post-index-header
            margin: 10px 0 0 0
            #post-index-header-left
                text-transform: capitalize
                display: inline-block
                width: 50%
                color: $white
                font-size: 3em
            #post-index-header-right   
                text-align: right
                display: inline-block
                width: 50%
                a
                    button
                      color: $white
                      border-radius: 3px
                      margin-left: 10px
                      width: 55px
                      svg
                        //@include object-transitions(0.1s)
                        width: 20px
                        height: 17px
                        fill: $white
    
                .current-filter
                    color: $highlight
                    text-decoration-color: $secondary

        #posts-list
            margin: 20px 0 0 0

            a.page-link
                background: $white
                display: inline-block
                vertical-align: top
                width: 100%
                text-decoration: none
                margin: 0 0 20px 0
                border-radius: 3px
                overflow: hidden
                color: color.adjust($primary, $lightness: -60%)

                label
                    font-size: 2em
                    font-weight: 500
                    padding: 10px
                    display: inline-block
                    vertical-align: top
                    width: 100%

                div.page-bg
                    width: 100%
                    height: 350px
                    background-color: $highlight
                    position: relative
                    label
                      font-size: 2em
                      font-weight: 700
                      color: $white
                      padding: 5px
                      vertical-align: top
                      display: inline-block
                      word-wrap: break-word
                      width: 100%
                      text-align: center
                      position: relative
                      top: 35%
                      @include text-drop-shadow($black, 1, 2px, 2px, 0)
                      @include text-drop-shadow($black, 1, 2px, 2px, 0)
                    #meta
                        width: 100%
                        background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%)
                        border-radius: 3px
                        margin:  auto
                        bottom: 0
                        position: absolute
                        padding: 0 0 20px 0
                        #options
                            width: 100%
                            bottom: 0
                            position: absolute
                            #option-left
                                display: inline-block
                                vertical-align: top
                                width: 50%
                                position: relative
                                background: none
                                button
                                  border-radius: 3px
                                  background: $primary
                                  margin: 0 0 10px 10px
                                  svg
                                    //@include object-transitions(0.1s)
                                    width: 40px
                                    height: 20px
                                    fill: $secondary
                                .item-options
                                  border-radius: 3px
                                  margin: 5px
                                  display: inline-block
                                button[data-active='false']
                                  background: $primary
                                  svg
                                    fill: $secondary
                              
                                button[data-active='true']
                                  background: $tertiary
                                  svg
                                    fill: $primary                          
                            #option-right
                                display: inline-block
                                width: 50%
                                text-align: right
                                span
                                  font-weight: bold
                                  display: block
                                  background: $white
                                  color: $primary
                                  border-radius: 3px
                                  font-size: .6em
                                  text-align: center
                                  position: relative
                                  padding: 5px
                                  float: right
                                  margin: 0 10px 0 0
                                  bottom: -15px

                p
                    padding: 5px 10px 5px 10px
                    font-size: 1.2em
                    font-weight: 400
        .paginate
            width: 260px
            display: block
            margin: 0 auto
            a
                display: inline-block
                vertical-align: top 
            span.count
                text-align: center
                padding: 5px
                margin-top: -2px
                display: inline-block
                width: 190px
                font-size: 1.5em
                color: $tertiary
                

#post-edit-index
    width: 100%
    overflow: hidden

    #post-edit-index-wrapper
        width: 100%

        #post-header
            // width 100%
            
            background: $highlight
            #post-header-wrapper
                max-width: 900px
                margin: 0 auto
                padding: 0.75rem
                label 
                    color: $white
                    font-size: 0.9em
                    font-family: $baseType
                    font-weight: 600
                span
                    color: $primary
                    font-size: 0.9em
                    font-weight: 600
                    text-transform: uppercase
                    float: right

                #post-title
                    #post_title
                        background: $white
                        font-family: $baseType
                        width: 97.6%
                        height: 80px
                        font-size: 2em
                        color: $primary
                        padding: 5px
                        margin: 0 0 5px 0


                    #calendar-icon
                        background: color.adjust($primary, $lightness: -15%)
                        border-radius: 3px 0 0 3px
                        display: inline-block
                        padding: 5.2px
                        color: $secondary
                    #layouts
                        select
                            background: $primary
                            color: $secondary
                            border-radius: 3px
                            border-color: $primary
                            margin: 0 0 10px 0
                            width: 100%
                            height: 45px
                            padding: 5px
                            font-size: 1.5em

                #post-meta
                    #post_tags
                        background: $white
                        font-family: $baseType
                        width: 97.6%
                        height: 80px
                        color: $primary
                        padding: 5px
                        margin: 0 0 5px 0
                    
                    #post-options
                        display: inline-block
                        vertical-align: top
                        width: 100%
                        padding: 0
                        margin: 0 0 10px 0

                        button:nth-child(1)
                            border-radius: 3px 0 0 3px

                        button:nth-child(4)
                            border-radius: 0 3px 3px 0
                        
                        a
                            button
                                border-radius: 0 3px 3px 0 !important
                                

                        button
                            width: 25%
                            height: 45px
                            @include object-transitions(0.3s)
                            @include object-transitions(0.3s)
                            margin: 0
                            border-radius: 0
                            display: inline-block
                            vertical-align: top
                            text-align: center

                        button[data-active='false']
                            background: $primary
                            svg
                                fill: $secondary

                        button[data-active='true']
                            background: $tertiary
                            svg
                                fill: $primary

                    #featured-image-upload, #post-image-upload
                        display: none

        #post-feature
            width: 100%

            #featured-image-drop
                display: flex
                align-items: center
                justify-content: center
                width: 100%
                min-height: 200px
                background: color.adjust($primary, $lightness: -50%)
                color: $primary
                vertical-align: middle
                font-family: $monoType

                label
                    cursor: pointer

                img
                    width: 100%
                    margin: 0
                    padding: 0

            #featured-new-image-btn
                position: absolute
                margin: 20px

                #new-feature-upload
                    padding-top: 4px
                    background: $white

                    svg
                        fill: $highlight

        #edit-post
            width: 100%
            max-width: 880px
            margin: 0 auto

            #edit-post-wrapper
                //width 98.7%
                max-width: 900px
                border-radius: 5px
                //background $primary - 10%
                margin: 40px 0 40px 0
                overflow: hidden

                pre
                    margin: 0
                    code
                        font-family: $monoType
                        padding: 5px
                        border-radius: 5px
                        line-height: 1.6em
                        font-size: 1.25em
                        color: $editorPrimary
                        word-wrap: normal
                        white-space: pre-wrap
                        line-break: normal
                        -webkit-line-break: normal
                        -o-line-break: normal
                        -moz-line-break: normal
                        display: inline-block
                        width: 100%
                        max-width: 900px
                        min-height: 200px
                        caret-color: $highlight

//Responsive
@media only screen and (max-width: 800px)
    #post-edit-index
        #post-edit-index-wrapper
            #post-header
                #post-title
                    #post-date
                        width: 37.6%

@media only screen and (max-width: 768px)
    #post-edit-index
        #post-edit-index-wrapper
            #post-header
                #post-title
                    #post-date
                        width: 43.1%

                #post-meta
                    #edit-control
                        max-width: 100%

                        button
                            width: 9.91%

@media only screen and (max-width: 640px)
    #post-edit-index
        #post-edit-index-wrapper
            #post-header
                #post-title
                    #post-date
                        width: 42%

@media only screen and (max-width: 480px)
    #post-index
        #post-index-wrapper
            #post-index-header
                #post-index-header-left
                    font-size: 1.35em
                    width: 30%
                #post-index-header-right
                    width: 70%
                    vertical-align: top
            #post-index-menu
                a
                    font-size: 0.95em

                    label
                        display: none
                        visibility: hidden

    #post-edit-index
        #post-edit-index-wrapper
            #post-header
                #post-title
                    #post-options
                        margin: 5px 0 0 0
                        width: 100%
                        padding: 0

                    #post-date
                        width: 89.2%

                #post-meta
                    #edit-control
                        button
                            width: 9.91%

@media only screen and (max-width: 320px)
    #post-index
        #post-index-wrapper
            #post-index-menu
                a
                    font-size: 0.95em

                    label
                        display: none
                        visibility: hidden

    #post-edit-index
        #post-edit-index-wrapper
            #post-header
                #post-title
                    #post_title
                        width: 96.4%

                    #post-options
                        margin: 5px 0 0 0
                        width: 100%
                        padding: 0

                    #post-date
                        width: 83.1%

                #post-meta
                    #post_tags
                        width: 96.4%

                    #edit-control
                        .content-editor-btn-icon
                            svg.icons
                                width: 20px

                        .post-sumbit-btn
                            svg.icons
                                width: 20px

                        button
                            width: 10%
