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

@mixin component {
	padding: var(--pr-t-spacings-300);
	max-inline-size: 30rem;
	min-block-size: 17.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	text-align: center;

	.file-icon {
		font-size: var(--pr-t-font-body-M-lineHeight);
		margin-block: 0;
		margin-inline: var(--pr-t-spacings-50);
		display: none;
	}

	.file-title {
		font-size: var(--pr-t-font-body-M-fontSize);
		line-height: var(--pr-t-font-body-M-lineHeight);
		margin-block-end: 0;
		font-weight: var(--pr-t-font-fontWeight-semibold);
		display: block;
		position: relative;
		color: var(--palettes-neutral-700);
	}

	.file-or {
		font-size: var(--pr-t-font-body-S-fontSize);
		line-height: var(--pr-t-font-body-S-lineHeight);
		margin-block-end: var(--pr-t-spacings-50);
		display: block;
		position: relative;
		color: var(--palettes-neutral-600);

		&:not(:empty) {
			margin-block-end: var(--pr-t-spacings-100);
			color: var(--pr-t-color-text);
		}
	}

	.file-progress {
		margin-block: var(--pr-t-spacings-200) var(--pr-t-spacings-100);
		margin-inline: 0;
		display: block;
	}

	.file-name {
		&:not(:empty) {
			font-size: var(--pr-t-font-body-S-fontSize);
			line-height: var(--pr-t-font-body-S-lineHeight);
			margin-block-end: var(--pr-t-spacings-200);
			color: var(--palettes-neutral-600);
			display: block;
		}
	}

	.file-formats {
		font-size: var(--pr-t-font-body-S-fontSize);
		line-height: var(--pr-t-font-body-S-lineHeight);
		color: var(--palettes-neutral-600);
		position: relative;
		display: block;
	}

	.file-button {
		margin: 0;

		&:empty {
			display: none;
		}
	}

	.file-input {
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 0;
		inline-size: 100%;
		block-size: 100%;
		opacity: 0.0001;
		z-index: 1;
		font-size: 0;
		cursor: pointer;

		&:not(:disabled)::file-selector-button {
			cursor: pointer;
		}

		~ .file-content {
			&::before {
				border: 1px dashed var(--palettes-neutral-400);
				border-radius: var(--pr-t-border-radius-default);
				position: absolute;
				inset: 0;
				content: '';
			}
		}

		&:hover {
			&:not(:disabled) {
				~ .file-content {
					&::before {
						border: 1px dashed var(--palettes-product-400);
					}

					.file-button {
						background-color: var(--palettes-100, var(--palettes-neutral-100));
					}
				}
			}
		}

		&:focus-visible {
			&:not(:disabled) {
				~ .file-content {
					.button {
						@include a11y.focusVisible;
					}
				}
			}
		}

		&:not(.is-uploading) {
			~ .file-content {
				.file-progress {
					display: none;
				}
			}
		}
	}
}