@include body-class(true) {

	.sui-upload {
		max-width: 100%;
		display: flex;

		input[type="file"] {
			@extend %sui-screen-reader-text;
		}

		button {
			cursor: pointer;
			display: block;
			transition: 0.3s ease;

			&,
			&:hover,
			&:focus,
			&:active {
				outline: none;
				box-shadow: none;
			}
		}

		.sui-upload-image {
			width: $file-upload--image-size;
			height: $file-upload--image-size;
			flex: 0 0 auto;
			position: relative;
			margin: 0;
			padding: $file-upload--image-padding;
			border: $file-upload--image-border-width $file-upload--image-border-style $file-upload--image-border-color;
			border-radius: $border-radius;

			[class*="sui-image-"] {
				width: #{$file-upload--image-size - (($file-upload--image-border-width * 2) + ($file-upload--image-padding * 2))};
				height: #{$file-upload--image-size - (($file-upload--image-border-width * 2) + ($file-upload--image-padding * 2))};
				display: block;
				border-radius: #{$border-radius - $file-upload--image-padding};
			}

			.sui-image-mask {
				background-color: $file-upload--image-mask-background;
				background-image: linear-gradient(45deg, $white 25%, transparent 25%, transparent 75%, $white 75%, $white), linear-gradient(45deg, $white 25%, transparent 25%, transparent 75%, $white 75%, $white);
				background-size: 12px 12px;
				background-position: 0 0, 6px 6px;
			}

			.sui-image-preview {
				cursor: pointer;
				display: none;
				position: absolute;
				top: $file-upload--image-padding;
				left: $file-upload--image-padding;
				background-color: transparent;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;

				@include icon(before, upload-cloud) {
					opacity: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					border-radius: #{$border-radius - $file-upload--image-padding};
					color: $white;
					font-size: 12px;
					line-height: 12px;
					background-color: $file-upload--image-preview-background;
					transition: 0.2s ease;
				}

				&,
				&:hover,
				&:focus,
				&:active {
					outline: none;
					box-shadow: none;
				}

				&:hover,
				&:focus,
				&:active {

					&:before {
						opacity: 1;
					}
				}
			}

			~ .sui-upload-button,
			~ .sui-upload-file {
				margin-left: 5px;
			}

			~ .sui-upload-file {
				max-width: calc(100% - #{$file-upload--image-size + 5px});
				cursor: initial;
				padding-left: 19px;

				&:before {
					content: unset;
				}

				&:hover,
				&:active {
					background-color: $file-upload--file-background;
				}
			}
		}

		.sui-upload-file {
			max-width: 100%;
			cursor: pointer;
			flex: 0 0 auto;
			display: none;
			position: relative;
			padding: 11px 61px 11px 41px;
			border: 1px solid $file-upload--file-border-color;
			border-radius: $border-radius;
			background-color: $file-upload--file-background;
			transition: 0.3s ease;
			overflow-wrap: break-word;

			@include icon(before, page-pdf) {
				width: 29px;
				display: block;
				position: absolute;
				left: 14px;
				font-size: 16px;
				line-height: 16px;
				text-align: center;
			}

			span {
				user-select: none;
				display: block;
				color: $file-upload--file-color;
				font: $font--medium 12px/16px $font;
				letter-spacing: $font--letter-spacing;

				&:focus {
					outline: none;
					box-shadow: none;
				}
			}

			button {
				width: #{$file-upload--image-size - 1px};
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				border: 0 solid $file-upload--file-border-color;
				border-left-width: 1px;
				border-radius: 0 #{$border-radius - 1px} #{$border-radius - 1px} 0;
				background-color: $file-upload--file-background;
				font-size: 12px;
				text-align: center;

				[class*="sui-icon-"] {
					display: block;

					&:before {
						display: block;
					}
				}

				&:hover,
				&:active {
					background-color: palette(silver, default);
				}

				&:focus {
					background: palette(silver, soft);
				}
			}

			&:hover,
			&:active,
			&:focus {
				background-color: $file-upload--file-hover-background;
			}
		}

		.sui-upload-button {
			margin: 0;
			padding: 11px 19px;
			border: $file-upload--add-border-width $file-upload--add-border-style $file-upload--add-border-color;
			border-radius: $border-radius;
			background-color: $file-upload--add-background;
			color: $file-upload--add-color;
			font: $font--medium 12px/16px $font;
			letter-spacing: $font--letter-spacing;

			&:hover,
			&:focus,
			&:active,
			&.sui-is-dragover {
				border-color: palette(silver, medium);
				background-color: #FAFAFA;
			}

			&:focus {
				box-shadow: 0px 0px 0px 2px palette(silver, default);
			}

			[class*="sui-icon-"] {
				width: 24px;
				margin-left: -4px;
				color: palette(gray, light);
				font-size: 16px;
				line-height: 16px;
				vertical-align: bottom;
				text-align: center;

				&:before {
					display: block;
					color: inherit;
				}
			}
		}

		// STATUS: File uploaded
		&.sui-has_file {

			.sui-upload-image {

				.sui-image-preview {
					display: block;
				}
			}

			.sui-upload-file {
				display: block;
			}

			.sui-upload-button {
				display: none;
			}
		}

		// STATUS: Error
		+ .sui-notice {
			margin-top: 10px;
		}

		// Multiple uploads
		+ .sui-upload {
			margin-top: 10px;
		}
	}
}