@import "../styles/base/fn.wxss";

.@{wuxClassNamePrefix}-upload {
    position: relative;
    display: block;
    .clearfix();

    &--disabled {
        opacity: .3;
    }

    &--picture-card {
        .@{wuxClassNamePrefix}-upload__select {
            border: 1px dashed #d9d9d9;
            width: 78px;
            height: 78px;
            border-radius: 4px;
            background-color: #fafafa;
            transition: border-color .3s ease;
            display: inline-block;
            box-sizing: border-box;
        }

        .@{wuxClassNamePrefix}-upload__button {
            width: 100%;
            height: 100%;
            display: flex;
            text-align: center;
            justify-content: center;
            align-items: center;
            vertical-align: middle;
            padding: 4px;
            box-sizing: border-box;

            image {
                width: 100%;
                height: 100%;
                display: inline-block;
                overflow: hidden;
            }
        }

        .@{wuxClassNamePrefix}-upload__files {
            position: relative;
            display: block;
            float: left;
            .clearfix();
        }

        .@{wuxClassNamePrefix}-upload__file {
            float: left;
            width: 78px;
            height: 78px;
            margin: 0 8px 8px 0;
            padding: 4px;
            border-radius: 4px;
            border: 1px solid #d9d9d9;
            position: relative;
            box-sizing: border-box;

            &--uploading {
                border-style: dashed;
            }

            &--error {
                border-color: #f5222d;
            }
        }

        .@{wuxClassNamePrefix}-upload__thumb {
            width: 100%;
            height: 100%;
            display: inline-block;
            overflow: hidden;
        }

        .@{wuxClassNamePrefix}-upload__remove {
            width: 15px;
            height: 15px;
            position: absolute;
            right: 6px;
            top: 6px;
            text-align: right;
            vertical-align: top;
            z-index: 2;
            background-size: 15px auto;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill-opacity='.4' fill='%23404040' cx='8' cy='8' r='8'/%3E%3Cpath d='M11.898 4.101a.345.345 0 0 0-.488 0L8 7.511l-3.411-3.41a.345.345 0 0 0-.488.488l3.411 3.41-3.41 3.412a.345.345 0 0 0 .488.488L8 8.487l3.411 3.411a.345.345 0 0 0 .488-.488L8.488 8l3.41-3.412a.344.344 0 0 0 0-.487z' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");
        }
    }
}