@use 'sass:color';

@use '@lucca-front/icons/src/commons/utils/icon';
@use '@lucca-front/scss/src/commons/utils/reset';

@mixin stickyColumn($shadowColor: #2a3551) {
	inline-size: auto;
	min-inline-size: 100%;
	background-color: var(--pr-t-elevation-surface-raised);

	.table-head-row-cell,
	.table-body-row-cell,
	.table-foot-row-cell {
		&[class*='mod-stickyColumn-'] {
			position: sticky;
			background-color: var(--pr-t-elevation-surface-raised);
			z-index: 3;
		}

		&.mod-stickyColumn-shadow {
			z-index: 1;
			min-inline-size: var(--components-tableFixed-column-sticky-shadow-width);
			max-inline-size: var(--components-tableFixed-column-sticky-shadow-width);
			inline-size: var(--components-tableFixed-column-sticky-shadow-width);
			padding: 0;
			background: transparent;
		}

		.stickyColumn-shadow-wrapper {
			display: flex;
		}
	}

	[class*='mod-stickyColumn-left'] {
		.stickyColumn-shadow-wrapper {
			inset-inline-start: calc(var(--components-tableFixed-column-sticky-shadow-width) * -1);

			&::after {
				background-image: linear-gradient(to right, color.adjust($shadowColor, $alpha: -0.75), color.adjust($shadowColor, $alpha: -1));
			}
		}
	}

	[class*='mod-stickyColumn-right'] {
		.stickyColumn-shadow-wrapper {
			inset-inline-end: calc(var(--components-tableFixed-column-sticky-shadow-width) * -1);

			&::after {
				background-image: linear-gradient(to left, color.adjust($shadowColor, $alpha: -0.75), color.adjust($shadowColor, $alpha: -1));
			}
		}
	}

	&[class*='mod-stickyHeader'] {
		&[class*='mod-stickyColumn'] {
			.table-head-row-cell {
				&[class*='mod-stickyColumn'] {
					z-index: 6;

					&:not(.mod-stickyColumn-shadow) {
						z-index: 7;
					}
				}

				&.mod-stickyColumn-shadowMask {
					&::before {
						inline-size: var(--components-tableFixed-column-sticky-shadow-width);
						inset-inline-start: calc(var(--components-tableFixed-column-sticky-shadow-width) * -1);
						background: var(--pr-t-elevation-surface-raised);
						inset-block: 0;
						z-index: 4;
						position: absolute;
						content: '';
					}
				}

				&:not(.mod-stickyColumn-shadowMask) {
					&:not(.mod-stickyColumn-shadow) {
						+ .mod-stickyColumn-shadowMask {
							&::before {
								inset-inline-start: auto;
								inset-inline-end: calc(var(--components-tableFixed-column-sticky-shadow-width) * -1);
							}
						}
					}
				}
			}
		}
	}
}

@mixin shadow {
	inline-size: 0;
	position: static;
}

@mixin leftOffset($i) {
	inset-inline-start: calc(#{$i} * var(--pr-t-spacings-200));

	&.mod-stickyColumn-shadow,
	.stickyColumn-shadow-wrapper::after {
		inset-inline-start: calc(#{$i} * var(--pr-t-spacings-200) + var(--components-tableFixed-column-sticky-shadow-width));
	}
}

@mixin rightOffset($i) {
	inset-inline-end: calc(#{$i} * var(--pr-t-spacings-200));

	&.mod-stickyColumn-shadow,
	.stickyColumn-shadow-wrapper::after {
		inset-inline-end: calc(#{$i} * var(--pr-t-spacings-200) + var(--components-tableFixed-column-sticky-shadow-width));
	}
}

@mixin wrapper {
	inset-block-end: calc(var(--commons-divider-width) * -1);
	inline-size: var(--components-tableFixed-column-sticky-shadow-width);
	border-block-end-width: var(--commons-divider-width);
	border-block-end-color: var(--commons-divider-color);
	border-block-end-style: solid;
	display: flex;
	position: absolute;
	inset-block-start: 0;

	&::after {
		inline-size: var(--components-tableFixed-column-sticky-shadow-width);
		position: sticky;
		display: block;
		background-color: transparent;
		block-size: 100%;
		content: '';
	}
}

@mixin stickyHeaderCommon {
	.table-head-row-cell {
		background-color: var(--pr-t-elevation-surface-raised);
		position: sticky;
		z-index: 5;
	}
}

@mixin stickyColumnBreakpoint {
	.table-head-row-cell {
		inset-inline: auto !important;
	}
}

@mixin stickyHeaderShadow($shadowColor: #2a3551) {
	.table-body-row-cell,
	.table-foot-row-cell {
		inset-block-start: calc(var(--sticky-header-shadow-offset-top) + var(--components-tableFixed-column-sticky-shadow-width));
		z-index: 4;
		block-size: 0;
		padding: 0;
		border: 0;
		position: sticky;
		background: transparent;
	}

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

		&::after {
			inset-block-start: calc(var(--sticky-header-shadow-offset-top) + var(--components-tableFixed-column-sticky-shadow-width));
			block-size: var(--components-tableFixed-column-sticky-shadow-width);
			background-image: linear-gradient(to bottom, color.adjust($shadowColor, $alpha: -0.75), color.adjust($shadowColor, $alpha: -1));
			inline-size: 100%;
			opacity: 0.5;
		}
	}

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

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

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

	.table-body-row-cell,
	.table-foot-row-cell {
		inset-block-start:
			calc(
				var(commons-banner-height)
				+ var(--sticky-header-shadow-offset-top)
				+ var(--components-tableFixed-column-sticky-shadow-width)
			);

		.stickyHeader-shadow-wrapper {
			&::after {
				inset-block-start:
					calc(
						var(commons-banner-height)
						+ var(--sticky-header-shadow-offset-top)
						+ var(--components-tableFixed-column-sticky-shadow-width)
					);
			}
		}
	}
}