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

@mixin S {
	font-size: var(--pr-t-font-body-S-fontSize);
	line-height: var(--pr-t-font-body-S-lineHeight);
}

@mixin zebra {
	.table-body {
		tr:nth-child(odd) {
			background-color: var(--components-table-zebra-background);
		}
	}
}

@mixin alignTop {
	.table-body-row-cell {
		vertical-align: top;
	}
}

@mixin clickable {
	.table-body-row-cell,
	.table-foot-row-cell {
		transition-duration: var(--commons-animations-durations-fast);
		transition-property: background-color;
	}

	.table-body-row-cell-action,
	.table-foot-row-cell-action {
		color: var(--palettes-neutral-800);
		text-decoration: none;

		&:hover,
		&:focus {
			text-decoration: underline;
		}
	}

	.table-body-row,
	.table-foot-row {
		cursor: pointer;

		&:hover,
		&:focus-within {
			.table-body-row-cell {
				background-color: var(--components-table-hover-background);
			}
		}
	}
}

@mixin card {
	border-block-start: 0;

	:where(.table-head, .table-body, .table-foot) {
		&:first-child {
			:where(.table-head-row, .table-body-row, .table-foot-row) {
				&:first-child {
					:where(.table-head-row-cell, .table-body-row-cell) {
						&:first-child {
							border-start-start-radius: var(--components-card-border-radius);
						}

						&:last-child {
							border-start-end-radius: var(--components-card-border-radius);
						}
					}
				}
			}
		}

		&:last-child {
			:where(.table-head-row, .table-body-row, .table-foot-row) {
				&:last-child {
					:where(.table-body-row-cell, .table-foot-row-cell) {
						&:first-child {
							border-end-start-radius: var(--components-card-border-radius);
						}

						&:last-child {
							border-end-end-radius: var(--components-card-border-radius);
						}
					}
				}
			}
		}
	}

	.table-head-row-cell {
		border-block-start: 0;
	}

	.table-body,
	.table-foot {
		&:last-child {
			.table-body-row-cell,
			.table-foot-row-cell {
				border-block-end: none;
			}
		}
	}

	.table-body-row,
	.table-foot-row {
		background-color: transparent;
	}

	.table-head-row-cell,
	.table-body-row-cell,
	.table-foot-row-cell {
		&:first-child {
			padding-inline-start: var(--components-table-card-padding);
		}

		&:last-child {
			padding-inline-end: var(--components-table-card-padding);
		}

		&.mod-actions {
			padding-inline-end: var(--pr-t-spacings-100);
		}
	}
}

@mixin borderless {
	@include noOffset;

	border: none;

	.table-head-row-cell,
	.table-body-row-cell,
	.table-foot-row-cell {
		border-block-start: none;
	}
}

@mixin header {
	vertical-align: bottom;
}

@mixin parent {
	.table-body-row-cell,
	.table-foot-row-cell {
		color: var(--palettes-neutral-700);
		background-color: var(--palettes-neutral-50);
		font-size: var(--pr-t-font-body-S-fontSize);
		line-height: var(--pr-t-font-body-S-lineHeight);
		font-weight: var(--pr-t-font-fontWeight-semibold);
	}
}

@mixin collapsable {
	.table-body-row-cell,
	.table-foot-row-cell {
		cursor: pointer;
		text-decoration: none;

		&:hover {
			outline: none;
		}

		&:focus-visible,
		&:hover {
			outline: none;
			text-decoration: underline;
		}

		&::before {
			@include icon.generate('arrow_chevron_top');

			font-size: var(--pr-t-font-body-M-lineHeight);
			font-weight: var(--pr-t-font-fontWeight-regular);
			margin-inline-end: var(--pr-t-spacings-100);
			transition-duration: var(--commons-animations-durations-fast);
			transition-property: transform;
			vertical-align: top;
		}
	}

	&.is-collapsed {
		.table-body-row-cell,
		.table-foot-row-cell {
			&::before {
				transform: rotate(180deg);
			}
		}
	}
}

@mixin child {
	.table-body-row-cell,
	.table-foot-row-cell {
		&:first-child {
			padding-inline-start: var(--pr-t-spacings-600);
		}
	}
}

@mixin draggable($atRoot: namespace.$defaultAtRoot) {
	@at-root ($atRoot) {
		.table-body-row-cell-handler,
		.table-foot-row-cell-handler {
			inset-block: 0;
			inset-inline-start: 0;
			inline-size: var(--pr-t-spacings-400);
			position: absolute;
			cursor: move;

			&::after {
				@include icon.generate('dots_drag');

				color: var(--palettes-neutral-600);
				font-size: var(--pr-t-font-body-M-lineHeight);
				block-size: 100%;
				margin: auto;
				display: flex;
				align-items: center;
			}
		}
	}

	.table-head-row-cell,
	.table-body-row-cell,
	.table-foot-row-cell {
		&:first-child {
			padding-inline-start: var(--pr-t-spacings-400);
			position: relative;
		}
	}
}

@mixin selectable {
	.table-head-row-cell,
	.table-body-row-cell,
	.table-foot-row-cell {
		&:first-child {
			padding-inline-end: var(--pr-t-spacings-100);
			inline-size: var(--pr-t-spacings-200);
		}
	}

	&:has(input[type='checkbox']:checked) {
		.table-head-row-cell,
		.table-body-row-cell,
		.table-foot-row-cell {
			background-color: var(--palettes-product-50);
		}
	}
}

@mixin clickableSelectable {
	&:hover {
		&:has(input[type='checkbox']:checked) {
			.table-head-row-cell,
			.table-body-row-cell,
			.table-foot-row-cell {
				background-color: var(--palettes-product-100);
			}
		}
	}
}

@mixin twoLines($atRoot: namespace.$defaultAtRoot) {
	@at-root ($atRoot) {
		.table-head-row-cell-secondLine {
			margin-block-start: var(--pr-t-spacings-50);
			display: block;
			font-weight: var(--pr-t-font-fontWeight-regular);
		}
	}

	.table-head-row-cell {
		vertical-align: top;
	}

	.table-head-row-cell-wrapper {
		max-inline-size: calc(100% - var(--pr-t-spacings-400));
		display: inline-block;
		vertical-align: top;
	}

	.table-head-row-cell-secondLine {
		margin-block-start: var(--pr-t-spacings-50);
		display: block;
		font-weight: var(--pr-t-font-fontWeight-regular);
	}
}

@mixin avatar {
	padding-inline-end: 0;
	inline-size: var(--pr-t-spacings-400);
}

@mixin actions {
	padding: 0.3rem;
	padding-inline-end: var(--pr-t-spacings-100);
	padding-inline-start: 0;
	transition-duration: var(--commons-animations-durations-fast);
	transition-property: opacity;
	text-align: end;
	white-space: nowrap;
}

@mixin actionsHidden {
	@media (hover: hover) {
		> * {
			&:not(.is-loading) {
				opacity: 0;
			}
		}

		.table-head-row:hover &,
		.table-body-row:hover &,
		.table-foot-row:hover & {
			> * {
				opacity: 1;
			}
		}

		.table-head-row:focus-within &,
		.table-body-row:focus-within &,
		.table-foot-row:focus-within & {
			> * {
				opacity: 1;
			}
		}
	}
}

@mixin alignCenter {
	text-align: center;
}

@mixin alignRight {
	text-align: end;
}

@mixin noOffset {
	.table-head-row-cell,
	.table-body-row-cell,
	.table-foot-row-cell {
		&:first-child {
			padding-inline-start: 0;
		}

		&:last-child {
			padding-inline-end: 0;
		}
	}
}