@mixin pop-up-btn($color, $fill: false)
    @if $fill
        color: $white
        background-color: $color
        border: 2px solid $color

        &:hover
            background-color: $white
            color: $color
    @else
        color: $color
        background-color: $white
        border: 2px solid $color

        &:hover
            background-color: $color
            color: $white
    
.pop-up
    width: calc(100% - 3.5rem)
    height: 100vh

    position: fixed
    top: 100%
    left: 3.5rem

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

    opacity: 0
    z-index: 101

    transition: opacity 0.2s ease

.pop-up__click-off
    width: 100vw
    height: 100vh
    height: 100dvh

    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: $white
    border-radius: $rad

    overflow: hidden

    transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
    z-index: +2

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

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

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

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

    h3
        margin: 0

        width: 100%

        position: sticky
        top: 0

        font-size: 2.5rem
        font-weight: 600
        text-align: center
        line-height: 1

        color: $black
        background-color: $white
    
    p
        margin: 0

        width: 100%

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

        color: $black

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

    width: 100%
    height: auto

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

.pop-up__btn
    margin: 0
    padding: 0.5rem 1rem

    width: auto
    height: 2.5rem

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

    font-size: 1rem
    font-weight: 600
    text-align: center
    line-height: 1

    border-radius: $rad-inner

    cursor: pointer
    transition: background-color 0.2s ease, color 0.2s ease

    @include pop-up-btn($black)

    &:focus
        outline: none
.pop-up__btn-fill
    @include pop-up-btn($black, true)

@each $name, $colour in (primary: $primary, info: $info, warning: $warning, critical: $critical)
    .pop-up__btn-#{$name}
        @include pop-up-btn($colour)
    .pop-up__btn-#{$name}-fill
        @include pop-up-btn($colour, true)

.pop-up__input
    margin: 0
    padding: 0.5rem

    width: 100%
    height: 2.5rem

    font-size: 1rem
    font-weight: 600
    text-align: left
    line-height: 1

    border-radius: $rad-inner

    background-color: $white
    border: 2px solid $black

    &:focus
        outline: none
        border-color: $primary

.pop-up__link
    color: $primary
    text-decoration: none

    &:hover
        text-decoration: underline
        cursor: pointer

.pop-up__active
    opacity: 1
    top: 0

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

.pop-up__hide
    opacity: 0
    transition: opacity 0.2s ease

    .pop-up-wrapper
        transform: translate(-50%, 50%) scaleY(0)
        transition: transform 0.2s ease

@media (max-width: $breakpoint)
    .pop-up
        width: 100%
        height: 100vh
        height: 100dvh

        position: fixed
        left: 0
        bottom: 0

        backdrop-filter: blur(0.5rem)

    .pop-up-wrapper
        width: calc(100vw - 1rem)
        max-height: calc(100vh - 1rem)
        max-height: calc(100dvh - 1rem)

        left: 0.5rem
        bottom: 0.5rem

        border-radius: $rad
        transform: translateY(5rem)

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

        img 
            max-height: 50vh

    .pop-up-controlls
        flex-direction: column
        justify-content: center

    .pop-up__btn
        width: 100%
    
    .pop-up__active
        opacity: 1
        top: unset

        .pop-up-wrapper
            transform: translateY(0)

    .pop-up__hide
        opacity: 0
        transition: opacity 0.2s ease

        .pop-up-wrapper
            transform: translateY(5rem)
            transition: transform 0.2s ease