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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	font-size: var(--components-table-font-size);
	line-height: var(--components-table-line-height);
	border-spacing: 0;
	display: table;
	text-align: start;
	inline-size: 100%;
	color: var(--pr-t-color-text);

	@at-root ($atRoot) {
		.table-head {
			display: table-header-group;
			vertical-align: bottom;
		}

		.table-foot {
			display: table-footer-group;
		}

		.table-head-row {
			display: table-row;
		}

		.table-head-row-cell {
			color: var(--palettes-neutral-600);
			font-size: var(--pr-t-font-body-S-fontSize);
			line-height: var(--pr-t-font-body-S-lineHeight);
			padding: var(--components-table-padding);
			border-block-end-width: var(--commons-divider-width);
			border-block-end-color: var(--commons-divider-color);
			border-block-end-style: solid;
			display: table-cell;
			text-align: start;
			font-weight: var(--pr-t-font-fontWeight-semibold);
		}

		.table-body {
			display: table-row-group;
		}

		.table-body-row,
		.table-foot-row {
			background-color: var(--pr-t-elevation-surface-raised);
			display: table-row;

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

			&:last-child {
				.table-body-row-cell,
				.table-foot-row-cell {
					border-block-end-width: var(--commons-divider-width);
					border-block-end-color: var(--commons-divider-color);
					border-block-end-style: solid;
				}
			}
		}

		.table-body-row-cell,
		.table-foot-row-cell {
			padding: var(--components-table-padding);
			border-block-start-width: var(--commons-divider-width);
			border-block-start-color: var(--commons-divider-color);
			border-block-start-style: solid;
			display: table-cell;
			vertical-align: middle;
			text-align: inherit;
		}
	}
}