/**
 * Bloc oniti-core/tabs — onglets horizontaux ou verticaux.
 *
 * Front et éditeur. La bibliothèque pose la mécanique — disposition, cible tactile, état
 * actif lisible — et le thème enfant pose le dessin par les custom properties ci-dessous.
 *
 *   --oniti-tabs-gap                       écart entre la liste et les panneaux
 *   --oniti-tabs-list-gap                  écart entre deux onglets
 *   --oniti-tabs-list-width                largeur de la colonne d'onglets (vertical)
 *   --oniti-tabs-tab-gap                   écart icône ↔ libellé
 *   --oniti-tabs-tab-padding               dégagement d'un onglet
 *   --oniti-tabs-tab-radius                arrondi d'un onglet, les quatre coins
 *   --oniti-tabs-tab-radius-<coin>         un coin : top-left, top-right, bottom-right…
 *   --oniti-tabs-tab-stroke                épaisseur du filet
 *   --oniti-tabs-tab-ring                  couleur du filet
 *   --oniti-tabs-tab-background            fond au repos
 *   --oniti-tabs-tab-color                 texte au repos
 *   --oniti-tabs-tab-background-selected   fond de l'onglet actif — défaut : le texte au repos
 *   --oniti-tabs-tab-color-selected        texte de l'onglet actif — défaut : le fond au repos
 *   --oniti-tabs-tab-font-size             taille du libellé
 *   --oniti-tabs-tab-font-weight           graisse du libellé
 *   --oniti-tabs-icon-size                 taille des icônes
 *   --oniti-tabs-trailing-color            couleur de l'icône de fin
 *   --oniti-tabs-trailing-size             taille de l'icône de fin
 *
 * Les réglages de l'inspecteur — couleurs, filet, arrondi, taille et graisse — ont leur
 * sérialisation court-circuitée dans block.json et arrivent ici par ces mêmes propriétés,
 * posées en style inline sur l'enveloppe par render.php. Le thème pose donc les défauts,
 * l'inspecteur les surcharge instance par instance.
 */

/* ==========================================================================
   1. Disposition
   ==========================================================================
   Le repli suit la largeur du BLOC, pas celle de la fenêtre : des onglets verticaux dans une
   colonne étroite doivent se replier comme sur un téléphone.

   Son seuil est un réglage du bloc, or la condition d'une requête de conteneur n'accepte pas
   de `var()` : les règles du repli — liste au-dessus des panneaux, défilement horizontal —
   sont donc émises par render.php, en une feuille par instance. Deux choses à savoir avant
   d'y toucher :

   - elles ne visent que les ENFANTS de l'enveloppe. Celle-ci est le conteneur interrogé, et
     un élément ne répond jamais à sa propre requête. C'est ce qui rendait muet l'ancien
     seuil de 48rem écrit ici : il ne jouait que sur des onglets IMBRIQUÉS dans d'autres.
   - le repli fait donc enjamber les deux colonnes à la liste et aux panneaux, au lieu de
     redéfinir `grid-template-columns` sur l'enveloppe.
   ========================================================================== */

.oniti-tabs {
	container: oniti-tabs / inline-size;
}

.oniti-tabs--vertical {
	display: grid;
	grid-template-columns: var( --oniti-tabs-list-width, 34% ) 1fr;
	gap: var( --oniti-tabs-gap, 1.5rem );
	align-items: start;
}

.oniti-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --oniti-tabs-list-gap, 0.5rem );
}

.oniti-tabs--vertical .oniti-tabs__list {
	flex-direction: column;
	flex-wrap: nowrap;
}

.oniti-tabs--horizontal .oniti-tabs__list {
	margin-block-end: var( --oniti-tabs-gap, 1.5rem );
}

/* ==========================================================================
   2. Les onglets
   ========================================================================== */

.oniti-tabs__tab {
	display: flex;
	align-items: center;
	gap: var( --oniti-tabs-tab-gap, 0.75rem );

	/* 2.75rem : la cible tactile de 44px du RGAA, en rem pour suivre le zoom texte. */
	min-block-size: 2.75rem;
	padding: var( --oniti-tabs-tab-padding, 0.75rem 1rem );

	/*
	 * Filet en propriétés séparées, jamais un raccourci : le panneau ne règle souvent que
	 * l'épaisseur ou que la couleur, et un raccourci exigerait ses trois valeurs.
	 * « ring » et non « border-color » dans le nom du token : wp-block-library pose
	 * `html :where([style*=border-color]){border-style:solid}`, dont le sélecteur inspecte
	 * la chaîne brute de l'attribut `style`.
	 */
	border: var( --oniti-tabs-tab-stroke, 0 ) solid var( --oniti-tabs-tab-ring, transparent );

	/*
	 * Un coin par propriété, le réglage lié en repli : le contrôle d'arrondi envoie soit
	 * une valeur unique, soit les quatre coins séparément.
	 */
	border-radius:
		var( --oniti-tabs-tab-radius-top-left, var( --oniti-tabs-tab-radius, 0 ) )
		var( --oniti-tabs-tab-radius-top-right, var( --oniti-tabs-tab-radius, 0 ) )
		var( --oniti-tabs-tab-radius-bottom-right, var( --oniti-tabs-tab-radius, 0 ) )
		var( --oniti-tabs-tab-radius-bottom-left, var( --oniti-tabs-tab-radius, 0 ) );

	background: var( --oniti-tabs-tab-background, transparent );
	color: var( --oniti-tabs-tab-color, inherit );

	/*
	 * Longhands et non `font: inherit` : le raccourci remettrait la graisse du contexte et
	 * écraserait le réglage du panneau. `inherit` en repli sur chacune neutralise quand
	 * même la feuille de l'agent utilisateur, qui donne au <button> sa propre police.
	 */
	font-family: inherit;
	font-size: var( --oniti-tabs-tab-font-size, inherit );
	font-weight: var( --oniti-tabs-tab-font-weight, inherit );
	line-height: 1.3;
	text-align: start;
	cursor: pointer;
}

