@use '@lucca-front/icons/src/icon/exports' as icon;

@mixin S {
	--components-fileEntry-padding: var(--pr-t-spacings-50);
	--components-fileEntry-status-inlineSize: 32px;
	--components-fileEntry-description-display: none;
	--components-fileEntry-gridTemplateAreas: 'picture title title toolbar';
	--components-fileEntry-filename-alignSelf: center;
	--components-fileEntry-gapInline: var(--pr-t-spacings-75);
	--components-fileEntry-status-content-svg-margin: calc(var(--pr-t-spacings-100) * -1);

	.fileEntry-status-content-inside-icon {
		@include icon.S;
	}
}

@mixin media {
	--components-fileEntry-padding: var(--pr-t-spacings-75);
	--components-fileEntry-status-aspectRatio: auto;
	--components-fileEntry-status-inlineSize: 100%;
	--components-fileEntry-status-blockSize: calc(21.5rem - 1rem + 2px);
	--components-fileEntry-description-display: none;
	--components-fileEntry-display: block;
	--components-fileEntry-gridColumn: 1 / -1;
	--components-fileEntry-status-content-svg-width: 72px;

	&:has(.fileEntry-status-content-fileName) {
		--components-fileEntry-status-content-inside-insetBlockEnd: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25));
	}
}

@mixin mediaS {
	--components-fileEntry-minHeight: calc(5rem + 2px);
	--components-fileEntry-gridColumn: auto;
	--components-fileEntry-status-blockSize: auto;
	--components-fileEntry-status-aspectRatio: 1;
}

@mixin divider {
	--components-divider-marginBlock: var(--pr-t-spacings-25);
	--components-divider-marginInline: 0;
}