/* An inset grouped list, as in iOS Settings, whose rows are links. */
.credits-list {
  padding: 0;
  margin: 0;
  overflow: hidden;
  list-style: none;
  background: var(--color-launcher-surface);
  border: var(--border-width-hairline) solid var(--color-launcher-separator);
  border-radius: var(--radius-tile);
}

.credits-row {
  position: relative;
  display: flex;
  gap: var(--space-4);
  align-items: center;
  min-block-size: var(--size-row);
  padding: var(--space-3) var(--space-5);
  color: inherit;
  text-decoration: none;
  outline: none;
  -webkit-touch-callout: none;
  transition: background-color var(--duration-fade) var(--easing-standard);
}

/* The separator starts at the text, past the icon, as iOS draws it. */
.credits-list > li + li .credits-row::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline: calc(var(--space-5) + var(--size-tile-icon) + var(--space-4)) 0;
  content: '';
  border-block-start: var(--border-width-hairline) solid var(--color-launcher-separator);
}

.credits-row:focus-visible {
  outline: var(--border-width-ring) solid var(--color-focus-ring);
  outline-offset: calc(-1 * var(--border-width-ring));
  border-radius: var(--radius-tile);
}

.credits-row__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-inline-size: 0;
}

.credits-row__title {
  font-weight: var(--font-weight-semibold);
}

.credits-row__detail {
  overflow: hidden;
  font-size: var(--font-size-apple-subheadline);
  line-height: var(--leading-apple-subheadline);
  color: var(--color-label-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credits-row__go {
  flex: none;
  inline-size: var(--size-icon);
  block-size: var(--size-icon);
  color: var(--color-label-muted);
  transition:
    translate var(--duration-tile) var(--easing-spring),
    color var(--duration-normal) var(--easing-standard);
}

@media (hover: hover) {
  .credits-row:hover {
    background-color: var(--color-row-hover);
  }

  .credits-row:hover .credits-row__go {
    color: var(--color-label);
    translate: var(--offset-nudge) calc(-1 * var(--offset-nudge));
  }

  .credits-row:hover .credits-row__go--inside {
    translate: var(--offset-nudge) 0;
  }

  .credits-row:hover .credits-tile {
    scale: var(--scale-tile-press);
  }
}

/* A row lights up the moment it is touched and fades back once let go, like a table cell. */
.credits-row:active {
  background-color: var(--color-fill-quiet);
  transition-duration: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .credits-row,
  .credits-row__go {
    transition: none;
  }
}