@import colors

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

        li
            position: relative
            flex-grow: 1
            margin: 2em 1.5em 2em 1.2em;
            display: inline-block
            text-align: left
            min-width: 10em
            width: 12vw
            &:not(.flexbox-dummy)
                min-height: 7.5em
                height: 9vw

            .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)

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

            .thumbnail-1
                right: -0px;
                top: -0px;
                z-index: 30;

            .thumbnail-2
                right: -10px;
                top: -10px;
                z-index: 20;

            .thumbnail-3
                right: -20px;
                top: -20px;
                z-index: 10;

            .pool-name
                color: black
                font-size: 1em
                text-align: center
                a
                    width: 100%
                    display: inline-block

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

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

.pool-list-header
    label
        display: none !important
    text-align: left
    form
        width: auto
    input[name=search-text]
        width: 25em
        @media (max-width: 1000px)
            width: 100%
    .append
        vertical-align: middle
        font-size: 0.95em
        color: $inactive-link-color

.darktheme .pool-list-header
    .append
        color: $inactive-link-color-darktheme

.post-flow
    ul
        li
            min-width: inherit
            width: inherit
            margin: 0 0.25em 0.5em 0.25em
            &:not(.flexbox-dummy)
                height: 14vw
            .thumbnail
                position: static
                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