@layer components {
  /* Offer positions: a vendor's offer and its variants (Art. 33 BöB) as rows
     of one list. Each row: a status mark, the name over one status line and
     the actions at the end, which wrap under the name on narrow screens. */
  .offer-positions {
    background-color: var(--color-surface);
    border: var(--border);
    border-radius: var(--panel-border-radius);
    overflow: clip;
  }

  .offer-position {
    --offer-position-mark: 1.75em;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--inline-space-double);
    row-gap: var(--block-space-half);
    padding: var(--block-space) var(--block-space);

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

    @media (min-width: 50rem) {
      padding-inline: var(--block-space-one-and-half);
    }
  }

  .offer-position--add {
    background-color: var(--color-gray-lightest);
  }

  .offer-position__mark {
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: var(--offer-position-mark);
    block-size: var(--offer-position-mark);
    border: var(--border);
    border-radius: 50%;
  }

  .offer-position__mark--sealed {
    background-color: var(--color-green-light);
    border-color: transparent;
    color: var(--color-green-dark);
  }

  /* The yellow dot of an open step (.step-dot) on its light ground. */
  .offer-position__mark--draft {
    background-color: var(--color-yellow-light);
    border-color: transparent;

    &::before {
      content: "";
      inline-size: 0.6em;
      block-size: 0.6em;
      border-radius: 50%;
      background: var(--color-yellow);
    }
  }

  .offer-position__mark--add {
    border-style: dashed;
    border-color: var(--color-blue);
    color: var(--color-blue);
  }

  .offer-position__mark--add-pending {
    border-style: dashed;
    color: var(--color-ink-subtle);
  }

  .offer-position__body {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--block-space-quarter);
    min-inline-size: 0;
  }

  .offer-position__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--inline-space-double);
    row-gap: var(--block-space-half);
    margin-inline-start: auto;
  }

  /* A full line under the name and the actions, in line with the name. */
  .offer-position__steps {
    flex-basis: 100%;
    padding-inline-start: calc(var(--offer-position-mark) + var(--inline-space-double));
  }
}