@layer components {
  /* A work permit's steps as a to-do list: a marker, the step, and its time or count on the right. */
  .path {
    column-gap: var(--inline-space);
    display: grid;
    font-size: var(--text-small);
    grid-template-columns: auto minmax(0, 1fr) auto;
    line-height: 1.4;
    list-style: none;
    margin: 0;
    padding: 0 var(--inline-space-half);
    row-gap: calc(var(--block-space-half) / 2);
  }

  .path__step {
    --path-tone: var(--color-ink);

    align-items: center;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;

    &::before {
      block-size: 0.7em;
      border-radius: 50%;
      content: "";
      inline-size: 0.7em;
      justify-self: center;
    }
  }

  .path__label {
    grid-column: 2;
    overflow-wrap: anywhere;
  }

  .path__detail {
    color: var(--color-ink-dark);
    font-variant-numeric: tabular-nums;
    grid-column: 3;
    white-space: nowrap;
  }

  .path__step--done::before,
  .path__step--finished::before {
    background-color: var(--color-ink-medium);
    block-size: 1em;
    border-radius: 0;
    inline-size: 1em;
    mask: url("/assets/check-611182fc.svg") center / 1em no-repeat;
  }

  .path__step--current {
    .path__label {
      font-weight: 600;
    }

    .path__detail {
      color: inherit;
    }

    &::before {
      background-color: var(--path-tone);
    }
  }

  .path__step--upcoming {
    color: var(--color-ink-dark);

    &::before {
      border: 0.12em solid currentColor;
    }
  }

  .path__step--muted { color: var(--color-ink-dark); }
  .path__step--neutral { --path-tone: var(--color-ink-dark); }
  .path__step--success { --path-tone: var(--color-success); }
  .path__step--warning { --path-tone: var(--color-warning); }
  .path__step--error { --path-tone: var(--color-error); }
}