.pop-up
    width: 100%
    height: 100vh

    position: fixed
    inset: 0

    display: none

    background-color: var(--background-shade)
    opacity: 0

    z-index: 101
    transition: opacity 0.2s ease

    .pop-up__click-off
        width: 100%
        height: 100vh

        position: absolute
        top: 0
        left: 0

        z-index: +1

    .pop-up-wrapper
        margin: 0
        padding: 1rem

        width: 460px
        height: auto

        position: absolute
        bottom: 50%
        left: 50%
        transform: translate(-50%, 50%) scale(0.8)

        display: flex
        flex-direction: column

        background-color: var(--background-400)
        border-radius: var(--rad)
        overflow: hidden

        z-index: +2
        transition: transform 0.2s var(--animation-bounce)

    .pop-up-header
        margin: 0 0 0.5rem 0
        padding: 0

        width: 100%
        height: auto

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

        overflow-y: auto
        overflow-x: hidden
        text-size-adjust: auto
        text-overflow: ellipsis

        h2, h3
            margin: 0

            width: 100%

            position: sticky
            top: 0

            font-size: 1.5rem
            font-weight: 700
            text-align: left

            color: var(--foreground-white)
        
        p
            margin: 0

            width: 100%

            font-size: 1rem
            font-weight: 400
            text-align: left

            color: var(--foreground-white)

            svg
                width: 1rem
                height: 1rem

                display: inline-block
                vertical-align: middle

        a, .link
            color: var(--primary)

            cursor: pointer
            text-decoration: none

            &:hover
                text-decoration: underline

        form
            margin: 0
            padding: 0

            width: 100%
            height: auto

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

            justify-content: center

    .pop-up-controlls
        margin: 0
        padding: 0

        width: 100%
        height: auto

        display: flex
        flex-direction: row
        justify-content: flex-end
        gap: 0.5rem

    &.active
        opacity: 1

        .pop-up-wrapper
            transform: translate(-50%, 50%) scale(1)

@media (max-width: 800px)
    .pop-up
        .pop-up-wrapper
            max-width: calc(100% - 0.75rem)
            max-height: 95vh

        .pop-up-content
            max-height: 100%

            img 
                max-height: 50vh

        .pop-up-controlls
            button
                width: 100%
    
        &.active
            opacity: 1