@require('./variables.styl')

.k-upload
    font-size $upload-font-size
    position relative
    .k-handle
    .k-tip
        display inline-block
        vertical-align middle
    .k-tip
        margin-left $upload-tip-margin-left
        color $upload-tip-color
    .k-close
        display none
        width $upload-file-status-icon-width !important
        height @width
        .k-icon
            line-height $upload-file-status-icon-width
            position relative
        .k-icon:before
            font-size $upload-close-font-size
    .k-files
        margin-top $upload-files-margin-top
    .k-file
        margin $upload-file-margin
        border-radius $upload-file-border-radius
        cursor default
        &:hover
            background $upload-file-bg-color
            .k-icons
                .k-close
                    display inline-block
        > .k-wrapper
            padding $upload-file-padding
        .k-icons
            position absolute
            top $upload-file-icons-top
            right $upload-file-icons-right 
        .k-status-icon
            display inline-block
            color $upload-file-status-icon-color
            margin-left $upload-file-status-icon-margin-left 
            // float right
            width $upload-file-status-icon-width
            height @width
            line-height @height 
            text-align center
            vertical-align middle
        &.k-error
            color $upload-file-error-color
            .k-status-icon
                color $upload-file-error-status-icon-color

    .k-name
        position relative
        padding-right $upload-file-name-padding-right
        .k-file-icon 
            vertical-align middle
            margin-right $upload-file-icon-margin-right
    .k-progress
        .k-text
            width auto

    // drag
    &.k-drag
        .k-handle
            color $upload-drag-color
            display block
            border $upload-drag-border 
            border-radius $upload-drag-border-radius
            cursor pointer
            text-align center
            transition border-color $transition
            &:hover
                border-color $upload-drag-hover-border-color
        .k-area
            padding $upload-drag-padding 
            .k-icon:before
                font-size $upload-drag-icon-font-size
                color $upload-drag-icon-color 
                line-height 1
        &.k-dragover
            .k-handle
                border-color $upload-drag-over-border-color

    // gallery
    .k-pictures
        display inline-block
        vertical-align middle
        .k-picture
            padding $upload-gallery-padding
            position relative
            vertical-align middle
            &.k-error
                border-color $upload-gallery-error-border-color 
            &:hover
                .k-close
                    opacity 1
                    pointer-events all
        img
            display inline-block
            width 100%
            height 100%
        .k-close
            position absolute
            top $upload-gallery-close-icon-top 
            right $upload-gallery-close-icon-right 
            display inline-block
            opacity 0
            transition opacity $transition
            pointer-events none
            .k-icon:before
                font-size $upload-gallery-close-icon-font-size
            &:before
                content ''
                position absolute
                display block
                width ($upload-file-status-icon-width / 2)
                height @width
                top (@width / 2)
                left @top
                border-radius 50%
                background #fff
        .k-icons
            opacity 0
            transition opacity $transition
        .k-picture:hover
            .k-icons
                opacity 1

    .k-picture-card
        display inline-block
        width $upload-gallery-width
        height $upload-gallery-height 
        border-radius $upload-gallery-border-radius
        border $upload-gallery-border
        text-align center
        cursor pointer
        margin $upload-gallery-margin
        background $upload-gallery-bg-color 
    .k-add
        border $upload-gallery-add-border 
        &:before
            font-size $upload-gallery-add-font-size 
            line-height s('calc(%s - 2px)', $upload-gallery-height) 
        &:hover
            border-color $upload-gallery-add-hover-border-color
    .k-overlap
        position absolute
        width 100%
        height 100%
        left 0
        top 0
        color $upload-overlap-color 
        background $upload-overlap-bg-color 
        .k-progress
            position absolute
            width 100%
            top 50%
            padding $upload-gallery-padding 
            transform translateY(-50%)
    .k-zoom
        display inline-block
        position relative
        top 50%
        transform translateY(-50%)
        &:before
            font-size $upload-overlap-zoom-icon-font-size

.k-upload-dialog
    img
        width 100%


requireTheme('upload')