.info-container
    width: 100%
    height: 100%

    display: flex
    flex-direction: column
    gap: 0

    background-color: RGB($bg-200)

    overflow-y: auto

.info-tab
    width: 100%
    max-height: 100%

    display: flex
    flex-direction: column

    position: relative

    background-color: RGB($bg-200)
    border-radius: $rad

    transition: max-height 0.3s cubic-bezier(.79, .14, .15, .86)

    &.collapsed
        height: 2.5rem

        .collapse-indicator
            transform: rotate(90deg)

        .info-table
            padding: 0
            opacity: 0

.collapse-indicator
    width: 1.25rem
    height: 1.25rem

    position: absolute
    top: 0.6rem
    right: 0.6rem

    color: RGB($primary)

    z-index: +2

    transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
    user-select: none

.info-header
    margin: 0
    padding: 0.5rem

    width: 100%
    height: 2.5rem

    display: flex
    justify-content: start
    align-items: center
    gap: 0.5rem

    position: sticky
    top: 0
    z-index: +1

    background-color: RGB($bg-200)

    svg
        margin: 0
        padding: 0

        width: 1.25rem
        height: 1.25rem

        fill: RGB($primary)

    h2
        margin: 0
        padding: 0

        font-size: 1.1rem
        font-weight: 600

        color: RGB($primary)

        text-overflow: ellipsis
        overflow: hidden

.info-table
    margin: 0
    padding: 0.5rem

    display: flex
    flex-direction: column
    gap: 1rem

    color: RGB($fg-white)

    overflow-x: hidden

    p
        margin: 0
        padding: 0

        font-size: 1rem
        font-weight: 500

        text-overflow: ellipsis
        overflow: hidden

    table
        margin: 0
        padding: 0

        max-width: 100%

        overflow-x: hidden
        border-collapse: collapse

        tr
            margin: 0
            padding: 0

            width: 100%

            white-space: nowrap

            td
                padding-bottom: 0.5rem

            td:first-child
                padding-right: 0.5rem

                width: 50%
                max-width: 0

                overflow: hidden
                text-overflow: ellipsis
                white-space: nowrap

                font-size: 1rem
                font-weight: 500
            td:last-child
                padding: 0

                width: 50%
                max-width: 0

                overflow: hidden
                text-overflow: ellipsis
                white-space: nowrap

                font-size: 1rem
                font-weight: 500

            td.empty-table
                opacity: 0.3

        tr:last-of-type td
            padding-bottom: 0

.img-colours
    width: 100%

    display: flex
    gap: 0.5rem

    span
        margin: 0
        padding: 0

        width: 1.5rem
        height: 1.5rem

        display: flex
        justify-content: center
        align-items: center

        border-radius: 50%
        border: 1px solid RGB($white)

.img-groups
    width: 100%

    display: flex
    gap: 0.5rem

@media (max-width: 1100px)
    .info-container
        gap: 0.5rem