.fullscreen-viewer
    width: 100%
    height: 100%
    position: fixed
    top: 0px
    left: 0px
    background-color: rgba(40, 40, 40, 0.7)
    display: flex
    flex-direction: row
    align-items: center
    justify-content: center

    .center
        box-sizing: border-box
        width: 600px
        max-width: 100%
        max-height: 80%
        overflow-y: auto
        background-color: $primary
        color: $font
        border: $primary 2px solid
        border-radius: 10px
        display: flex
        flex-direction: column
        align-items: stretch
        justify-content: stretch

        img
            transition: opacity 0.5s
            width: 60%

        .button
            background-color: $primary
            color: $secondary
            display: flex
            vertical-align: center
            align-items: center
            justify-content: center
            flex-direction: row
            padding: 10px
            border-radius: 10px
            border: none
            gap: 5px
            margin: 5px
            transition: transform 0.5s

            &:hover
                transform: scale(1.1)

        .result
            background-color: $background

        .content
            box-sizing: border-box
            width: 100%
            background-color: $background
            min-height: 100px
            padding: 10px
            display: flex
            flex-direction: column
            gap: 10px
            align-items: center
            justify-content: center
       
            .input-container
                box-sizing: border-box
                width: 100%
                display: flex
                flex-direction: row
                flex-wrap: wrap
                justify-content: space-between
                align-items: center
                gap: 10px

                input
                    padding: 5px
                    border-radius: 5px
                    color: $background
                    background-color: $font
                    border: $primary 2px solid
                    transition: transform 0.5s
                    max-width: 300px

                    &:focus
                        transform: scaleX(1.1)
                        outline: 0 !important

        .result
            padding: 10px
            min-height: 1.2em

            .error, .success, .info
                margin: 0px
                text-align: center

            .error
                color: red

            .success
                color: lightgreen

            .info
                color: $font

        .title h3
            color: $background
            text-align: center

        .bottom
            box-sizing: border-box
            padding: 10px
            display: flex
            flex-direction: row
            align-items: center
            justify-content: center
            gap: 10px

            .close, .send
                padding: 10px
                border-radius: 10px
                transition: transform 0.5s
                border: none

            .close
                background-color: red
                color: white
    
            .send
                background-color: $background
                color: $primary

            .close:hover
                transform: rotate(30deg)

            .send:hover
                transform: scale(1.2)

.product-fullscreen-viewer
    .close
        position: fixed
        top: 30px
        right: 30px
        padding: 10px
        border-radius: 10px
        border: none
        background-color: red
        color: white
        transition: transform 0.5s

        &:hover
            transform: rotate(30deg)

    .image
        width: 100%
        height: 100%
        position: absolute
        top: 0px
        left: 0px
        background-repeat: no-repeat
        background-size: contain
        background-position: center
        z-index: -1

    .title
        width: 100%
        position: absolute
        top: 0px
        left: 0px
        background-color: $primary
        border-radius: 0px 0px 10px 10px

        h1
            color: $secondary
            padding: 10px
            text-align: center

    .bottom-side
        position: absolute
        bottom: 0px
        left: 0px
        width: calc(100% - 20px)
        background-color: $font
        display: flex
        flex-direction: column
        border-radius: 10px 10px 0px 0px
        padding: 10px
        align-items: center
        justify-content: center
        vertical-align: center

        p
            color: $background

        .bottom-header, .description
            width: calc(100% - 40px)
            max-width: 500px
            margin-left: 20px
            margin-right: 20px

        .bottom-header
            display: flex
            flex-direction: row
            justify-content: space-between
            vertical-align: center
            align-items: center

            p
                display: flex
                flex-direction: row
                vertical-align: center
                align-items: center

                span
                    display: block

                    &:last-child
                        margin-left: 5px

.login-prompt, .product-adder
    display: flex
    vertical-align: center
    align-items: center
    justify-content: center
    flex-direction: column

    .center
        padding: 20px
        border-radius: 10px
        border: 2px solid $primary
        background-color: $secondary
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        
        input
            border: $background 2px solid
            padding: 10px 5px
            border-radius: 10px
            color: $background
            background-color: $dark
            transition: transform 0.5s
            margin-bottom: 20px

            &:focus
                transform: scale(1.1)
                outline: 0 !important

        button
            border: $primary 2px solid
            padding: 10px 15px
            border-radius: 10px
            background-color: $secondary
            color: $primary
            transition: transform 0.5s

            &:hover
                transform: scale(1.2)

        label
            color: $primary
            margin-bottom: 5px