.info-container
    padding: 0.5rem 0 0.5rem 0.5rem

    width: 27rem
    height: 100vh

    position: absolute
    top: 0
    left: 0

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

    background-image: linear-gradient(90deg, $bg-transparent, transparent)

    overflow-y: auto
    z-index: +4
    transition: left 0.3s cubic-bezier(0.76, 0, 0.17, 1)
    -ms-overflow-style: none
    scrollbar-width: none
    &::-webkit-scrollbar
        display: none

    &.collapsed
        left: -27rem

.info-tab
    width: 100%

    display: flex
    flex-direction: column

    position: relative

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

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

    &.collapsed
        height: 2.5rem

        .collapse-indicator
            transform: rotate(90deg)

        .info-header
            border-radius: $rad

        .info-table
            display: none

.collapse-indicator
    margin: 0
    padding: 0
    
    position: absolute
    top: 0.6rem
    right: 0.6rem

    background-color: transparent
    color: RGB($primary)
    border: none

    z-index: +2

    transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
    cursor: pointer

    > i
        font-size: 1.1rem
        color: RGB($primary)

.info-header
    padding: 0.5rem

    width: 100%
    height: 2.5rem

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

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

    > i
        font-size: 1.25rem
        color: RGB($primary)

    h2
        margin: 0

        font-size: 1.1rem
        font-weight: 500

        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: 400

        text-overflow: ellipsis
        overflow: hidden

    .link
        margin: 0
        padding: 0

        color: RGB($primary)

        cursor: pointer
        text-decoration: none

        &:hover
            text-decoration: underline

    table
        margin: 0
        padding: 0

        width: 100%

        overflow-x: hidden
        border-collapse: collapse

        tr
            white-space: nowrap

            td
                padding-bottom: 0.5rem

                max-width: 0

                font-size: 1rem
                font-weight: 400

                vertical-align: top

            td:first-child
                padding-right: 0.5rem

                width: 50%

                overflow: hidden
                text-overflow: ellipsis
                white-space: nowrap
            td:last-child
                width: 50%

                white-space: normal
                word-break: break-word

        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: $rad-inner
        // border: 1px solid RGB($white)

.img-groups
    width: 100%
    display: flex
    flex-wrap: wrap
    gap: 0.5rem

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

        width: 100%
        height: 100%

        position: relative       

        &.collapsed
            left: unset

    .info-container
        background: transparent