@use '@lucca-front/scss/src/commons/utils/namespace';
@use '@lucca-front/scss/src/commons/utils/color';

@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/scss/src/components/button/exports' as button;

@mixin component($atRoot: namespace.$defaultAtRoot) {
	position: relative;
	border: 1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);
	overflow: hidden;
	border-radius: var(--components-fileUpload-borderRadius);
	background-color: var(--components-fileUpload-backgroundColor);
	padding: var(--components-fileUpload-padding);
	text-align: var(--components-fileUpload-textAlign);
	display: var(--components-fileUpload-display);
	flex-direction: var(--components-fileUpload-flexDirection);
	align-items: var(--components-fileUpload-alignItems);
	justify-content: var(--components-fileUpload-justifyContent);
	gap: var(--pr-t-spacings-200);
	color: var(--pr-t-color-text);
	min-block-size: var(--components-fileUpload-minHeight);

	&:has(.fileUpload-input:focus-visible) {
		@include a11y.focusVisible;
	}

	@at-root ($atRoot) {
		.fileUpload-status {
			min-inline-size: var(--pr-t-spacings-600);
			min-block-size: var(--pr-t-spacings-600);
			display: flex;
			align-items: center;
			justify-content: center;

			--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600));
		}

		.fileUpload-status-preview {
			position: absolute;
			inset: var(--components-fileUpload-status-img-inset);
			inline-size: var(--components-fileUpload-status-img-size);
			block-size: var(--components-fileUpload-status-img-size);
			border-radius: var(--pr-t-border-radius-50);
			background-color: var(--palettes-neutral-25);
			display: flex;
			overflow: hidden;
		}

		.fileUpload-status-preview-img {
			object-fit: cover;
			opacity: 0.08;
			inline-size: 100%;
			block-size: 100%;
		}

		.fileUpload-input {
			position: absolute;
			inset: calc(var(--pr-t-spacings-400) * -1) 0 0;
			opacity: 0.0001;
			cursor: pointer;
			z-index: 1;
		}

		.fileUpload-instruction {
			display: var(--components-fileUpload-instruction-display);
			flex-direction: column;
			align-items: var(--components-fileUpload-instruction-alignItems);
			max-inline-size: var(--components-fileUpload-instruction-maxWidth);
			line-height: var(--pr-t-font-body-S-lineHeight);
		}

		.fileUpload-instruction-action {
			display: block;
			margin-bottom: var(--fileUpload-instruction-action-marginBottom);
			line-height: var(--pr-t-font-body-M-lineHeight);

			span {
				color: var(--components-fileUpload-instruction-action-color);
				font-weight: var(--components-fileUpload-instruction-action-fontWeight);
			}
		}

		.fileUpload-instruction-size,
		.fileUpload-instruction-formats {
			color: var(--palettes-neutral-600);
			font-size: var(--pr-t-font-body-S-fontSize);
			vertical-align: top;
		}

		.fileUpload-button.button {
			visibility: var(--components-fileUpload-button-visibility);
			display: var(--components-fileUpload-button-display);

			&:not(.mod-filled) {
				@include button.outlined;
				@include color.palette('product');
			}
		}

		.fileUpload-instruction-filename {
			display: block;
			font-weight: var(--pr-t-font-fontWeight-semibold);
			color: var(--components-fileUpload-instruction-filename-color);
			margin-block-start: var(--components-fileUpload-instruction-filename-marginTop);
			inset-block-end: var(--pr-t-spacings-100);
			position: var(--components-fileUpload-instruction-filename-position);
		}
	}
}