@layer components {
  .return-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--spacing-xl);
  }

  .return-progress__back {
    color: var(--portal-foreground);
    text-decoration: none;
    font-size: var(--text-x-small);
    line-height: 1;
    flex-shrink: 0;
  }

  .return-progress__steps {
    flex: 1;
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .return-progress__step {
    flex: 1;
    min-width: 0;
    height: 2px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--portal-progress-remaining);
    transition: background-color 300ms ease;
  }

  .return-progress__step--completed {
    background: var(--portal-progress-completed);
  }

  .return-progress__step--active {
    background: var(--portal-progress-completed);
  }

  .return-progress__back:hover {
    color: var(--color-primary);
  }
}