@use 'sass:color';
@use '@lucca-front/scss/src/commons/utils/media';
@use '@lucca-front/scss/src/commons/config';
@use '@lucca-front/icons/src/commons/utils/icon';
@use '@lucca-front/scss/src/commons/utils/reset';

@mixin stickyColumn {
	inline-size: auto;
	min-inline-size: 100%;
	background-color: var(--palettes-neutral-0);

	// All stickies columns
	[class*='mod-stickyColumn-'] {
		background-color: var(--palettes-neutral-0);
		z-index: 3;
	}

	// Left sticked columns
	[class*='mod-stickyColumn-left'] {
		inset-inline-start: var(--components-tableSticked-column-sticky-offset);

		// left sticked columns shadow
		&.mod-stickyColumn-shadow,
		.stickyColumn-shadow-wrapper::before {
			inset-inline-start:
				calc(
					var(--components-tableSticked-column-sticky-offset)
					- var(--components-tableSticked-column-sticky-shadow-width)
				);
		}

		.stickyColumn-shadow-wrapper::after {
			inset-inline-start: var(--components-tableSticked-column-sticky-offset);
			background-image: linear-gradient(to right, var(--components-tableSticked-column-sticky-shadow-color), transparent);
		}
	}

	// Right sticked columns
	[class*='mod-stickyColumn-right'] {
		inset-inline-end: var(--components-tableSticked-column-sticky-offset);

		// right sticked columns shadow
		.stickyColumn-shadow-wrapper {
			justify-items: end;
			inline-size: calc(var(--components-tableSticked-column-sticky-shadow-width) * 3);
			inset-inline-end: calc(var(--components-tableSticked-column-sticky-shadow-width) * -1);
		}

		&.mod-stickyColumn-shadow,
		.stickyColumn-shadow-wrapper::before {
			inset-inline-end:
				calc(
					var(--components-tableSticked-column-sticky-offset)
					- var(--components-tableSticked-column-sticky-shadow-width)
				);
		}

		.stickyColumn-shadow-wrapper::after {
			inset-inline-end: var(--components-tableSticked-column-sticky-offset);
			background-image: linear-gradient(to left, var(--components-tableSticked-column-sticky-shadow-color), transparent);
		}
	}

	// Sticky columns drop shadow
	.mod-stickyColumn-shadow {
		display: none;
		inline-size: 0;
		min-inline-size: 0;
		padding: 0;
	}

	.stickyColumn-shadow-wrapper {
		position: absolute;
		inset-block: 0;
		display: grid;
		grid-template-columns: calc(var(--components-tableSticked-column-sticky-shadow-width) * 2);
		grid-template-areas: 'cell';
		inline-size: calc(var(--components-tableSticked-column-sticky-shadow-width) * 2);

		&::before,
		&::after {
			content: '';
			position: sticky;
			grid-area: cell;
		}

		&::after {
			inline-size: var(--components-tableSticked-column-sticky-shadow-width);
		}

		&::before {
			z-index: 1;
			inline-size: var(--components-tableSticked-column-sticky-shadow-width);
			background-color: var(--palettes-neutral-0);
		}
	}
}

@mixin stickyColumnOffset {
	[class*='mod-stickyColumn-'] {
		--components-tableSticked-column-sticky-offset: var(--table-stickyColumn-offset, 0rem);

		position: sticky;
	}

	.mod-stickyColumn-shadow {
		display: table-cell;
	}
}

// *****
// Sticky header
// ****

@mixin stickyHeader {
	.table-head-row-cell {
		inset-block-start: 0;
	}

	.mod-stickyHeader-shadow .table-body-row-cell {
		inset-block-start: calc(var(--table-stickyHeader-shadow-offset) + var(--components-tableSticked-column-sticky-shadow-width));
	}
}

@mixin stickyHeaderBanner {
	.table-head-row-cell {
		inset-block-start: var(--commons-banner-height);
	}

	.mod-stickyHeader-shadow .table-body-row-cell {
		inset-block-start:
			calc(
				var(--table-stickyHeader-shadow-offset)
				+ var(--commons-banner-height)
				+ var(--components-tableSticked-column-sticky-shadow-width)
			);
	}
}

@mixin stickyHeaderCommon {
	margin-block-start: var(--components-tableSticked-column-sticky-shadow-width);

	.table-head-row-cell {
		background-color: var(--palettes-neutral-0);
		position: sticky;
		z-index: 5;

		&[class*='mod-stickyColumn'] {
			z-index: 7;
		}
	}
}

// *****
// Sticky header drop shadow
// ****

@mixin stickyHeaderShadow {
	.indexTable-head-row-cell,
	.indexTable-body-row-cell,
	.indexTable-foot-row-cell,
	.table-head-row-cell,
	.table-body-row-cell,
	.table-foot-row-cell {
		position: sticky;
		inset-block-start: var(--table-stickyHeader-shadow-offset);
		z-index: 4;
		block-size: 0;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.stickyHeader-shadow-wrapper {
		position: absolute;
		inset-block-start: calc(var(--components-tableSticked-column-sticky-shadow-width) * -1);
		inline-size: 100%;
		block-size: 0;
		border: 0;

		&::after {
			content: '';
			display: block;
			block-size: var(--components-tableSticked-column-sticky-shadow-width);
			inline-size: 100%;
			background-image: linear-gradient(to bottom, var(--components-tableSticked-column-sticky-shadow-color), transparent);
		}
	}

	+ .table-body-row,
	+ .table-foot-row {
		.table-body-row-cell,
		.table-foot-row-cell {
			border-block-start: 0;
		}
	}
}