@mixin disabled {
	&,
	&::file-selector-button {
		cursor: not-allowed; // disabled token candidate
	}

	~ .file-content {
		.file-title,
		.file-or,
		.file-formats,
		.file-button {
			color: var(--palettes-neutral-500); // disabled token candidate
		}
	}
}

@mixin droppable {
	~ .file-content {
		&::before {
			background-color: var(--palettes-product-50);
			border: 1px dashed var(--palettes-product-400);
		}
	}
}

@mixin uploading {
	~ .file-content {
		.file-title {
			font-weight: var(--pr-t-font-fontWeight-regular);
			color: var(--palettes-neutral-600);
			font-size: var(--pr-t-font-body-S-fontSize);
			line-height: var(--pr-t-font-body-S-lineHeight);
			font-style: italic;
		}

		.file-formats {
			display: none;
		}
	}
}

@mixin uploaded {
	~ .file-content {
		.file-title {
			color: var(--palettes-success-800);
		}

		.file-icon {
			color: var(--palettes-success-800);
		}

		.file-formats {
			display: none;
		}

		.file-icon.icon-signSuccess {
			display: block;
		}
	}
}

@mixin invalid {
	~ .file-content {
		.file-title {
			color: var(--palettes-error-800);
		}

		.file-icon {
			color: var(--palettes-error-800);
		}

		.file-formats {
			display: none;
		}

		.file-icon.icon-signError {
			display: block;
		}
	}
}

@mixin legacyDroppable {
	background-color: var(--palettes-neutral-25);

	.file-icon {
		color: var(--palettes-product-500);
	}
}

@mixin legacyDisabled {
	.file-title,
	.file-or,
	.file-formats,
	.button {
		color: var(--commons-disabled-color);
	}

	.button {
		&,
		&:hover,
		&:focus,
		&:active {
			cursor: not-allowed; // disabled token candidate
			box-shadow: 0 0 0 1px inset;
			background-color: transparent;
		}
	}
}