@import '../../../resources/variables.less';

#msupload-container.start-loading {
	filter: invert(1) hue-rotate(180deg);
}

.toolbar #msupload-select,
#msupload-bottom #msupload-files {
	background-image: linear-gradient(transparent, transparent),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E upload %3C/title%3E%3Cpath d='M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z'/%3E%3Cpath d='M10 1 5 7h4v8h2V7h4z'/%3E%3C/svg%3E%0A");

	.skin-citizen-dark & {
		filter: invert(1) hue-rotate(180deg);
	}
}

.skin-citizen-dark {
	& #msupload-div {
		background-color: @dark-bg-20;
		border-top-color: @dark-bg-30;

		& a {
			color: @color-primary;
		}

		& #msupload-dropzone {
			border-color: @dark-text-70;
			color: @dark-text-90;

			&.drop-over {
				background-color: @dark-background-color-quiet--hover;
			}
		}

		& #msupload-list {
			& .file {
				background: @dark-bg-40;
				border-top-color: @dark-bg-50;

				& .file-name-input,
				& .file-name:hover {
					background: @dark-bg-60;
				}

				& .file-size {
					color: @dark-text-80;
				}

				& .file-loading,
				& .file-cancel {
					filter: invert(1) hue-rotate(180deg);
				}

				& .file-warning {
					color: @dark-background-color-warning;
				}

				& .file-error {
					color: @dark-background-color-destructive;
				}
			}

			& .green {
				background: fade(@green-30, 5%);
			}

			& .yellow {
				background: fade(@yellow-30, 5%);
			}

			& .red {
				background: fade(@red-30, 5%);
			}
		}
	}

	& #msupload-bottom {
		border-top-color: @dark-bg-30;
	}
}