$sy-table-radius: 8px;
$sy-table-border: 1px solid rgb(var(--v-theme-disabled));

// Valeurs par défaut des variables de personnalisation. Elles ne sont pas redéfinies sur `.v-table` :
// le projet peut ainsi les poser sur n'importe quel ancêtre du tableau.
$sy-table-pinned-cell-bg: var(--sy-table-pinned-cell-bg, rgb(var(--v-theme-surface)));
$sy-table-pinned-shadow-color: rgba(var(--v-theme-grey-base), 0.6);
$sy-table-pinned-left-shadow: var(--sy-table-pinned-left-shadow, 2px 0 6px -4px #{$sy-table-pinned-shadow-color});
$sy-table-pinned-right-shadow: var(--sy-table-pinned-right-shadow, -2px 0 6px -4px #{$sy-table-pinned-shadow-color});
$sy-table-checkbox-color: var(--sy-table-checkbox-color, rgb(var(--v-theme-primary)));

// Fond opaque d'une cellule épinglée, sur lequel se superpose la couleur de sa ligne.
@mixin pinned-cell-background {
	background:
		linear-gradient(
			var(--sy-table-row-bg, transparent),
			var(--sy-table-row-bg, transparent)
		),
		$sy-table-pinned-cell-bg;
}

@mixin tablestyles {
	.v-table {
		border: $sy-table-border;
		border-radius: $sy-table-radius;
		overflow: hidden;

		--sy-table-header-bg-pinned: color-mix(in srgb, rgb(var(--v-theme-info-variant)) 20%, rgb(var(--v-theme-surface)));

		// Couleur de ligne : redéfinie par `striped` ou par le projet sur le `tr` (via `row-props`)
		--sy-table-row-bg: transparent;

		// Standardisation des z-index pour les tableaux
		--sy-table-z-base: 1;
		--sy-table-z-pinned-cell: calc(var(--sy-table-z-base) + 2);
		--sy-table-z-pinned-header: calc(var(--sy-table-z-base) + 4);
		--sy-table-z-progress: calc(var(--sy-table-z-base) + 5);
	}

	.sy-table__pinned {
		position: sticky;

		@include pinned-cell-background;
	}

	.sy-table__pinned--left {
		left: var(--sy-pinned-offset);
		z-index: var(--sy-table-z-pinned-cell);
	}

	.sy-table__pinned--right {
		right: var(--sy-pinned-offset);
		z-index: var(--sy-table-z-pinned-cell);
	}

	.sy-table-bulk-actions {
		border: $sy-table-border;
		border-bottom: 0;
		border-radius: $sy-table-radius $sy-table-radius 0 0;
	}

	.sy-table-bulk-actions + .v-table {
		border-top: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	table thead tr {
		white-space: nowrap;
	}

	table thead tr.filters,
	table thead tr.reset {
		background-color: rgb(var(--v-theme-info-variant-lighten));
	}

	table thead tr.headers,
	table thead tr.reset {
		background-color: rgba(var(--v-theme-info-variant), 0.2);
	}

	&.fixed-min-height {
		.v-data-table__wrapper {
			min-height: 540px;
		}
	}

	&.no-mobile-header {
		.v-data-table-header-mobile {
			display: none;
		}
	}

	.v-field {
		&--active {
			.v-field__prepend-inner > .v-icon,
			.v-field__append-inner > .v-icon,
			.v-field__clearable > .v-icon {
				opacity: 1;
				color: rgb(var(--v-theme-primary));
			}
		}

		&--focused {
			border-color: rgb(var(--v-theme-primary));
			color: rgb(var(--v-theme-primary));
		}
	}

	// Override Vuetify's checkbox styles to use primary color
	.v-table .v-selection-control {
		color: $sy-table-checkbox-color;
	}

	.v-table .v-selection-control--dirty .v-selection-control__input::before {
		background-color: $sy-table-checkbox-color;
		border-color: $sy-table-checkbox-color;
	}

	// Target the header checkbox specifically
	.v-data-table-header__checkbox .v-selection-control {
		color: $sy-table-checkbox-color;
	}

	// Target the row checkboxes specifically
	.v-data-table-row__checkbox .v-selection-control {
		color: $sy-table-checkbox-color;
	}

	// Add a global style for all checkboxes in the table
	.v-checkbox .v-selection-control__input::before,
	.v-checkbox-btn .v-selection-control__input::before {
		border-color: $sy-table-checkbox-color !important;
	}

	// Aligner la checkbox de sélection de ligne sur celle de l'en-tête :
	// la cellule d'en-tête a 16px de padding-left, la cellule de ligne 8px par défaut.
	.v-data-table__td--select-row {
		padding-left: 16px;
	}

	// Centrer le focus ring sur la case à cocher
	.v-selection-control--focus-visible {
		outline: none;
	}

	.v-selection-control--focus-visible .v-selection-control__input {
		outline: 2px solid rgb(var(--v-theme-primary));
		outline-offset: 2px;
		border-radius: 4px;
	}

	.v-data-table-rows-no-data {
		color: rgb(var(--v-theme-grey-base));
	}

	// Focus clavier fortement contrasté sur les boutons du tableau
	// (pagination, redimensionnement, boutons d'actions…) : anneau primaire 2px
	// avec décalage, homogène avec le focus des cases à cocher.
	.v-btn:focus-visible,
	.resizer:focus-visible {
		outline: 2px solid rgb(var(--v-theme-primary));
		outline-offset: 2px;
	}

	// Ensure loading progress bar appears above sticky/pinned header cells
	.v-data-table-progress th {
		position: sticky;
		top: 0;
		z-index: var(--sy-table-z-progress);
	}
}

@mixin clickable-row-styles {
	.v-table tbody > tr.sy-table__clickable-row,
	.v-data-table__tbody > tr.sy-table__clickable-row {
		cursor: pointer !important;
		outline-offset: -2px;
	}

	.v-table tbody > tr.sy-table__clickable-row:focus-visible,
	.v-data-table__tbody > tr.sy-table__clickable-row:focus-visible {
		outline: 2px solid rgb(var(--v-theme-primary));
	}

	.v-table tbody > tr.sy-table__clickable-row > td,
	.v-table tbody > tr.sy-table__clickable-row > .v-data-table__td,
	.v-data-table__tbody > tr.sy-table__clickable-row > td,
	.v-data-table__tbody > tr.sy-table__clickable-row > .v-data-table__td {
		cursor: pointer !important;
		transition: background-color 0.15s ease;
	}

	// Fond réservé au survol : au focus clavier, on ne veut que le ring (ci-dessus), pas de fond.
	.v-table tbody > tr.sy-table__clickable-row:hover > td,
	.v-table tbody > tr.sy-table__clickable-row:hover > .v-data-table__td,
	.v-data-table__tbody > tr.sy-table__clickable-row:hover > td,
	.v-data-table__tbody > tr.sy-table__clickable-row:hover > .v-data-table__td {
		background-color: rgba(var(--v-theme-primary), 0.08) !important;
	}
}

// Zébrage des lignes paires (prop `striped`). La couleur passe par `--sy-table-row-bg`
// pour être reprise par les cellules épinglées.
@mixin striped-rows {
	.v-table tbody tr:nth-child(even) {
		--sy-table-row-bg:
			color-mix(
				in srgb,
				rgb(var(--v-theme-primary)) 5%,
				rgb(var(--v-theme-surface))
			);

		background-color: var(--sy-table-row-bg);
	}
}

// Styles des colonnes épinglées et de la colonne de sélection épinglée, partagés par SyTable et SyServerTable.
// `$root` est la classe racine du composant (`sy-table` / `sy-server-table`), qui porte les modificateurs d'état.
/* stylelint-disable @stylistic/max-line-length */
@mixin pinned-styles($root) {
	.#{$root} :deep(.sy-table__pinned) {
		box-shadow: none;
	}

	// Vuetify rend semi-transparentes les cellules d'un tableau en chargement (`VDataTable.css`), y compris les
	// cellules `--fixed` : une cellule épinglée laisserait alors voir le contenu qui défile dessous.
	.#{$root} :deep(.v-data-table--loading .sy-table__pinned),
	.#{$root} :deep(.v-data-table--loading .v-data-table__td--select-row) {
		opacity: 1 !important;
	}

	.#{$root}--pinned-left-shadow :deep(.sy-table__pinned--left) {
		box-shadow: $sy-table-pinned-left-shadow;
	}

	.#{$root}--pinned-right-shadow :deep(.sy-table__pinned--right) {
		box-shadow: $sy-table-pinned-right-shadow;
	}

	// En sélection simple, l'en-tête de la colonne de sélection est vide : ni fond ni ombre.
	// `!important` est nécessaire, car le `th` porte un style inline (slot `#headers`).
	.#{$root}--select-single.#{$root}--pinned-select-left :deep(.v-table__wrapper > table > thead > tr > th.checkbox-column) {
		box-shadow: none !important;
		background: transparent !important;
	}

	.#{$root}--pinned-select-left :deep(.v-table__wrapper > table > tbody > tr > .v-data-table__td--select-row) {
		position: sticky;
		left: 0;
		z-index: var(--sy-table-z-pinned-cell);

		@include pinned-cell-background;
	}

	.#{$root}--pinned-left-shadow.#{$root}--pinned-select-left :deep(.v-table__wrapper > table > tbody > tr > .v-data-table__td--select-row) {
		box-shadow: $sy-table-pinned-left-shadow;
	}
}
/* stylelint-enable @stylistic/max-line-length */

