@import colors

.pools-grid
    display: grid
    grid-template-columns: repeat(4, 1fr)
    gap: 16px
    width: 100%
    padding: 16px
    box-sizing: border-box

    h1
        font-size: 1.5em

    .pool
        width: 100%
        aspect-ratio: 1
        display: flex
        justify-content: center
        align-items: center
        background-color: #f0f0f0
        overflow: hidden

    .pool-inner-grid
        display: grid
        grid-template-columns: repeat(2, 1fr)
        grid-template-rows: repeat(2, 1fr)
        gap: 4px
        width: 100%
        height: 100%
        position: relative
        
        div
            aspect-ratio: 1
            position: relative
            overflow: hidden

        img
            width: 100%
            height: 100%
            object-fit: cover
            position: absolute
            top: 0
            left: 0

        .pool-title
            font-weight: 900
            aspect-ratio: auto
            position: absolute
            top: 50%
            left: 50%
            transform: translate(-50%, -50%)
            background: rgba(0, 0, 0, 0.8)
            color: white
            font-size: 1.2rem
            padding: 8px 16px
            border-radius: 4px
            text-align: center
            pointer-events: none
            z-index: 1


.pool-list
    table
        width: 100%
        border-spacing: 0
        text-align: left
        line-height: 1.3em
        tr:hover td
            background: $top-navigation-color
        th, td
            padding: 0.1em 0.5em
        th
            white-space: nowrap
            background: $top-navigation-color
        .names
            width: 84%
        .post-count
            text-align: center
            width: 8%
        .creation-time
            text-align: center
            width: 8%
            white-space: pre
        ul
            list-style-type: none
            margin: 0
            padding: 0
            display: inline
            li
                padding: 0
                display: inline
                &:not(:last-child):after
                    content: ', '
        @media (max-width: 800px)
            .posts
                display: none

.darktheme .pool-list
    table
        tr:hover td
            background: $top-navigation-color-darktheme
        th
            background: $top-navigation-color-darktheme

.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