.image-wrapper
    padding: 0

    display: grid
    grid-template-areas: 'info image' 'info tools'
    grid-template-columns: 25rem 1fr
    grid-template-rows: 1fr auto
    gap: 0

    height: 100vh

.image-fullscreen
    margin: 0
    padding: 0 0 0 3.5rem

    width: 100%
    height: 100dvh

    position: fixed
    top: -100%
    left: 0

    display: flex
    opacity: 0 // hide

    background-color: rgba($black, 0.8)
    backdrop-filter: blur(1rem)
    z-index: 21

    box-sizing: border-box

    img
        margin: auto
        padding: 0

        width: auto
        height: auto
        max-width: 100%
        max-height: 100%

        object-fit: contain
        object-position: center

        transform: scale(0.8)

.image-fullscreen__active
    top: 0

    opacity: 1 // show

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

    img
        transform: scale(1)
        transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
.image-fullscreen__hide
    opacity: 0 // hide

    transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)

    img
        transform: scaleY(0) // scale(0.8) 
        transition: transform 0.2s ease

.image-container
    margin: auto
    padding: 0.5rem

    width: 100%
    height: 100%

    display: flex
    overflow: hidden

    grid-area: image

    img
        margin: auto
        padding: 0

        width: auto
        height: auto
        max-width: 100%
        max-height: 100%

        object-fit: contain
        object-position: center

.image-info__container
    margin: 0
    padding: 0

    width: 100%
    height: 100%

    display: flex
    flex-direction: column

    background-color: $black

    overflow-y: auto

    grid-area: info

.image-info
    margin: 0
    padding: 0

    width: 100%

    display: flex
    flex-direction: column

    position: relative

    background-color: $black
    border-radius: $rad

.image-info__collapse
    margin: 0
    padding: 0

    width: 1.25rem
    height: 1.25rem

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

    position: absolute
    top: 0.6rem
    right: 0.6rem

    cursor: pointer
    z-index: +2

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

    svg
        margin: 0
        padding: 0

        fill: $primary

.image-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-image: linear-gradient(to right, rgba($black2, 1), rgba($black, 1))

    svg
        margin: 0
        padding: 0

        width: 1.25rem
        height: 1.25rem

        fill: $primary

    h2
        margin: 0
        padding: 0

        font-size: 1.25rem
        font-weight: 600

        color: $primary

        text-overflow: ellipsis
        overflow: hidden

.image-info__content
    margin: 0
    padding: 0.5rem

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

    color: $white

    overflow-x: hidden

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

    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

.image-info__collapsed
    height: 2.5rem

    .image-info__collapse
        transform: rotate(90deg)

    .image-info__content
        padding: 0
        opacity: 0

#image-tools
    margin-bottom: 0.5rem

    grid-area: tools

@media (max-width: 1100px)
    .image-wrapper
        padding: 0.5rem

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

        height: auto

    .image-container
        margin: 0 auto
        padding: 0

        max-height: 69vh

        img
            max-height: 69vh

    #image-tools
        margin: 0

    .image-info__container
        margin: 0
        padding: 0

        width: 100%
        height: auto

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

        background: none

    .image-info__container
        border-radius: $rad

    .image-info__header
        border-radius: $rad $rad 0 0

    .image-info__collapsed
        .image-info__header
            border-radius: $rad

@media (max-width: $breakpoint)
    .image-fullscreen
        padding: 0 0 3.5rem 0

    .image-wrapper
        padding-bottom: 4rem

    .image-info__header
        background-image: none
        background-color: $black2