/* 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: $hgap-small;
		}
	}

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

		.wc-file + .wc-file {
			margin-top: $vgap-normal;
		}

		&.wc_list_flat {
			.wc-file {
				display: inline-block;
				margin-right: $hgap-small;
				margin-top: $hgap-small;

				// The excessive depth here could be re-written I suppose...
				// scss-lint:disable NestingDepth
				&:last-child {
					margin-right: 0;
				}
				// scss-lint:enable NestingDepth
			}

			a {
				width: auto;
			}
		}
	}

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

		ul {
			@include flex-grow(1);

			+ ul {
				margin-left: $hgap-small;
			}
		}

		li + li {
			margin-top: $hgap-small;
		}
	}

	input[type='file'][data-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
	}
}

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

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