Reservationer/application/theme/fullscreen.sass

.fullscreen-viewer
    width: 100%
    height: 100%
    position: fixed
    top: 0px
    left: 0px
    background-color: rgba(40, 40, 40, 0.7)

    .close
        position: absolute
        top: 30px
        right: 30px
        padding: 10px
        border-radius: 10px
        color: red
        border: red 2px solid
        background-color: rgba(0, 0, 0, 0)
        transition: transform 0.5s

        &:hover
            transform: scale(1.2)

.product-fullscreen-viewer
    .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
        color: $background
        display: flex
        flex-direction: column
        border-radius: 10px 10px 0px 0px
        padding: 10px
        align-items: center
        justify-content: center
        vertical-align: center

        .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