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

    display: none

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

    background-color: transparent

    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: 700

        color: RGB($primary)

    p
        margin: 0
        padding: 0

        font-size: 1rem
        font-weight: 500

        color: RGB($fg-white)

    form
        margin: 0
        padding: 0

        width: 100%

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

        input, button
            width: 100%

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

        width: 100%
        height: 100%

        z-index: +1

    .container
        padding: 1rem

        position: absolute
        bottom: 0
        left: -400px

        width: 400px
        height: 100%

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

        background-color: RGB($bg-200)
        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)

        #dragIndicator
            display: none

            position: absolute
            top: 0
            left: 0

            width: 100%
            height: 3rem

            z-index: +1

            &::after
                content: ''
                width: 8rem
                height: 3px

                position: absolute
                top: 0.5rem
                left: 50%
                transform: translate(-50%, -50%)

                background-color: RGB($bg-400)
                border-radius: $rad-inner

    .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: RGB($bg-200)
            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, RGB($bg-100), transparent)

            .job__status
                margin: 0
                padding: 0

                position: absolute
                top: 0.5rem
                left: 0.5rem

                font-size: 1rem
                font-weight: 600

                color: RGB($fg-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: RGB($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: RGB($critical)
            &.success
                .job__status
                    color: RGB($success)
                .progress
                    height: 0
                    animation: none
            &.warning
                .job__status, .progress
                    color: RGB($warning)

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

    &.open
        background-color: $bg-transparent

        .container
            left: 0
            opacity: 1

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

        left: 0
        bottom: 3.5rem

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

            border-radius: $rad $rad 0 0

            #dragIndicator
                display: block

        &.open
            .container
                left: 0
                bottom: 0