@import "../../css/sass/variables"
@import "../../css/sass/mixins"
@import "../../css/sass/media"

.upload-files
    +flex-box
    +flex-wrap(wrap)
    padding: 0 2px

    &:not(:empty)
        margin-top: $spacer * 4

    > div
        +flex-box
        margin-bottom: 20px

        &.suspend
            span.item
                box-shadow: 0 0 0 $alt-box-bg-border-width $color-attention-soft

        &.ui-sortable-helper
            nav.icons
                visibility: hidden

        &.video span.item
            &:before,
            &:after
                content: ''
                position: absolute
                top: 50%
                left: 50%
                z-index: 1

            &:before
                width: 46px
                height: 46px
                background: rgba(255,255,255,.5)
                border-radius: 50%
                margin-left: -23px
                margin-top: -23px

            &:after
                width: 0
                height: 0
                border-style: solid
                border-width: 10px 0 10px 17.3px
                border-color: transparent transparent transparent rgba(0,0,0,.5)
                margin-left: -7px
                margin-top: -10px

        &.video img.icon.crop
            display: none

        &:not(.template-upload) span.item
            cursor: move

        > span 
            +flex-box
            +flex-direction(column)
            +flex(1, 1, 100%)

        span.item
            width: 100%
            padding-bottom: 66%
            position: relative
            background: $color-alt-box-bg

            > img,
            > canvas,
            > video
                position: absolute
                display: block
                width: 100%
                height: 100%
                object-fit: cover

            > video
                object-fit: contain

            &.preview
                position: relative

            > .progress
                height: 15px
                width: 100%
                position: absolute
                opacity: .5
                left: 0
                bottom: 0
                z-index: 1

                > .progress-bar
                    width: 0%
                    height: 100%
                    display: block
                    background: $color-main
                    transition: width 0.2s ease

            > .prepare
                +flex-box
                +flex-grow(1)
                +justify-content(center)

            > div.error
                padding: 5px 10px
                border: $alt-box-bg-border-width solid $color-attention-soft

                > span
                    color: $color-error-text

                    &:after
                        content: ':'

    /* item navigation */
    nav
        height: 20px
        margin-top: 7px
        position: relative
        text-align: #{$space-opposite}

        &.loading
            &:after
                content: attr(data-loading)
                position: absolute
                text-align: center
                width: 100%
                height: 100%
                left: 0
                top: -3px

            > *
                visibility: hidden

        > *
            vertical-align: top
            margin-#{$left}: 5px

.listing-fit-contain .upload-files div span.item > *
    object-fit: contain !important

.upload-zone
    +flex-box
    height: 110px
    background: $upload-zone-bg-color
    border: $upload-zone-border-width $upload-zone-border-color $upload-zone-border-style
    position: relative
    overflow: hidden
    @if $alt-box-radius > 0
        border-radius: $alt-box-radius

    &.in
        background: $upload-zone-in

    &.in.hover
        background: $upload-zone-in-hover

    input
        width: 100%
        height: 250px
        position: absolute
        top: -30px
        right: 0
        bottom: 0
        left: 0
        opacity: 0
        cursor: pointer
        z-index: 1

    > span
        font-size: $font-size-8
        +flex-box
        +flex-grow(1)
        +justify-content(center)
        +align-items(center)

        +respond-to(mobile)
            > span
                display: none

        mark
            color: $color-main
            background: none
            margin: 0 5px
            font-weight: $weight-regular

.upload-stat
    text-align: center

    &:not(:empty)
        margin-top: $gutter / 2

.manage-photo-description
    input[name=photo-desc]
        width: 100%

    > div > div:first-child
        margin-#{$left}: $spacer
