@import colors

.post-list
    ul
        list-style-type: none
        padding: 0
        display: flex
        align-content: flex-end
        flex-wrap: wrap
        margin: 0 -1.5em
        @media (max-width: 1000px)
            margin: 0 -1em

        li
            position: relative
            flex-grow: 1
            display: inline-block
            text-align: left
            min-width: 8em
            width: 12vw
            &:not(.flexbox-dummy)
                min-height: 8em
                height: 12vw

            .thumbnail-wrapper
                display: inline-block
                width: 100%
                height: 100%
                line-height: 80%
                font-size: 80%
                color: white
                outline-offset: -3px
                box-shadow: 0 0 0 1px rgba(0,0,0,0.2)

                .type, .stats
                    position: absolute
                    bottom: 0.5em
                    padding: 0.33em 0.5em
                    background: rgba(0,0,0,0.5)
                    height: 1em

                .type
                    float: left
                    left: 0.5em
                    &[data-type=image]
                        display: none

                .stats
                    float: right
                    right: 0.5em
                    text-align: right
                    i
                        margin-right: 0.25em
                    .icon:not(:first-of-type)
                        margin-left: 1em

            .edit-overlay
                position: absolute
                top: 0.5em
                left: 0.5em

                .tag-flipper
                    display: inline-block
                    padding: 0.5em
                    box-sizing: border-box
                    border: 0
                    &:after
                        display: inline-block
                        width: 1em
                        height: 1em
                        text-align: center
                        line-height: 1em
                        font-size: 2.2em
                    &.tagged
                        background: rgba(0, 230, 0, 0.7)
                        &:after
                            color: white
                            content: '-'
                    &:not(.tagged)
                        background: rgba(255, 0, 0, 0.7)
                        &:after
                            color: white
                            content: '+'
                    &[data-disabled]
                        background: rgba(200, 200, 200, 0.7)

                .relation-flipper
                    display: inline-block
                    padding: 0.5em
                    box-sizing: border-box
                    border: 0
                    &:after
                        display: inline-block
                        width: 1em
                        height: 1em
                        text-align: center
                        line-height: 1em
                        font-size: 1.6em
                    &.related
                        background: rgba(0, 230, 0, 0.7)
                        &:after
                            color: white
                            content: '☑'
                    &:not(.related)
                        background: rgba(245, 0, 0, 0.7)
                        &:after
                            color: white
                            content: '☐'
                    &[data-disabled]
                        background: rgba(200, 200, 200, 0.7)

                .safety-flipper a
                    display: inline-block
                    margin: 0.1em
                    box-sizing: border-box
                    border: 0
                    display: inline-block
                    width: 1.2em
                    height: 1.2em
                    text-align: center
                    line-height: 1em
                    font-size: 1.6em
                    border: 3px solid
                    &.safety-safe
                        background-color: darken($safety-safe, 5%)
                        border-color: @background-color
                        &:not(.active)
                            background-color: alpha(@background-color, 0.3)
                    &.safety-sketchy
                        background-color: $safety-sketchy
                        border-color: @background-color
                        &:not(.active)
                            background-color: alpha(@background-color, 0.3)
                    &.safety-unsafe
                        background-color: $safety-unsafe
                        border-color: @background-color
                        &:not(.active)
                            background-color: alpha(@background-color, 0.3)
                    &[data-disabled]
                        background: rgba(200, 200, 200, 0.7)

                .delete-flipper
                    display: inline-block
                    padding: 0.5em
                    box-sizing: border-box
                    border: 0
                    &:after
                        display: inline-block
                        width: 1em
                        height: 1em
                        text-align: center
                        line-height: 1em
                        font-size: 2.2em
                    &.delete
                        background: rgba(255, 0, 0, 0.7)
                        &:after
                            color: white
                            font-family: 'Font Awesome 5 Free';
                            content: "\f1f8"; // fa-trash
                            font-weight: 900; // not visible at other weights
                    &:not(.delete)
                        background: rgba(200, 200, 200, 0.7)
                        &:after
                            color: white
                            content: '-'

            .thumbnail
                width: 100%
                height: 100%
                outline-offset: -3px
                &:not(.empty)
                    background-position: 50% 30%

            .thumbnail-wrapper.no-tags
                .thumbnail
                    outline: 4px solid $post-thumbnail-no-tags-border-color

            &:hover
                background: $post-thumbnail-border-color
                .thumbnail
                    opacity: .9

            &:hover a, a:active, a:focus
                .thumbnail
                    outline: 4px solid $main-color !important

