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

    position: fixed
    inset: 0

    display: none

    background-color: $bg-transparent
    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: 0

        width: 621px
        height: auto

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

        display: flex
        flex-direction: column

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

        z-index: +2
        transition: transform 0.2s $animation-smooth

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

        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: 800
            text-align: center

            color: RGB($fg-white)
        
        p
            margin: 0

            width: 100%

            font-size: 1rem
            font-weight: 500
            text-align: center

            color: RGB($fg-white)

            svg
                width: 1rem
                height: 1rem

                display: inline-block
                vertical-align: middle

        a, .link
            font-size: 1rem
            font-weight: 500
            text-align: center
            line-height: 1

            color: RGB($primary)

            cursor: pointer
            text-decoration: none

            &:hover
                text-decoration: underline

        img
            margin: auto
            padding: 0

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

            border-radius: $rad-inner

        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.25rem

        width: 100%
        height: auto

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

        background-color: RGB($bg-100)

    &.active
        opacity: 1

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

@media (max-width: $breakpoint)
    .pop-up
        .pop-up-wrapper
            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