/**
 * Visiora Core — Composant : Badge
 *
 * Badge informatif, catégoriel, contextuel ou interactif.
 *
 * Dépendances :
 * - colors.css
 * - spacing.css
 * - typography.css
 * - radius.css
 * - shadows.css
 * - opacity.css
 * - animation.css
 * - containers.css
 * - primitives/icon.css
 * - primitives/status-dot.css
 *
 * @package Visiora_Core
 */

/* ======================================================
   1. BASE
   ====================================================== */

.v-badge {
	--v-badge-background: var(--v-color-surface-muted);
	--v-badge-background-hover: var(--v-color-surface-muted);

	--v-badge-border: var(--v-color-border);
	--v-badge-border-hover: var(--v-color-border-strong);

	--v-badge-text: var(--v-color-text);
	--v-badge-text-hover: var(--v-color-heading);

	--v-badge-min-block-size: 1.5rem;
	--v-badge-padding-block: var(--v-space-1);
	--v-badge-padding-inline: var(--v-space-2);
	--v-badge-font-size: var(--v-font-size-xs);
	--v-badge-icon-size: var(--v-size-icon-xs);

	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: var(--v-space-1);
	max-inline-size: 100%;
	min-inline-size: 0;
	min-block-size: var(--v-badge-min-block-size);
	padding:
		var(--v-badge-padding-block)
		var(--v-badge-padding-inline);
	background-color: var(--v-badge-background);
	border:
		var(--v-size-border-thin)
		solid
		var(--v-badge-border);
	border-radius: var(--v-radius-badge);
	color: var(--v-badge-text);
	font-family: var(--v-font-family-body);
	font-size: var(--v-badge-font-size);
	font-weight: var(--v-font-weight-semibold);
	line-height: var(--v-line-height-none);
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
}

/* ======================================================
   2. LIBELLÉ
   ====================================================== */