.post-flow
    ul
        li
            min-width: inherit
            width: inherit
            &:not(.flexbox-dummy)
                height: 14vw
            .thumbnail
                outline-offset: -1px
            .thumbnail-wrapper.no-tags
                .thumbnail
                    outline: 2px solid $post-thumbnail-no-tags-border-color
            &:hover a, a:active, a:focus
                .thumbnail
                    outline: 2px solid $main-color !important

.post-list-header
    white-space: nowrap
    text-align: left

    label
        display: none !important
    form
        width: auto
        margin-bottom: 0.75em
        *
            vertical-align: top
        @media (max-width: 1000px)
            display: block
            &.bulk-edit-tags:not(.opened), &.bulk-edit-safety:not(.opened)
                float: left
                margin-right: 1em
    input
        margin-bottom: 0.25em
        margin-right: 0.25em
    input[name=search-text]
        width: 25em
        @media (max-width: 1000px)
            display: block
            width: 100%
            margin-bottom: 0.5em
    .append
        @media (max-width: 500px)
            margin-left: 0.8em
        vertical-align: middle
        font-size: 0.95em
        color: $inactive-link-color
    .bulk-edit-btn-holder, .metrics-btn-holder
        &:not(.opened)
            .close
                display: none
        &.opened
            .open
                display: none
    .metrics-block
        &.hidden
            display: none
        label
            display: inline !important
            margin-left: -0.5em
            line-height 1.7em
        a.append
            line-height 1.7em
            padding: 0.2em 0
        form, ul
            display: flex
            flex-wrap: wrap
        .metric-list
            li
                display: inline-block
                line-height: 1.7em
                margin-right: 0.5em
                @media (max-width: 700px)
                    margin-bottom: 0.5em
                border-width: 1px
                &.selected
                    border-style: solid
                    &.tag-default
                        background-color: $main-color
                &:not(.selected)
                    border-style: dotted
                    &.tag-default
                        border-color: $main-color
            li a
                vertical-align: middle
                padding: 0.2em 0.5em
    .bulk-edit-block
        &.hidden
            display: none
        form
            &:not(.opened)
                display: inline-block
            &.opened
                display: block
        input[type=submit]
            margin-right: 1em
        .append
            margin-left: 0
            margin-right: 1em
        .bulk-edit
            &:not(.opened)
                .close
                    display: none
            &.opened
                .open
                    display: none
            &.hidden
                display: none
        .bulk-edit-tags
            &.opened
                .hint
                    @media (max-width: 1000px)
                        display: block
                        margin-bottom: 0.5em
            &:not(.opened)
                [type=text],
                .start
                    display: none
                .hint
                    display: none
            input[name=tag]
                width: 12em
                @media (max-width: 1000px)
                    display: block
                    width: 100%
                    margin-bottom: 0.5em
            .hint
                margin-right: 1em

            @media (max-width: 1000px)
                margin-left: 0
    .bulk-edit-delete
        &.opened
            .start
                @media (max-width: 1000px)
                    margin-left: 0
        &:not(.opened)
            .start
                display: none
        .append.open
            @media (max-width: 1000px)
                margin-left: 0
        .start
            margin-left: 1em
    .safety
        margin-right: 0.25em
        &.safety-safe
            background-color: $safety-safe
            border-color: @background-color
            &.disabled
                background-color: alpha(@background-color, 0.15)
        &.safety-sketchy
            background-color: $safety-sketchy
            border-color: @background-color
            &.disabled
                background-color: alpha(@background-color, 0.15)
        &.safety-unsafe
            background-color: $safety-unsafe
            border-color: @background-color
            &.disabled
                background-color: alpha(@background-color, 0.15)

    .icon-button
        padding: 0.2em
        margin-right: 0.25em
        margin-bottom: 0.25em
        i
            vertical-align: middle
    .icon-inline
        vertical-align: baseline
        margin-left: 0.3em