/* wc.ui.fileUpload.scss */
@import 'mixins_common.scss';

%a-button {
	display: inline-block;
	vertical-align: top;
}

.fileUpload {
	a {
		@extend %a-button;
		@include flex-grow(1);
		@include flex-shrink(1);
		max-width: calc(100% - #{$line-size});

		img {
			max-width: 100%;
		}

		~ button {
			@extend %a-button;
			@include flex-shrink(0);
			@include button;
			@include background-image-icon('../images/delete.png');
			margin-left: $hgap-small;

			&[disabled] {
				background-image: url('../images/delete-d.png');
			}
		}
	}

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

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

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

		&.wc_list_flat {
			.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;
		}
	}


	&.wc_dragging [type=file] {
		background-color: $wc-ui-color-invite-bg;  //#c0ffee
		outline: 2px dotted $wc-ui-color-invite-fg;
	}
}
/* end wc.ui.fileUpload.scss */
