/* wc.ui.fileUpload.scss */
@import 'mixins-common';

.wc-fileupload {
	a {
		@include flex-grow(1);
		@include flex-shrink(1);
		display: inline-block;
		max-width: calc(100% - 2em);

		img {
			max-width: 100%;
		}

		~ button {
			@include flex-shrink(0);
			display: inline-block;
			margin-left: $wc-gap-small;
		}
	}

	&.wc_ro {
		a {
			max-width: none;
		}
	}

	.wc_btn_abort {
		margin-right: $wc-gap-small;
	}

	progress {
		margin-left: $wc-gap-small;
		margin-right: $wc-gap-small;
	}

	> .wc_filelist {
		display: table-cell;  // horrendously wrong no doubt but fixes columns
		padding-top: $wc-gap-small;

		&.wc-listlayout-type-flat {
			padding-top: 0;

			a {
				width: auto;
			}
		}
	}

	&[data-wc-cols] {
		> div {
			@include flex($justify: space-between);
			margin-top: $wc-gap-small;
		}

		ul {
			@include flex-grow(1);

			+ ul {
				margin-left: $wc-gap-small;
			}
		}

		li + li {
			margin-top: $wc-gap-small;
		}
	}

	input[type='file'][data-wc-editor] {
		max-width: calc(100% - 2em); // leave room for the edit button.

		&,
		+ button {
			vertical-align: bottom;
		}
	}

	.wc_btn_camera {
		display: none;  // This should only be available on desktop browsers, and only those which support webrtc or flash
	}
}

.wc-rtc-gum .wc-fileupload .wc_btn_camera {
	display: inline-block;  // This will be enabled in javascript
}

.wc-file {
	@include flex($justify: space-between, $align-items: flex-start);
	@include border;
	padding: $wc-gap-small;
	word-wrap: break-word;
}

input[type='file']::-webkit-file-upload-button {
	@include button($border: 0);
	@include border($pos: right);
}

@import 'wc.ui.fileUpload.color';
@import 'wc.ui.fileUploadIcons';
