@layer components {
  .item-row {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: var(--item-marker-size) auto;
    column-gap: var(--space-5);
    align-items: start;
    min-block-size: var(--tap-min);
    padding-block: var(--space-4);
  }

  .item-row + .item-row {
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .item-row > .item-marker {
    margin-block-start: var(--space-1);
  }

  .item-row > .item-marker__control,
  .item-row > .item-marker__form > .item-marker__control {
    align-self: start;
    margin-block-start: calc(var(--space-1) + (var(--item-marker-size) - var(--tap-min)) / 2);
  }

  .item-row__name {
    display: block;
    font: var(--type-body);
    color: var(--color-ink);
    text-wrap: pretty;
  }

  .item-row__name::after {
    content: "";
    position: absolute;
    inset: var(--space-0);
  }

  .item-row__leading {
    grid-column: 1 / -1;
    margin-block-end: var(--space-4);
    font: var(--type-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }

  .item-row--leading .item-row__name {
    font: var(--type-heading);
  }

  .item-row__description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--clamp-lines);
    overflow: hidden;
    margin-block-start: var(--space-3);
    font: var(--type-body-sm);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }

  .item-row--completed .item-row__name {
    color: var(--color-ink-faint);
  }

  .item-row__detail {
    display: block;
    margin-block-start: var(--space-1);
    font: var(--type-caption);
    color: var(--color-ink-faint);
    text-wrap: pretty;
  }

  .item-row__todos {
    position: relative;
    z-index: var(--z-raised);
    display: flex;
    flex-direction: column;
    margin-block-start: var(--space-3);
  }

  @media (any-hover: hover) {
    .item-row__name:hover {
      color: var(--color-link);
    }
  }
}

@layer components {
  .item-row--current .item-row__name {
    color: var(--color-accent-ink);
  }
}

@layer components {
  .priority-list--compact .item-row {
    padding-inline: var(--space-4);
    margin-inline: calc(var(--space-4) * -1);
    border-radius: var(--radius-md);
  }

  .priority-list--compact .item-row + .item-row {
    border-block-start: none;
  }

  .priority-list--compact .item-row--current {
    background-color: var(--color-chip);
  }
}