/*
  Wortic macOS UI Kit — List
  wm-list — cobre List, Plain/Inset/Grouped/Inset Grouped List,
  List Row, Selectable/Hoverable/Expandable/Draggable Row.

  Glowup 2026: grupos com anel hairline + sombra de contato (sem borda
  de 1px), separadores internos de 0.5px recuados, hover suave com
  transição e seleção em accent-fill.
*/

@layer components {
  .wm-list {
    display: flex;
    flex-direction: column;
  }

  .wm-list--inset {
    padding-inline: var(--wm-space-6);
  }

  .wm-list--grouped .wm-list__row {
    background: var(--wm-surface-primary);
  }
  .wm-list--grouped {
    background: var(--wm-surface-primary);
    border-radius: var(--wm-radius-list-group, 12px);
    overflow: hidden;
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1);
  }
  .wm-list--inset-grouped {
    padding-inline: var(--wm-space-6);
  }
  .wm-list--inset-grouped .wm-list__row {
    background: var(--wm-surface-primary);
  }
  .wm-list--inset-grouped .wm-list__group {
    background: var(--wm-surface-primary);
    border-radius: var(--wm-radius-list-group, 12px);
    overflow: hidden;
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1);
  }

  .wm-list__header {
    padding: var(--wm-space-6) var(--wm-space-6) var(--wm-space-2);
    font-size: var(--wm-font-size-caption2);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--wm-label-tertiary);
  }

  .wm-list__footer {
    padding: var(--wm-space-3) var(--wm-space-6);
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    line-height: var(--wm-line-height-relaxed);
  }

  .wm-list__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--wm-space-5);
    min-height: 44px;
    padding-inline: var(--wm-space-6);
    text-decoration: none;
    color: var(--wm-label-primary);
    cursor: default;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard);
  }

  /* Separador interno hairline, recuado da borda esquerda
     (alinhado ao conteúdo, como listas do macOS). */
  .wm-list__row + .wm-list__row::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: var(--wm-space-6);
    inset-inline-end: 0;
    border-top: var(--wm-border-width-hairline) solid var(--wm-separator);
    pointer-events: none;
  }

  .wm-list__row--hoverable:hover {
    background: var(--wm-fill-quaternary);
    cursor: pointer;
  }
  .wm-list__row--hoverable:active {
    background: var(--wm-fill-tertiary);
  }
  .wm-list__row--selectable {
    cursor: pointer;
  }
  .wm-list__row.is-selected {
    background: var(--wm-accent-fill);
  }
  .wm-list__row.is-selected:hover {
    background: var(--wm-accent-fill-strong);
  }
  /* Sobre o fill de accent, o separador vizinho some (macOS esconde
     hairlines adjacentes à seleção). */
  .wm-list__row.is-selected::before,
  .wm-list__row.is-selected + .wm-list__row::before {
    opacity: 0;
  }

  .wm-list__row-avatar {
    flex: none;
  }

  .wm-list__row-icon {
    flex: none;
    color: var(--wm-label-secondary);
  }
  .wm-list__row.is-selected .wm-list__row-icon {
    color: var(--wm-accent);
  }

  .wm-list__row-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .wm-list__row-title {
    font-size: var(--wm-font-size-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wm-list__row-subtitle {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wm-list__row-accessory {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
    color: var(--wm-label-tertiary);
    font-size: var(--wm-font-size-subheadline);
    font-variant-numeric: tabular-nums;
  }

  .wm-list__row-chevron {
    flex: none;
    color: var(--wm-label-quaternary);
    transition:
      color var(--wm-duration-fast) var(--wm-ease-standard),
      transform var(--wm-duration-fast) var(--wm-ease-emphasized);
  }
  .wm-list__row--hoverable:hover .wm-list__row-chevron {
    color: var(--wm-label-tertiary);
    transform: translateX(1px);
  }

  .wm-list__row-drag {
    flex: none;
    display: inline-flex;
    color: var(--wm-label-quaternary);
    cursor: grab;
    transition: color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-list__row-drag:hover {
    color: var(--wm-label-tertiary);
  }
  .wm-list__row-drag:active {
    cursor: grabbing;
  }

  /* Expandable row */
  .wm-list__row-disclosure {
    flex: none;
    display: inline-flex;
    color: var(--wm-label-tertiary);
    transition: transform var(--wm-duration-fast) var(--wm-ease-emphasized);
  }
  .wm-list__row[aria-expanded="true"] .wm-list__row-disclosure {
    transform: rotate(90deg);
  }
  .wm-list__row[aria-expanded="false"] + .wm-list__children {
    display: none;
  }
  .wm-list__children .wm-list__row {
    padding-inline-start: var(--wm-space-13);
  }
  .wm-list__children .wm-list__row + .wm-list__row::before {
    inset-inline-start: var(--wm-space-13);
  }

  /* Density */
  [data-density="compact"] .wm-list__row {
    min-height: 30px;
  }
  [data-density="comfortable"] .wm-list__row {
    min-height: 56px;
  }

  /* Empty state inline */
  .wm-list__empty {
    padding: var(--wm-space-12) var(--wm-space-6);
    text-align: center;
    color: var(--wm-label-tertiary);
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
  }
}