/* A divided vertical list. .list-row is just the top hairline (first row none);
   consumers own their own flex layout. Shared by settings, notifications, admin
   lists, activity. */

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

  .list-row {
    border-block-start: 1px solid var(--color-border-subtle);

    &:first-child {
      border-block-start: 0;
    }
  }

  @media (any-hover: hover) {
    .list-row--hover:hover {
      background: var(--color-surface-sunken);
    }
  }
}