@import colors

.post-list
    ul
        list-style-type: none
        margin: 0
        padding: 0
        display: flex
        align-content: flex-end
        flex-wrap: wrap
        margin: 0 -0.25em

        li
            position: relative
            flex-grow: 1
            margin: 0 0.25em 0.5em 0.25em
            display: inline-block
            text-align: left
            min-width: 10em
            width: 15vw
            &:not(.flexbox-dummy)
                min-height: 7.5em
                height: 11.25vw

            a
                display: inline-block
                width: 100%
                height: 100%
                line-height: 100%
                font-size: 80%
                color: white
                outline-offset: -3px

                .type
                    position: absolute
                    left: -1px
                    bottom: -1px
                    padding: 1em 4em 0.5em 0.5em
                    background-image: radial-gradient(
                        ellipse 100% 100% at bottom left,
                        rgba(0,0,0,0.5),
                        rgba(0,0,0,0));
                    &[data-type=image]
                        display: none

                .stats
                    position: absolute
                    right: -1px
                    bottom: -1px
                    text-align: right
                    /*padding: 0.5em
                    background: rgba(0,0,0,0.5);*/
                    padding: 1em 0.5em 0.5em 4em
                    background-image: radial-gradient(
                        ellipse 100% 100% at bottom right,
                        rgba(0,0,0,0.5),
                        rgba(0,0,0,0));
                    i
                        margin-right: 0.5em
                    .icon:not(:first-of-type)
                        margin-left: 1em

            .thumbnail
                border: 1px solid $inactive-link-color
                background-position: 50% 30%
                width: 100%
                height: 100%
                margin: 0
                outline-offset: -3px
            &:hover
                background: $main-color
                .thumbnail
                    opacity: .9
                    border: 1px solid $main-color
                a, .thumbnail
                    outline: 2px solid $main-color

.post-list-header
    text-align: left
    form
        width: auto
    input[name=search-text]
        width: 25em
        max-width: 90vw
    .append
        font-size: 0.95em
        color: $inactive-link-color

    .safety
        border-color: lighten(saturation($main-color, 0%), 20%)
        &.safety-safe
            background: #97CF97
        &.safety-sketchy
            background: #E7E78D
        &.safety-unsafe
            background: #F2B48C
        &.disabled
            opacity: .2

.post-container
    text-align: center
    .post-content
        text-align: left
        margin: 0 auto
        max-height: 100%
        max-width: 100%
        object-fit: contain
        position: relative

        img, object, video, .post-overlay
            position: absolute
            height: 100%
            width: 100%
            left: 0
            right: 0
            top: 0
            bottom: 0

        .post-overlay>*
            position: absolute
            left: 0
            right: 0
            top: 0
            bottom: 0
            width: 100%
            height: 100%

        .notes
            stroke-width: 1px
            polygon
                fill: $note-overlay-background-color
                stroke: $note-overlay-border-color

.note-text
    position: absolute
    max-width: 22.5em
    margin-top: -0.5em
    display: none

    &>.wrapper
        background: $note-text-background-color
        padding: 0.5em
        border: 1px solid $note-text-border-color
        color: $note-text-text-color
        margin-top: 1em

        p:last-of-type
            margin-bottom: 0
        p:first-of-type
            margin-top: 0