/*
A26 Web Design System — List Rows
Version: v1.0.6-0032-symbol-border-backplates-active-dividers

Rows are scannable, text-first surfaces for grouped content, hierarchy, and navigation.
Hover states use rounded neutral highlights. Active/selected navigation states use the A26 accent color.
Leading symbols may use border-only decorative backplates in grouped/list contexts, but the backplate must use the A26 App Icon shape and the same theme-aware border token as groups/cards. Grouped list rows use inset dividers that begin at the text lane and end at the trailing chevron/accessory lane; sidebars do not use these dividers. Active row, active button symbols, and trailing chevrons match their text foreground.
*/

@layer a26.components {
  .a26-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--a26-row-stack-gap, 2px);
  }

  .a26-group > .a26-list,
  .a26-demo-card > .a26-list {
    padding: var(--a26-row-list-inset, 6px);
  }

  .a26-list-row {
    position: relative;
    min-height: var(--a26-row-min-height);
    padding: var(--a26-row-padding-y) var(--a26-row-padding-x);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--a26-row-gap, var(--a26-space-3));
    color: var(--a26-row-title-color);
    text-decoration: none;
    background: transparent;
    border-radius: var(--a26-row-highlight-radius, var(--a26-radius-md));
    transition: background-color .14s ease, color .14s ease, transform .14s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .a26-list-row + .a26-list-row {
    border-top: 0;
  }

  .a26-list:not(.a26-list--no-dividers) > .a26-list-row:not(:last-child)::after,
  .a26-group > .a26-list:not(.a26-list--no-dividers) > .a26-list-row:not(:last-child)::after,
  .a26-demo-card > .a26-list:not(.a26-list--no-dividers) > .a26-list-row:not(:last-child)::after,
  .a26-group:not(.a26-list--no-dividers) > .a26-list-row:not(:last-child)::after,
  .a26-demo-card:not(.a26-list--no-dividers) > .a26-list-row:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-block-end: calc(-1 * var(--a26-row-stack-gap, 2px) / 2);
    inset-inline-start: calc(var(--a26-row-padding-x) + var(--a26-row-leading-size, 30px) + var(--a26-row-gap, var(--a26-space-3)));
    inset-inline-end: var(--a26-row-padding-x);
    block-size: 1px;
    background: var(--a26-list-divider-color, var(--a26-separator));
    opacity: .72;
    pointer-events: none;
  }

  .a26-sidebar .a26-list-row::after,
  .a26-demo-sidebar .a26-list-row::after,
  .a26-sidebar__section .a26-list-row::after,
  .a26-demo-nav .a26-list-row::after {
    content: none;
  }

  .a26-list-row:is(a, button) {
    width: 100%;
    border: 0;
    text-align: start;
    font: inherit;
    cursor: pointer;
  }

  .a26-list-row:is(a, button):hover {
    background: var(--a26-row-hover-bg, var(--a26-fill-quaternary));
  }

  .a26-list-row:active {
    transform: scale(.99);
    background: var(--a26-row-pressed-bg, var(--a26-fill-tertiary));
  }

  .a26-list-row[aria-current="page"],
  .a26-list-row[aria-selected="true"],
  .a26-list-row[data-selected="true"],
  .a26-list-row[data-state="selected"] {
    background: var(--a26-row-selected-bg, var(--a26-accent));
    color: var(--a26-row-selected-text, #fff);
  }

  .a26-list-row[aria-current="page"]:hover,
  .a26-list-row[aria-selected="true"]:hover,
  .a26-list-row[data-selected="true"]:hover,
  .a26-list-row[data-state="selected"]:hover {
    background: var(--a26-row-selected-bg, var(--a26-accent));
  }

  .a26-list-row[aria-current="page"] .a26-list-row__title,
  .a26-list-row[aria-current="page"] .a26-list-row__subtitle,
  .a26-list-row[aria-current="page"] .a26-list-row__meta,
  .a26-list-row[aria-current="page"] .a26-list-row__trailing,
  .a26-list-row[aria-current="page"] .a26-list-row__accessory,
  .a26-list-row[aria-selected="true"] .a26-list-row__title,
  .a26-list-row[aria-selected="true"] .a26-list-row__subtitle,
  .a26-list-row[aria-selected="true"] .a26-list-row__meta,
  .a26-list-row[aria-selected="true"] .a26-list-row__trailing,
  .a26-list-row[aria-selected="true"] .a26-list-row__accessory,
  .a26-list-row[data-selected="true"] .a26-list-row__title,
  .a26-list-row[data-selected="true"] .a26-list-row__subtitle,
  .a26-list-row[data-selected="true"] .a26-list-row__meta,
  .a26-list-row[data-selected="true"] .a26-list-row__trailing,
  .a26-list-row[data-selected="true"] .a26-list-row__accessory,
  .a26-list-row[data-state="selected"] .a26-list-row__title,
  .a26-list-row[data-state="selected"] .a26-list-row__subtitle,
  .a26-list-row[data-state="selected"] .a26-list-row__meta,
  .a26-list-row[data-state="selected"] .a26-list-row__trailing,
  .a26-list-row[data-state="selected"] .a26-list-row__accessory {
    color: var(--a26-row-selected-text, #fff);
  }

  .a26-list-row[aria-current="page"] .a26-list-row__leading,
  .a26-list-row[aria-selected="true"] .a26-list-row__leading,
  .a26-list-row[data-selected="true"] .a26-list-row__leading,
  .a26-list-row[data-state="selected"] .a26-list-row__leading {
    color: var(--a26-row-selected-text, #fff);
    background: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 42%, transparent);
    --a26-symbol-filter: var(--a26-symbol-filter-on-accent, invert(1) brightness(1.18));
  }

  .a26-sidebar .a26-list-row[aria-current="page"] .a26-list-row__leading,
  .a26-sidebar .a26-list-row[aria-selected="true"] .a26-list-row__leading,
  .a26-demo-sidebar .a26-list-row[aria-current="page"] .a26-list-row__leading,
  .a26-demo-sidebar .a26-list-row[aria-selected="true"] .a26-list-row__leading {
    background: transparent;
    box-shadow: none;
    color: var(--a26-row-selected-text, #fff);
  }

  .a26-list-row[aria-current="page"] .a26-list-row__leading .a26-symbol,
  .a26-list-row[aria-current="page"] .a26-list-row__trailing .a26-symbol,
  .a26-list-row[aria-current="page"] .a26-list-row__accessory .a26-symbol,
  .a26-list-row[aria-selected="true"] .a26-list-row__leading .a26-symbol,
  .a26-list-row[aria-selected="true"] .a26-list-row__trailing .a26-symbol,
  .a26-list-row[aria-selected="true"] .a26-list-row__accessory .a26-symbol,
  .a26-list-row[data-selected="true"] .a26-list-row__leading .a26-symbol,
  .a26-list-row[data-selected="true"] .a26-list-row__trailing .a26-symbol,
  .a26-list-row[data-selected="true"] .a26-list-row__accessory .a26-symbol,
  .a26-list-row[data-state="selected"] .a26-list-row__leading .a26-symbol,
  .a26-list-row[data-state="selected"] .a26-list-row__trailing .a26-symbol,
  .a26-list-row[data-state="selected"] .a26-list-row__accessory .a26-symbol {
    filter: var(--a26-symbol-filter-on-accent, invert(1) brightness(1.18));
  }

  .a26-list-row:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--a26-accent) 70%, transparent);
    outline-offset: 2px;
  }

  .a26-list-row__leading {
    inline-size: var(--a26-row-leading-size, 30px);
    block-size: var(--a26-row-leading-size, 30px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--a26-accent);
    background: transparent;
    border-radius: var(--a26-app-icon-radius, 22.37%);
    clip-path: var(--a26-app-icon-shape, inset(0 round 22.37%));
    box-shadow: inset 0 0 0 1px var(--a26-symbol-backplate-border, var(--a26-group-border, var(--a26-separator)));
    font: var(--a26-font-callout);
    flex: none;
    overflow: hidden;
  }

  .a26-list-row__leading .a26-symbol {
    inline-size: var(--a26-row-leading-symbol-size, 16px);
    block-size: var(--a26-row-leading-symbol-size, 16px);
    filter: var(--a26-symbol-filter, none);
  }

  .a26-toolbar .a26-list-row__leading,
  .a26-sidebar .a26-list-row__leading,
  .a26-demo-sidebar .a26-list-row__leading {
    background: transparent;
    border-radius: 0;
    clip-path: none;
    box-shadow: none;
    overflow: visible;
  }

  .a26-toolbar .a26-list-row__leading .a26-symbol,
  .a26-sidebar .a26-list-row__leading .a26-symbol,
  .a26-demo-sidebar .a26-list-row__leading .a26-symbol {
    filter: var(--a26-symbol-filter, none);
  }

  .a26-list-row__content { min-width: 0; display: grid; gap: 1px; }
  .a26-list-row__title { margin: 0; font: var(--a26-font-body); color: var(--a26-row-title-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .a26-list-row__subtitle { margin: 0; font: var(--a26-font-subheadline); color: var(--a26-row-subtitle-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .a26-list-row__meta { margin: 0; font: var(--a26-font-footnote); color: var(--a26-row-meta-color); white-space: nowrap; }
  .a26-list-row__trailing { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--a26-space-2); min-width: 0; color: var(--a26-row-meta-color); font: var(--a26-font-footnote); }
  .a26-list-row__accessory { color: currentColor; font: var(--a26-font-body); line-height: 1; }

  .a26-list-row:is(a, button) .a26-list-row__accessory,
  .a26-list-row:is(a, button) .a26-list-row__accessory .a26-symbol,
  .a26-list-row:is(a, button) .a26-list-row__accessory img {
    color: currentColor;
  }

  .a26-tag,
  .a26-badge {
    min-height: var(--a26-tag-height, 22px);
    padding-inline: var(--a26-tag-padding-x, 8px);
    border-radius: var(--a26-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: var(--a26-font-caption-1);
    color: var(--a26-tag-text, var(--a26-text-secondary));
    background: var(--a26-tag-bg, var(--a26-fill-tertiary));
    white-space: nowrap;
  }

  .a26-badge[data-tone="success"] { color: var(--a26-status-success); }
  .a26-badge[data-tone="warning"] { color: var(--a26-status-warning); }
  .a26-badge[data-tone="danger"] { color: var(--a26-status-danger); }
  .a26-badge[data-tone="info"] { color: var(--a26-status-info); }

  .a26-list-row[data-role="destructive"] .a26-list-row__title,
  .a26-list-row[data-role="destructive"] .a26-list-row__leading,
  .a26-list-row[data-role="destructive"] .a26-list-row__trailing { color: var(--a26-status-danger); }

  .a26-list-row[data-layout="stacked"] { grid-template-columns: auto minmax(0, 1fr); }
  .a26-list-row[data-layout="stacked"] .a26-list-row__trailing { grid-column: 2; justify-self: start; }
}