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

@mixin icon {
	padding-block: var(--pr-t-spacings-100);
	padding-inline: var(--pr-t-spacings-600) var(--pr-t-spacings-300);
}

@mixin S {
	padding-block: var(--pr-t-spacings-100);
	padding-inline: var(--pr-t-spacings-200);
	text-align: start;
	min-block-size: 0;

	.file-input {
		// todo: extract state
		&:not(.is-uploading) {
			~ .file-content {
				display: flex;
				align-items: center;
			}
		}
	}

	.file-content {
		gap: var(--pr-t-spacings-100);
	}

	.file-name {
		margin-block-end: 0;
		font-size: var(--pr-t-font-body-XS-fontSize);
		line-height: var(--pr-t-font-body-XS-lineHeight);
	}

	.file-formats {
		font-size: var(--pr-t-font-body-XS-fontSize);
		line-height: var(--pr-t-font-body-XS-lineHeight);
	}

	.file-or {
		@include a11y.mask;
	}

	.file-button {
		margin-inline-start: auto;

		&::first-letter {
			text-transform: capitalize;
		}
	}

	.file-icon {
		font-size: var(--pr-t-font-body-S-lineHeight);
		line-height: var(--pr-t-font-body-S-lineHeight);
		margin: 0;
		align-self: start;
	}

	.file-title {
		font-size: var(--pr-t-font-body-S-fontSize);
		line-height: var(--pr-t-font-body-S-lineHeight);
		padding-inline-end: var(--pr-t-spacings-100);
		margin: 0;
	}

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