.v-badge__label {
	display: block;
	min-inline-size: 0;
	overflow: hidden;
	color: inherit;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ======================================================
   3. ICÔNE
   ====================================================== */

/*
 * .v-badge__icon constitue uniquement un crochet contextuel.
 *
 * Usage recommandé :
 *
 * <svg class="v-icon v-badge__icon">...</svg>
 *
 * UI-009 Icon reste responsable du dessin SVG.
 * Badge définit uniquement la taille contextuelle.
 */

.v-badge__icon {
	flex: 0 0 auto;
	inline-size: var(--v-badge-icon-size);
	block-size: var(--v-badge-icon-size);
	color: inherit;
}

/*
 * Un wrapper autour de UI-009 Icon reste autorisé :
 *
 * <span class="v-badge__icon">
 *     <svg class="v-icon">...</svg>
 * </span>
 */

.v-badge__icon > .v-icon {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* ======================================================
   4. POINT DE STATUT
   ====================================================== */

/*
 * Le point réutilise exclusivement UI-007 Status Dot :
 *
 * <span
 *     class="
 *         v-status-dot
 *         v-status-dot--sm
 *         v-status-dot--success
 *         v-badge__dot
 *     "
 *     aria-hidden="true"
 * ></span>
 *
 * .v-badge__dot ne définit ni taille, ni couleur,
 * ni arrière-plan, ni rayon.
 */

.v-badge__dot {
	flex: 0 0 auto;
}

/* ======================================================
   5. VARIANTES SÉMANTIQUES
   ====================================================== */

.v-badge--neutral {
	--v-badge-background: var(--v-color-surface-muted);
	--v-badge-background-hover: var(--v-color-surface-muted);

	--v-badge-border: var(--v-color-border);
	--v-badge-border-hover: var(--v-color-border-strong);

	--v-badge-text: var(--v-color-text);
	--v-badge-text-hover: var(--v-color-heading);
}

.v-badge--primary {
	--v-badge-background: var(--v-color-primary-soft);
	--v-badge-background-hover: var(--v-color-primary-soft);

	--v-badge-border: var(--v-color-primary-border);
	--v-badge-border-hover: var(--v-color-primary);

	--v-badge-text: var(--v-color-primary-text);
	--v-badge-text-hover: var(--v-color-primary-hover);
}

.v-badge--success {
	--v-badge-background: var(--v-color-success-soft);
	--v-badge-background-hover: var(--v-color-success-soft);

	--v-badge-border: var(--v-color-success-border);
	--v-badge-border-hover: var(--v-color-success);

	--v-badge-text: var(--v-color-success-text);
	--v-badge-text-hover: var(--v-color-success-hover);
}

.v-badge--warning {
	--v-badge-background: var(--v-color-warning-soft);
	--v-badge-background-hover: var(--v-color-warning-soft);

	--v-badge-border: var(--v-color-warning-border);
	--v-badge-border-hover: var(--v-color-warning);

	--v-badge-text: var(--v-color-warning-text);
	--v-badge-text-hover: var(--v-color-warning-hover);
}

.v-badge--danger {
	--v-badge-background: var(--v-color-danger-soft);
	--v-badge-background-hover: var(--v-color-danger-soft);

	--v-badge-border: var(--v-color-danger-border);
	--v-badge-border-hover: var(--v-color-danger);

	--v-badge-text: var(--v-color-danger-text);
	--v-badge-text-hover: var(--v-color-danger-hover);
}

.v-badge--info {
	--v-badge-background: var(--v-color-info-soft);
	--v-badge-background-hover: var(--v-color-info-soft);

	--v-badge-border: var(--v-color-info-border);
	--v-badge-border-hover: var(--v-color-info);

	--v-badge-text: var(--v-color-info-text);
	--v-badge-text-hover: var(--v-color-info-hover);
}

/* ======================================================
   6. TAILLES
   ====================================================== */

.v-badge--sm {
	--v-badge-min-block-size: 1.25rem;
	--v-badge-padding-block: 0;
	--v-badge-padding-inline: var(--v-space-2);
	--v-badge-font-size: var(--v-font-size-2xs);
	--v-badge-icon-size: var(--v-size-icon-xs);
}

.v-badge--lg {
	--v-badge-min-block-size: 1.75rem;
	--v-badge-padding-block: var(--v-space-1);
	--v-badge-padding-inline: var(--v-space-3);
	--v-badge-font-size: var(--v-font-size-sm);
	--v-badge-icon-size: var(--v-size-icon-sm);
}

/*
 * Les hauteurs 1.25rem, 1.5rem et 1.75rem constituent
 * actuellement les dimensions historiques du Badge.
 *
 * Leur éventuelle centralisation sera examinée pendant
 * l’audit global des tokens de contrôle.
 */

/* ======================================================
   7. FORMES
   ====================================================== */

.v-badge--pill {
	border-radius: var(--v-radius-full);
}

.v-badge--square {
	aspect-ratio: 1;
	padding-inline: var(--v-space-1);
}

/*
 * aspect-ratio: 1 constitue la géométrie structurelle
 * d’un carré et ne nécessite aucun Design Token.
 */

/* ======================================================
   8. BADGE INTERACTIF
   ====================================================== */

a.v-badge,
button.v-badge {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	touch-action: manipulation;
	user-select: none;
	transition:
		background-color var(--v-transition-interactive),
		border-color var(--v-transition-interactive),
		color var(--v-transition-interactive),
		box-shadow var(--v-transition-interactive);
}

/*
 * Ne pas déclarer font: inherit ici.
 *
 * Ce raccourci posséderait une spécificité supérieure à
 * .v-badge et écraserait la famille, la taille, la graisse
 * et la hauteur de ligne officielles du composant.
 */

a.v-badge:hover,
button.v-badge:hover {
	background-color: var(--v-badge-background-hover);
	border-color: var(--v-badge-border-hover);
	color: var(--v-badge-text-hover);
	text-decoration: none;
}

a.v-badge:focus,
button.v-badge:focus {
	outline: none;
}

a.v-badge:focus-visible,
button.v-badge:focus-visible {
	border-color: var(--v-color-border-focus);
	box-shadow: var(--v-shadow-focus);
	outline: none;
}

/* ======================================================
   9. ÉTATS
   ====================================================== */

.v-badge.is-muted {
	opacity: var(--v-opacity-muted);
}

.v-badge.is-disabled,
.v-badge[aria-disabled="true"],
button.v-badge:disabled {
	cursor: not-allowed;
	opacity: var(--v-opacity-disabled);
	pointer-events: none;
}

.v-badge.is-hidden,
.v-badge[hidden] {
	display: none;
}

/*
 * Sur un élément button natif, privilégier l’attribut disabled.
 *
 * Sur un lien, aria-disabled="true" doit être accompagné
 * d’une prévention fonctionnelle de la navigation côté
 * intégration lorsqu’il reste doté d’un href.
 */

/* ======================================================
   10. ACCESSIBILITÉ DU MODE SQUARE
   ====================================================== */

/*
 * Le label reste dans le DOM afin de fournir un nom accessible
 * lorsque le Badge carré est interactif.
 */

.v-badge--square .v-badge__label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Un Badge carré interactif conserve :
 *
 * - un .v-badge__label visuellement masqué ;
 * - ou un aria-label équivalent.
 *
 * L’icône interne reste décorative avec aria-hidden="true".
 */

/* ======================================================
   11. RESPONSIVE
   ====================================================== */

/*
 * Correspond au breakpoint historique sm : 40rem.
 *
 * Sa centralisation sera traitée pendant l’audit global
 * des breakpoints.
 */

@media (max-width: 40rem) {
	.v-badge--mobile-wrap {
		white-space: normal;
	}

	.v-badge--mobile-wrap .v-badge__label {
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
	}
}

/* ======================================================
   12. FORCED COLORS
   ====================================================== */

@media (forced-colors: active) {
	.v-badge {
		background-color: Canvas;
		border-color: CanvasText;
		color: CanvasText;
		forced-color-adjust: auto;
	}

	a.v-badge:focus-visible,
	button.v-badge:focus-visible {
		outline:
			var(--v-size-border-medium)
			solid
			Highlight;
		outline-offset: var(--v-size-border-medium);
		box-shadow: none;
	}

	.v-badge.is-disabled,
	.v-badge[aria-disabled="true"],
	button.v-badge:disabled {
		color: GrayText;
	}
}

/* ======================================================
   13. REDUCED MOTION
   ====================================================== */

@media (prefers-reduced-motion: reduce) {
	a.v-badge,
	button.v-badge {
		transition: none;
	}
}

/* ======================================================
   14. COMPATIBILITÉ WORDPRESS
   ====================================================== */

.v-root .v-badge,
.editor-styles-wrapper .v-badge {
	box-sizing: border-box;
}

/*
 * Ne pas déclarer color dans les règles de compatibilité
 * appliquées aux liens Badge.
 *
 * Une déclaration plus spécifique et placée tardivement
 * neutraliserait la couleur hover pilotée par
 * --v-badge-text-hover.
 */

.v-root a.v-badge,
.editor-styles-wrapper a.v-badge {
	text-decoration: none;
}

/*
 * Ne pas appliquer font: inherit à button.v-badge.
 *
 * La typographie doit rester exclusivement pilotée
 * par la classe principale .v-badge.
 */

/* ======================================================
   15. COMPATIBILITÉ GUTENBERG
   ====================================================== */

.wp-block .v-badge {
	max-inline-size: 100%;
}

/* ======================================================
   16. COMPATIBILITÉ SPECTRA
   ====================================================== */

.uagb-container__content .v-badge,
.uagb-infobox .v-badge,
.uagb-buttons__outer-wrap .v-badge {
	max-inline-size: 100%;
}

/* ======================================================
   17. PERFORMANCE ET SÉCURITÉ
   ====================================================== */

/*
 * - Aucun filtre graphique.
 * - Aucun point de statut réimplémenté.
 * - Les points réutilisent UI-007 Status Dot.
 * - Les icônes réutilisent UI-009 Icon.
 * - Aucun JavaScript requis pour la présentation.
 * - Aucun gestionnaire inline.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - Compatible RTL grâce aux propriétés logiques.
 * - Les états hover utilisent exclusivement des tokens
 *   sémantiques explicites.
 * - Les règles WordPress ne neutralisent pas les couleurs
 *   hover ou focus du composant.
 * - Aucun z-index.
 * - Aucun contexte d’empilement.
 */