.upload-panel
    position: fixed
    left: 3.5rem
    bottom: 0

    display: none

    width: calc(100% - 3.5rem)
    height: 100vh

    background-color: rgba($black, 0)

    overflow: hidden
    z-index: 68
    transition: background-color 0.25s cubic-bezier(0.76, 0, 0.17, 1)

    h3
        margin: 0
        padding: 0

        font-size: 1.5rem
        font-weight: 600

        color: $white

    p
        margin: 0
        padding: 0

        font-size: 1rem
        font-weight: 500

        color: $white

    form
        margin: 0
        padding: 0

        width: 100%

        display: flex
        flex-direction: column
        align-items: center
        gap: 0.5rem

        input
            margin: 0
            padding: 0.5rem 1rem

            width: 100%
            height: 2.5rem

            font-size: 1rem
            font-weight: 600

            color: $white
            background-color: $black2

            border: none
            border-radius: $rad-inner

            &::placeholder
                color: $white
        
        button
            margin: 0
            padding: 0.5rem 1rem

            width: 100%
            height: 2.5rem

            font-size: 1rem
            font-weight: 600

            color: $white
            background-color: $primary

            border: none
            border-radius: $rad-inner
            cursor: pointer

            &:hover
                background-color: $black2
                color: $primary

    .click-off
        position: absolute
        top: 0
        left: 0

        width: 100%
        height: 100%

        z-index: +1


    .container
        padding: 0.5rem

        position: absolute
        bottom: 0
        left: -400px

        width: 400px
        height: 100%

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

        background-color: $black
        opacity: 0

        z-index: +2

        transition: left 0.25s cubic-bezier(0.76, 0, 0.17, 1), bottom 0.25s cubic-bezier(0.76, 0, 0.17, 1), opacity 0.25s cubic-bezier(0.76, 0, 0.17, 1)

    .upload-jobs
        display: flex
        flex-direction: column
        gap: 0.5rem

        border-radius: $rad

        overflow-y: auto
    
        .job
            width: 100%
            height: 5rem
            min-height: 5rem

            position: relative

            display: flex
            align-items: center
            gap: 0.5rem

            background-color: $black2
            border-radius: $rad

            overflow: hidden

            img
                position: absolute
                top: 0
                left: 0

                width: 100%
                height: 5rem

                object-fit: cover

            .img-filter
                position: absolute
                top: 0
                left: 0

                width: 100%
                height: 100%

                background-image: linear-gradient(to right, rgba($black, 0.8), rgba($black, 0))

            .job__status
                margin: 0
                padding: 0

                position: absolute
                top: 0.5rem
                left: 0.5rem

                font-size: 1rem
                font-weight: 600

                color: $white

                z-index: +3

                transition: color 0.25s cubic-bezier(0.76, 0, 0.17, 1)

            .progress
                width: 100%
                height: $rad-inner

                position: absolute
                bottom: 0
                left: -100%

                background-color: $primary

                animation: uploadingLoop 1s cubic-bezier(0.76, 0, 0.17, 1) infinite

                z-index: +5
                transition: left 1s cubic-bezier(0.76, 0, 0.17, 1)

            &.critical
                .job__status, .progress
                    color: $critical
            &.success
                .job__status
                    color: $success
                .progress
                    height: 0
                    animation: none
            &.warning
                .job__status, .progress
                    color: $warning

            &.critical, &.success, &.warning
                .progress
                    height: 0

    &.open
        background-color: rgba($black, 0.5)

        .container
            left: 0
            opacity: 1

@media (max-width: $breakpoint)
    .upload-panel
        width: 100%
        height: calc(100vh - 3.5rem)

        left: 0
        bottom: 3.5rem

        .container
            padding: 1rem
            
            width: 100%
            height: calc(100% - 10rem)
            
            left: 0
            bottom: calc(-100vh + 3.5rem)

            border-radius: $rad $rad 0 0

        &.open
            .container
                left: 0
                bottom: 0