@layer components {
  .getting-started__progress {
    background: var(--color-ink-lighter);
    border-radius: 999px;
    block-size: 0.4em;
    overflow: hidden;
  }

  .getting-started__progress-bar {
    background: var(--color-positive);
    block-size: 100%;
    border-radius: 999px;
    transition: width 300ms ease-out;
  }

  .getting-started__item {
    padding: var(--block-space-half) 0;
    border-block-end: 1px solid var(--color-ink-lighter);

    &:last-child {
      border-block-end: 0;
    }

    .icon {
      --icon-size: 1.25em;

      flex-shrink: 0;
      color: var(--color-ink-light);
    }
  }

  .getting-started__item--done {
    opacity: 0.5;

    .icon {
      color: var(--color-positive);
    }
  }
}