.jetpack-form-file-field__dropzone {
	position: relative;
}

.jetpack-form-file-field__dropzone-inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	cursor: pointer;
}

.jetpack-form-file-field__dropzone input[type="file"] {
	display: none;
}

.jetpack-form-file-field__dropzone.is_dropping {
	cursor: pointer;
	transition: .2s;
	opacity: 1;
	background-color: #EEE;
	border: var(--jetpack--contact-form--border-size, 1px) solid var(--jetpack--contact-form--border-color);
}

.jetpack-form-file-field__dropzone:hover {
	outline: var(--b) solid var(--c);
	outline-offset: var(--g);
}

.jetpack-form-file-field__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--jetpack--contact-form--input-padding, 16px);
}

.jetpack-form-file-field__icon {
	color: currentColor;
}

.jetpack-form-file-field__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: min(var(--jetpack--contact-form--font-size, inherit), 16px);
}

.jetpack-form-file-field__select-link {
	text-decoration: underline;
	font-weight: bold;
}

.jetpack-form-file-field__formats {
	opacity: 0.4;
	font-size: min(var(--jetpack--contact-form--font-size, inherit), 14px);
}

.jetpack-form-file-field__preview-wrap {
	padding: 0;
	margin-top: 8px;
	visibility: hidden;
}

.jetpack-form-file-field__preview-wrap.is-active {
	visibility: visible;
}

.jetpack-form-file-field__preview {
	align-items: center;
	animation: jpShowFileField 300ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
	display: flex;
	gap: 1em;
	opacity: 0;
	padding: 16px;
	position: relative;
	justify-content:start;
	background-color: var(--jetpack--contact-form--input-background, white);
	border: var(--jetpack--contact-form--border-size, 1px) solid var(--jetpack--contact-form--border-color);
	margin-top: 8px;
	font-size: 12px;
	line-height: 18px;
}

@media (prefers-reduced-motion) {
	.jetpack-form-file-field__preview {
		animation: none;
	}
}

.jetpack-form-file-field__preview::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}

.jetpack-form-file-field__preview > * {
	z-index: 2;
	transition: height 0.3s ease;
}

@media (prefers-reduced-motion) {
	.jetpack-form-file-field__preview > *,
	.jetpack-form-file-field__preview:hover::before {
		transition: none;
	}
}

.jetpack-form-file-field__image {
	aspect-ratio: 1 / 1;
	background-position: center;
	background-size: cover;
	border-radius: var(--jetpack--contact-form--border-radius, 0);
	outline: 2px solid  var( --jetpack--contact-form--button-primary--text-color, #FFF );
	background-color: #333;
	border-radius: 50%;
	outline-offset:0;
	width: 40px;
	min-width: 40px;
}

.jetpack-form-file-field__preview.fade-out {
	animation: jpFadeOutFileField 0.3s forwards;
}
@media (prefers-reduced-motion) {
	.jetpack-form-file-field__preview.fade-out {
		animation: none;
	}
}

.grunion-field-file-wrap .wp-block-jetpack-contact-form {
	gap: 8px;
}

.jetpack-form-file-field__file-wrap {
	align-items: baseline;
	display: flex;
	flex-direction: column;
	font-size: 0.9em;
	flex-grow: 2;
}

.jetpack-form-file-field__file-name {
	text-align: left;
}

.jetpack-form-file-field__remove {
	position: relative;
	width: 32px;
	height: 32px;
	margin-right: 10px;
}
.jetpack-form-file-field__remove:before, .jetpack-form-file-field__remove:after {
	position: absolute;
	left: 15px;
	content: ' ';
	height: 18px;
	width: 1px;
	top: 8px;
	background-color: #000;
}
.jetpack-form-file-field__remove:before {
	transform: rotate(45deg);
}
.jetpack-form-file-field__remove:after {
	transform: rotate(-45deg);
}

.jetpack-form-file-field__progress {
	opacity: 0.5;
	--hue: 220;
	--holesize: 64;  /* 64 */
	--track-bg: #333;
	height: 44px;
	width: 44px;
	display: block;
	align-items: center;
	justify-items: center;
	place-items: center;
	position: absolute;
	z-index: 3;
	left: 14px;
}

.jetpack-form-file-field__progress.is-complete,
.jetpack-form-file-field__progress.is-error {
	opacity: 1;
	transform: opacity 0.5s ease;
}

.jetpack-form-file-field__progress::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 50%;
	z-index: -1;
	background: conic-gradient(transparent var(--progress, 0%),
			var(--track-bg) var(--progress, 0%) 100%);

	-webkit-mask-image: radial-gradient(transparent var(--holesize),
			black calc(var(--holesize) + 0.5px));

	mask-image: radial-gradient(transparent var(--holesize),
			black calc(var(--holesize) + 0.5px));
}
.jetpack-form-file-field__progress.is-complete::before {
	display: none;
	position: absolute;
	top: 10px;
	bottom: 0;
	left: 16px;
	right: 0;
	--borderWidth: 3px;
	--height: 16px;
	--width: 7px;
	--borderColor: #FFF;
	display: inline-block;
	transform: rotate(45deg);
	height: var(--height);
	width: var(--width);
	border-bottom: var(--borderWidth) solid var(--borderColor);
	border-right: var(--borderWidth) solid var(--borderColor);
	background: transparent;
	-webkit-mask-image: none;
	mask-image: none;
	z-index: 4;
	content: "";
	border-radius: 0;
	box-shadow: 1px 1px 0px 0px #333;
}

.jetpack-form-file-field__progress.is-error:before,
.jetpack-form-file-field__progress.is-error:after {
	position: absolute;
	top: 12px;
	left: 21px;
	height: 20px;
	width: 2px;
	background-color: #FFF;
	-webkit-mask-image: none;
	mask-image: none;
	z-index: 4;
	content: "";
	border-radius: 0;
}

.jetpack-form-file-field__progress.is-error:before {
	transform: rotate(45deg);
}

.jetpack-form-file-field__progress.is-error:after {
	transform: rotate(-45deg);
}

.jetpack-form-file-field__file-info {
	color: #6D6D6D;
	display: inline-flex;
	gap: 4px;
}
.jetpack-form-file-field__success {
	color: #008A20;
}

.jetpack-form-file-field__error {
	color: #b32d2e;
}

.jetpack-form-file-field__success {
	display: none;
}

.is-error .jetpack-form-file-field__seperator,
.is-complete .jetpack-form-file-field__success {
	display: inline;
}

@keyframes jpShowFileField {
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes jpFadeOutFileField {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(0.98);
	}
}