// @import "sinosun-ui/lib/style/themes/default.less";
// @import "sinosun-ui/lib/style/mixins/index.less";

@upload-list-prefix-cls: ~'@{sino-prefix}-upload-list';

.@{upload-list-prefix-cls} {
	display: flex;
	flex-wrap: wrap;
	background: @background-white;
    padding: .24rem .3rem;
	&-item {
		position: relative;
		width: calc(100% - .32rem);
		height: 0.76rem;
		background: @body-color;
		border-radius: 0.04rem;
        &-invoice{
            font-size: .16rem;
            position: absolute;
            text-align: center;
            left: 0;
            top: .08rem;
            width: .6rem;
            height: .32rem;
            line-height: .32rem;
            background: rgba(0,0,0,.5);
            border-radius: 0 1rem 1rem 0;
            color: @background-white;
        }
		&-uploaded {
			.@{upload-list-prefix-cls}-item-progress{
                transition: opacity 0.3s linear;
            }
		}
		&:not(:last-child) {
			margin-bottom: @vertical-spacing-base;
		}

		&-delete-icon {
			position: absolute;
			color: @danger-color;
			font-size: @font-size-base;
			top: -(@font-size-base / 2);
			right: -(@font-size-base / 2);
			z-index: 40;
            cursor: pointer;
		}

		&-info {
            flex: 1;
			margin-left: 0.2rem;
			font-size: 0.24rem;
			color: @text-color-2;
			display: block;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}

	&-item-con {
		display: flex;
		height: 0.76rem;
		padding: 0.08rem 0.26rem 0.08rem 0.1rem;
		background: @body-color;
		align-items: center;
        cursor: pointer;
        .sn-icon{
            font-size: .6rem;
        }
        .preview-con {
            flex-shrink: 0;
            height: @btn-height-sm;
            width: 1.08rem;
            border: 1px solid @border-color;
            color: @text-color-3;
            background: @background-white;
            border-radius: @border-radius-lg;
            line-height: @btn-height-sm;
            font-size: 0.28rem;
            text-align: center;
        }
        .sn-upload-list-item-img{
            flex-shrink: 0;
            width: @upload-list-item-width;
            height: @upload-list-item-height;
            img {
                width: 100%;
                height: @upload-list-item-height;
                border-radius: 0.08rem;
            }
        }

        .@{upload-list-prefix-cls}-item-progress {
            width: .6rem;
            height: .6rem;
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: @color-white;
            font-size: 0.24rem;
            background: rgba(0, 0, 0, 0.35);
            z-index: 11;
        }
    }
}
// pc
@media screen and(min-width:@screen-sm) {
    .sn-upload-list {
        padding: 0 0 0.1rem 0;
        margin-left: 2.0rem;
        .sn-upload-list-item {
            margin: .16rem .32rem 0 0
        }
    }
}
    // pc中屏
@media screen and (min-width: @screen-md) {
    .sn-upload-list {
        .sn-upload-list-item {
            width: calc(~'33.333% - 0.32rem');
        }
    }
}