/* Ligne d'objet — un objet dans une liste : `item` > `item__media` + `item__body` (`__title`,
   `__meta`, `__text`) + `item__aside` + `item__actions`, dans une `list` (`--divided` ; dans un
   cadre : `card list list--divided`). Référence : docs/design-system.md § Composants. */

.item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-13);
}

/* Une ligne dans une colonne étroite : ses actions passent sous le corps, qui garde la largeur. */
.item--stacked {
  flex-wrap: wrap;
}

.item--stacked > .item__actions {
  flex-basis: 100%;
}

.item--sm {
  gap: var(--space-2-5);
  padding: var(--space-2) var(--space-3);
}

.item--bordered {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* Toute la ligne mène à l'objet : un `<a>`, un `<label>`, ou une ligne dont le titre est un
   lien étiré sur elle (ses autres liens et ses actions passent au-dessus). */
.item--clickable {
  position: relative;
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.item--clickable .item__label[href]::after {
  position: absolute;
  inset: 0;
  content: "";
}

.item__actions,
.item__body :any-link:not(.item__label) {
  position: relative;
}

/* Sous `:where()` : l'état d'une ligne (non lue, active) garde son fond au survol. */
.item--clickable:where(:hover) {
  background: var(--color-bg-hover);
}

.item--unread {
  background: var(--color-primary-bg);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

/* Une ligne qui demande une action (un contact à relancer). */
.item--warning {
  --tone-bg: var(--badge-warning-bg);
  --tone-solid: var(--color-warning);

  background: var(--tone-bg);
  box-shadow: inset 3px 0 0 var(--tone-solid);
}

.item--unread .item__label {
  font-weight: var(--weight-semibold);
}

/* L'objet ouvert à côté (`aria-current`), ou la ligne dont la case est cochée. */
.item--active,
.item:has(> .item__media :checked) {
  background: var(--color-primary-bg);
}

.item--bordered:has(> .item__media :checked) {
  border-color: var(--color-primary-light);
}

.item__media {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

/* Une icône sur un disque au ton de l'objet (le type d'une notification). */
:is(
    .item__media--primary,
    .item__media--success,
    .item__media--warning,
    .item__media--danger,
    .item__media--info,
    .item__media--muted
  ) {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background: var(--tone-bg);
  color: var(--tone-text);
}

.item__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.item__label {
  color: var(--color-text);
  font-size: var(--text-14);
  font-weight: var(--weight-medium);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.item--sm .item__label {
  font-size: var(--text-13);
}

.item__meta,
.item__aside {
  color: var(--color-text-secondary);
  font-size: var(--text-12);
}

.item__text {
  color: var(--color-text-secondary);
  font-size: var(--text-13);
  overflow-wrap: anywhere;
}

/* Une ligne coupée par des points de suspension (la valeur entière en `title`). */
.item--truncate .item__label,
.item--truncate .item__meta,
.item--truncate .item__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item__aside {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-1);
  text-align: right;
  white-space: nowrap;
}

.item__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
}

/* Une classe qui pose `display` l'emporte sur le `[hidden]` du navigateur. */
.item__actions[hidden] {
  display: none;
}

/* --- Tons (sortis de tone.css au passage au harness 0.13) : chaque ton pose les seules
   propriétés `--tone-*` que ce composant lit, d'après les tokens du ton. --- */

.item__media--success {
  --tone-bg: var(--badge-success-bg);
  --tone-text: var(--badge-success-text);
}

.item__media--warning {
  --tone-bg: var(--badge-warning-bg);
  --tone-text: var(--badge-warning-text);
}

.item__media--danger {
  --tone-bg: var(--badge-danger-bg);
  --tone-text: var(--badge-danger-text);
}

.item__media--info {
  --tone-bg: var(--badge-info-bg);
  --tone-text: var(--badge-info-text);
}

.item__media--primary {
  --tone-bg: var(--color-primary-bg);
  --tone-text: var(--color-primary);
}

.item__media--muted {
  --tone-bg: var(--color-bg-subtle);
  --tone-text: var(--color-text-secondary);
}