/* Rows sit on the page itself, running out past main's gutters to the
   screen's edges, divided by a line that runs all the way across. Each row
   pads its content back in line with the page title. A list inside a row is
   already as wide as it can be. */
.list {
  display: flex;
  flex-direction: column;
  margin-inline: calc(-1 * var(--gutter-start, 0px)) calc(-1 * var(--gutter-end, 0px));

  & & {
    margin-inline: 0;
  }
}

.list-row {
  padding: var(--list-padding, var(--size-3) var(--gutter-end, 0px) var(--size-3) var(--gutter-start, 0px));

  & + & {
    border-block-start-width: var(--border);
    border-image: var(--divider-block-start);
  }
}

.list-row__media {
  align-self: start;
  block-size: var(--list-row-media-size, 2.5rem);
  border-radius: var(--rounded-md);
  flex-shrink: 0;
  inline-size: var(--list-row-media-size, 2.5rem);
  object-fit: cover;
}

/* The row, not the words, is the tap target: the link stretches over its
   ancestor so the whole row is hittable on a phone. Anything else in the row
   that needs clicking must sit above it. */
.list-row__link {
  color: inherit;

  &::after {
    content: "";
    inset: 0;
    position: absolute;
  }

  &:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  &:focus-visible {
    outline: none;
  }
}

.list-row:has(.list-row__link) {
  position: relative;
}

/* The focus ring belongs on the row, since the row is what the link covers. */
.list-row:has(.list-row__link:focus-visible) {
  outline: var(--border-2) solid var(--color-selected-dark);
  outline-offset: var(--border-2);
}

.list-row__aside {
  position: relative;
}

/*
 * Swipe left to reveal a row's action. The row is a horizontal scroller that
 * snaps either to its content or to the action parked past its end edge, so
 * the finger gets the platform's own scroll physics with no script, and a
 * keyboard user tabbing onto the action scrolls it into view the same way.
 */
.swipe {
  --list-padding: 0;

  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  &::-webkit-scrollbar {
    display: none;
  }
}

/* The row itself is the scroller, so its content carries the gutters and the
   action sits flush against the screen's edge. A swipe row is sized for two
   lines of text, padded by half a small line at top and bottom so it's as
   tall as a three-line stock row and the action beneath has the same room. */
.swipe__content {
  flex: none;
  inline-size: 100%;
  padding-block: var(--swipe-padding-block, calc(var(--size-3) + var(--text-sm) * 0.75));
  padding-inline: var(--gutter-start, 0px) var(--gutter-end, 0px);
  position: relative;
  scroll-snap-align: start;
}

/* A row swiped open is lifted onto the accent, so it's clear which row the
   action beside it belongs to. */
.swipe__content {
  border-radius: var(--rounded-lg);
  transition-duration: var(--time-150);
  transition-property: background-color;
  transition-timing-function: var(--ease-out-3);

  .swipe[data-swiped] > & {
    background-color: var(--color-surface-selected);
  }
}

/* The action is a round button with its name beneath, sat beside the row
   rather than a full-height slab, and kept off the screen's edge like the
   row's text. */
.swipe__action {
  align-items: center;
  display: flex;
  flex: none;
  margin-inline-start: var(--size-3);
  padding-inline-end: var(--gutter-end, 0px);
  scroll-snap-align: end;
}

/* A second action sits between the row and the last one, so only the last
   is a place to stop and only it keeps off the screen's edge. */
.swipe__action:has(+ .swipe__action) {
  padding-inline-end: 0;
  scroll-snap-align: none;
}

.swipe__button {
  align-items: center;
  color: var(--color-text-soft);
  display: flex;
  flex-direction: column;
  row-gap: var(--size-1);

  &:focus-visible {
    outline: var(--border-2) solid var(--color-selected-dark);
    outline-offset: var(--border-2);
  }
}

.swipe__icon {
  --btn-block-size: var(--size-11);
  --btn-icon-size: var(--size-4);
  --btn-inline-size: var(--size-11);
  --btn-padding: 0;
  --btn-radius: var(--rounded-full);
}