/*
 * Citizen
 *
 * SkinStyles for Extension:MsUpload
 * Module: ext.MsUpload
 * Version: REL1_35 32eb420
 *
 * Date: 2021-08-25
*/

#msupload {
	&-div {
		border-top: 0;
		background: var( --color-surface-1 );

		a {
			color: var( --color-primary );
		}
	}

	&-dropzone {
		display: flex;
		height: 36px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-color: var( --border-color-base--darker );
		margin: 8px;
		color: var( --color-base );
		font-size: 0.875rem;
		font-weight: var( --font-weight-medium );
	}

	&-list {
		.file {
			border-top-color: var( --border-color-base );
			background: var( --color-surface-2 );

			.file-name {
				color: var( --color-base--emphasized );

				&:hover {
					background-color: var( --background-color-quiet--hover );
				}

				&:active {
					background-color: var( --background-color-quiet--active );
				}
			}

			.file-size {
				color: var( --color-base--subtle );
			}

			.file-warning,
			.file-error {
				color: var( --color-base );
			}
		}

		.green {
			background-color: var( --background-color-success );
		}

		.yellow {
			background-color: var( --background-color-warning );
		}

		.red {
			background-color: var( --background-color-destructive );
		}
	}

	// Increase clickable area and fix alignment
	&-bottom {
		display: flex;
		height: auto;
		align-items: center;
		padding: 0;
		border-top-color: var( --border-color-base );

		#msupload-files {
			height: auto;
			padding: 6px 12px 6px 36px;
			background-position: 12px center;
			background-size: 18px;
		}

		a {
			display: flex;
			align-items: center;
			padding: 6px 12px;
			margin-right: 0;
			font-size: 0.875rem;

			&:hover {
				background-color: var( --background-color-quiet--hover );
			}

			&:active {
				background-color: var( --background-color-quiet--active );
			}
		}

		.spacer {
			border-left-color: var( --border-color-base );
			background-color: var( --border-color-base );
		}
	}

	&-select,
	&-bottom #msupload-files {
		background-image: 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 );
	}
}

.drop-over {
	background-color: var( --background-color-success );
}

.skin-citizen-dark {
	#msupload {
		&-container.start-loading,
		&-select,
		&-bottom #msupload-files {
			filter: invert( 1 ) hue-rotate( 180deg );
		}
	}
}