@import '../../variables.less';
@import '../../mixins.less';
/**********************
real-fields/upload.less
*************************/
.ecf-output-fields-wrapper {

	.ecf-field {

		.ecf-input-placeholder {
			.roundedcorners(5px);
			.flex();
			background-color: @grey_1;
			height: 40px;
			align-items: center;
			padding: 0 15px;

			.ecf-placeholder {
				color: @text_1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding-right: 23px;

				&.ecf-has-value {
					color: @text_2;
				}
			}
		}

		&.ecf-upload-field {
			padding-bottom: 10px;

			&.ecf-file-field,
			&.ecf-multi_files-field {
				.ecf-input-wrapper {
					.ecf-input-placeholder {
						.ecf-placeholder {
							.roundedcorners(5px);
							background-color: @white !important;
					    padding: 5px 12px;
					    margin-left: -10px;
					    height: 30px;
					    font-size: 14px;
					    font-weight: 500;
					    &.ecf-has-value {
					    	color: @text_1;				    	
					    }
						}
						.ecf-attached-files-info {
							color: @text_2;
							padding-left: 10px;
					    font-weight: 500;
					    white-space: nowrap;
					    overflow: hidden;
					    text-overflow: ellipsis;
					    padding-right: 23px;
						}
					}
				}
			}

			.ecf-input-wrapper {				
				.ecf-input-images-wrapper {
					margin-top: 5px;
					align-items: flex-start;
					&.ecf-reorder-on {
						.ui-sortable-helper {
							// position: absolute;
						}
						.ecf-ui-placeholder {
							background: @warning_1;
						}
						> div {
							a {								
								&.ecf-reorder-file {
									.flex();
								}
								&.ecf-remove-file {
									display: none;
								}
							}
						}
					}
					img {
						.roundedcorners(5px);
						max-height: 60px;
						width: 60px;
						height: 60px;
						object-fit: cover;
						margin: 0;
					}
					> div {
						margin: 5px 10px 0 0;
						> div {
						.roundedcorners(5px);
							background: @grey_2;						
							.inline-flex();
							justify-content: center;
							position: relative;
							flex-wrap: wrap;
						}
						&.ecf-media-file {
							width: 43px;							
					    flex-wrap: wrap;
					    > div {
					    	padding: 4px 0 0;
					    }
							[class*="ecf-icon-"] {
								.flex();
								font-size: 24px;
						    height: 34px;
						    align-items: center;
							}
							.ecf-ext {
								.roundedcorners(0 0 5px 5px);
								color: @white;
								font-weight: 500;
								text-transform: uppercase;
								margin-top: 4px;
								padding: 0 0 3px;
								font-size: 12px;
								width: 100%;
								text-align: center;
							}
						}
						a {
							.roundedcorners(5px);
							.transition(all, 0.25s, ease-out);
							.opacity(0);
							.flex();
					    background: fade(@black, 70%);
							align-items: center;
							justify-content: center;
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							z-index: 1;
							&.ecf-reorder-file {
								display: none;
							}	
							&:hover {
								.opacity(1);
							}
							span {
								.roundedcorners(4px);
								.flex();
								color: @white;
								align-items: center;
								justify-content: center;
								width: 22px;
								height: 25px;
								font-size: 20px;															
							}
						}
					}
				}
			}
		}
	}


	&.ecf-xs {
		.ecf-field {

			&.ecf-upload-field {
				&.ecf-file-field,
				&.ecf-multi_files-field {
					.ecf-input-wrapper {
						.ecf-input-placeholder {
							.ecf-attached-files-info {

							}
						}
					}
				}
			}
		}
	}

}