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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	background-color: var(--components-scrollBox-backgroundColor);
	position: relative;
	display: var(--components-scrollBox-display);
	flex-wrap: nowrap;
	gap: var(--components-scrollBox-gap);
	overflow: auto;
	scrollbar-width: var(--components-scrollBox-scrollBarWidth);
	margin-inline: var(--components-scrollBox-marginInline);
	padding-inline: var(--components-scrollBox-paddingInline);
	padding-block: var(--components-scrollBox-paddingBlock);
	margin-block: var(--components-scrollBox-marginBlock);
	border-radius: var(--pr-t-border-radius-default);

	> * {
		flex-shrink: 0;
	}

	&:focus-visible {
		@include a11y.focusVisible($offset: 0);
	}

	&::before,
	&::after {
		content: var(--components-scrollBox-pseudoElementsContent);
		pointer-events: none;
		position: sticky;
		flex-shrink: 0;
		inline-size: var(--components-scrollBox-shadowSize);
		inset-block: 0;
		inset-inline: calc(var(--components-scrollBox-paddingInline) * -1);
		margin-block: calc(var(--components-scrollBox-paddingBlock) * -1);
		background-repeat: no-repeat;
		z-index: 10;
		align-self: stretch;
		background-size:
			75% 100%,
			25% 100%,
			1px 100%;
	}

	&::before {
		opacity: var(--components-scrollBox-beforeOpacity);
		margin-inline-start: calc(var(--components-scrollBox-paddingInline) * -1);
		margin-inline-end: calc(var(--components-scrollBox-paddingInline) - var(--components-scrollBox-shadowSize) - var(--components-scrollBox-gap));
		background-position: 0% 50%;
		background-image:
			radial-gradient(
				farthest-side at 0% 50%,
				color.transparentize(var(--components-scrollBox-shadowColor), 0.24),
				color.transparentize(var(--palettes-neutral-900), 0)
			),
			radial-gradient(
				farthest-side at 0% 50%,
				color.transparentize(var(--components-scrollBox-shadowColor), 0.32) 50%,
				color.transparentize(var(--palettes-neutral-900), 0)
			),
			radial-gradient(
				farthest-side at 0% 50%,
				color.transparentize(var(--components-scrollBox-shadowColor), 1) calc(100% - 1px),
				color.transparentize(var(--palettes-neutral-900), 0)
			);
	}

	&::after {
		opacity: var(--components-scrollBox-afterOpacity);
		margin-inline-start: calc(var(--components-scrollBox-paddingInline) - var(--components-scrollBox-shadowSize) - var(--components-scrollBox-gap));
		margin-inline-end: calc(var(--components-scrollBox-paddingInline) * -1);
		background-position: 100% 50%;
		background-image:
			radial-gradient(
				farthest-side at 100% 50%,
				color.transparentize(var(--components-scrollBox-shadowColor), 0.24),
				color.transparentize(var(--palettes-neutral-900), 0)
			),
			radial-gradient(
				farthest-side at 100% 50%,
				color.transparentize(var(--components-scrollBox-shadowColor), 0.32) 50%,
				color.transparentize(var(--palettes-neutral-900), 0)
			),
			radial-gradient(
				farthest-side at 100% 50%,
				color.transparentize(var(--components-scrollBox-shadowColor), 1) calc(100% - 1px),
				color.transparentize(var(--palettes-neutral-900), 0)
			);
	}

	@at-root ($atRoot) {
		.scrollBox-first {
			margin-inline-end: calc(var(--components-scrollBox-gap) * -1);
		}

		.scrollBox-last {
			margin-inline-start: calc(var(--components-scrollBox-gap) * -1);
		}

		.scrollBox-first,
		.scrollBox-last {
			pointer-events: none;
			flex-shrink: 0;
			align-self: stretch;
			display: var(--components-scrollBox-firstLast-display);
		}
	}
}