/* A product counted by variant: the total until it's opened, then a stepper
   for each variant underneath. */
.stock-group__summary {
  cursor: pointer;
  list-style: none;

  &::-webkit-details-marker {
    display: none;
  }
}

.stock-group__chevron {
  --icon-color: var(--color-text-subtle);
  --icon-size: var(--size-5);

  transition-duration: var(--time-150);
  transition-property: rotate;
  transition-timing-function: var(--ease-out-3);

  .stock-group[open] & {
    rotate: 90deg;
  }
}

/* Holds the chevron's place in a row with nothing to unfold, so every row's
   count lines up with the rest. */
.stock-group__chevron--placeholder {
  visibility: hidden;
}

/* The total's stepper is there to look like every other row, not to be
   pressed: a tap on it falls through to the summary and unfolds the variants. */
.stock-group__summary .stepper {
  pointer-events: none;
}

/* The swipe inside a stock row carries its padding, as it does on a row that
   is itself the swipe. The variants unfolded underneath get theirs back. Its
   third line already fills the height other swipe rows pad out to. */
.stock-row {
  --list-padding: 0;
  --swipe-padding-block: var(--size-3);
}

/* Every row keeps a line for each thing it can tell you, even one it doesn't
   know yet, so the rows line up; whatever is too long for its line is cut
   short rather than wrapped. */
.stock-row__details {
  flex: 1;
  min-inline-size: 0;

  > * {
    min-block-size: 1lh;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* An unfolded product is lifted onto the accent along with its variants, so
   it's clear which variants belong to it. Only the colour changes: the rows
   stay exactly where they were. */
.stock-group {
  transition-duration: var(--time-150);
  transition-property: background-color;
  transition-timing-function: var(--ease-out-3);

  &[open] {
    background-color: var(--color-surface-selected);
  }
}

.stock-group__variants {
  --list-padding: initial;

  margin-block-start: var(--size-2);

  /* The first variant is divided from the product above it like every other
     row, so the unfolded variants read as rows of their own. */
  > .list-row:first-child {
    border-block-start-width: var(--border);
    border-image: var(--divider-block-start);
  }
}