@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: none
                border-right: 20px solid transparent
                &:before
                    content: ' '
                    display: block
                    position: relative
                    width: 100%
                    height: 20px
                    bottom: 20px

            .thumbnail
                width: 100%
                height: 100%
                outline-offset: -2px
                background-size: cover
                transition: top .1s ease-in-out, right .1s ease-in-out
                background-position: 50% 30%
                position: absolute
                display: inline-block
                box-shadow: 0 0 0 1px rgba(0,0,0,0.2)

            .thumbnail-1, .thumbnail.empty
                right: -4px
                top: -4px
                z-index: 30

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

            .thumbnail-3
                right: -16px
                top: -16px
                z-index: 10

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

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

.pool-list ul li:hover
    .thumbnail-wrapper
        .thumbnail-1
            right: -0px
            top: -0px

        .thumbnail-3
            right: -20px
            top: -20px

.pool-list ul li:has(a:focus), .pool-list ul li:has(a:active)
    .thumbnail-wrapper
        .thumbnail-1
            right: -0px
            top: -0px

        .thumbnail-3
            right: -20px
            top: -20px

.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