/* En colonne, les onglets occupent toute la largeur : c'est la barre entière qui
   s'allume, comme dans la maquette. En ligne, ils épousent leur libellé. */
.oniti-tabs--vertical .oniti-tabs__tab {
	inline-size: 100%;
}

/*
 * Défaut de l'état actif : les deux couleurs du repos s'échangent. Un onglet blanc à texte
 * marine donne donc un onglet actif marine à texte blanc, sans qu'aucune valeur de maquette
 * entre dans oniti-core. Régler explicitement les deux tokens `-selected` reprend la main.
 *
 * Les valeurs en clair et jamais `currentColor` : dans une règle qui pose `color` ET
 * `background`, `currentColor` se résoudrait sur la couleur qu'on vient d'écrire. En dernier
 * recours `canvastext` / `canvas`, couleurs système, donc justes en clair comme en sombre.
 *
 * Le survol reprend l'état actif — c'est l'aperçu de ce que le clic donnera. Seules les
 * couleurs bougent : l'icône et l'icône de fin restent en place, sinon le libellé se
 * redécouperait au passage de la souris.
 */
.oniti-tabs__tab[ aria-selected="true" ],
.oniti-tabs__tab[ aria-pressed="true" ],
.oniti-tabs__tab:hover {
	background: var(
		--oniti-tabs-tab-background-selected,
		var( --oniti-tabs-tab-color, canvastext )
	);
	color: var(
		--oniti-tabs-tab-color-selected,
		var( --oniti-tabs-tab-background, canvas )
	);
}

.oniti-tabs__tab:focus-visible {
	outline: 0.125rem solid currentColor;
	outline-offset: 0.125rem;
}

.oniti-tabs__icon {
	display: inline-flex;
	flex: none;
}

/*
 * L'icône de fin est poussée au bord opposé au libellé. `margin-inline-start: auto` plutôt
 * qu'un `justify-content: space-between` sur le bouton : le libellé garde son alignement au
 * début quand il passe sur deux lignes.
 *
 * Sa couleur est portée par l'enveloppe et non par le SVG : oniti_icon_markup() laisse les
 * icônes en `currentColor`, donc régler `color` ici suffit — et sans token, l'icône prend
 * simplement la couleur du libellé.
 */
.oniti-tabs__icon--trailing {
	margin-inline-start: auto;
	color: var( --oniti-tabs-trailing-color, inherit );
}

/* Descendant : l'aperçu de l'éditeur porte `.oniti-icon__svg`, pas notre classe. */
.oniti-tabs__icon svg {
	block-size: var( --oniti-tabs-icon-size, 1.25rem );
	inline-size: auto;
}

/* Après la règle ci-dessus : même spécificité, l'ordre décide. */
.oniti-tabs__icon--trailing svg {
	block-size: var( --oniti-tabs-trailing-size, var( --oniti-tabs-icon-size, 1.25rem ) );
}

/* ==========================================================================
   3. Les panneaux
   ==========================================================================
   L'attribut `hidden` ne masque que par la feuille de l'agent utilisateur : un `display`
   posé par le thème l'emporterait et tous les panneaux s'afficheraient.
   ========================================================================== */

.oniti-tabs__panel[ hidden ],
.oniti-tabs__fallback-title[ hidden ] {
	display: none;
}

/* Un enfant de grille refuse par défaut de passer sous la largeur de son contenu : une
   image large dans un panneau déborderait de sa colonne au lieu de se contraindre. */
.oniti-tabs--vertical .oniti-tabs__list,
.oniti-tabs--vertical .oniti-tabs__panels {
	min-inline-size: 0;
}

/* ==========================================================================
   4. Aperçu de l'éditeur
   ==========================================================================
   view.js ne tourne pas dans le canevas : edit.js émet une règle par instance pour ne
   montrer que le panneau choisi. Ici, seul l'habillage de la liste est repris.
   ========================================================================== */

.oniti-tabs--editor .oniti-tabs__add {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	border: 1px dashed currentColor;
	border-radius: var( --oniti-tabs-tab-radius, 0 );
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	opacity: 0.6;
}