// Indicateur de défilement horizontal (#2706) : ombre au bord de la zone qui défile, tant que du contenu
// est masqué de ce côté et qu'aucune colonne n'y est épinglée (l'ombre de la colonne joue alors ce rôle).
// L'élément est placé juste hors du tableau (rogné par `overflow: hidden`) : seule son ombre est visible,
// identique à celle d'une colonne épinglée. Il couvre uniquement la zone qui défile (`--sy-table-scroll-area-*`).
@mixin scroll-indicator-styles($root) {
	.#{$root} :deep(.v-table) {
		position: relative;
	}

	.#{$root}--scroll-left-indicator :deep(.v-table)::before,
	.#{$root}--scroll-right-indicator :deep(.v-table)::after {
		content: '';
		position: absolute;
		top: var(--sy-table-scroll-area-top, 0);

		// Assez large pour que le `spread` négatif de l'ombre ne l'annule pas
		width: 24px;
		height: var(--sy-table-scroll-area-height, 100%);
		z-index: calc(var(--sy-table-z-pinned-header) + 1);
		pointer-events: none;
	}

	.#{$root}--scroll-left-indicator :deep(.v-table)::before {
		right: 100%;
		box-shadow: $sy-table-pinned-left-shadow;
	}

	.#{$root}--scroll-right-indicator :deep(.v-table)::after {
		left: 100%;
		box-shadow: $sy-table-pinned-right-shadow;
	}
}