@layer components {
  .rs-progress-indicator {
    --rs-progress-indicator-dot: var(--rs-unit-x2);
    display: inline-flex;
    align-items: center;
    gap: var(--rs-unit-x2);
    max-inline-size: calc(var(--rs-unit-x2) * 15);
    overflow: hidden;
    vertical-align: top;
    --rs-scroll-fade-start: 1;
    --rs-scroll-fade-end: 1;
    --rs-scroll-fade-size: var(--rs-unit-x4);
    mask-image:
      linear-gradient(to right, white, white),
      linear-gradient(
        to right,
        white,
        transparent calc(var(--rs-scroll-fade-start) * var(--rs-scroll-fade-size)),
        transparent calc(100% - var(--rs-scroll-fade-end) * var(--rs-scroll-fade-size)),
        white
      );
    mask-composite: exclude;
    mask-position: center, left;
    mask-repeat: no-repeat;
    mask-size: 100% 100%, 100% 100%;
  }

  .rs-progress-indicator__item {
    inline-size: var(--rs-progress-indicator-dot);
    block-size: var(--rs-progress-indicator-dot);
    flex: none;
    border-radius: var(--rs-radius-circular);
    background: var(--rs-color-background-neutral);
    transition:
      background-color var(--rs-duration-slow) var(--rs-easing-decelerate),
      inline-size var(--rs-duration-slow) var(--rs-easing-decelerate),
      opacity var(--rs-duration-slow) var(--rs-easing-decelerate);
  }

  .rs-progress-indicator__item[aria-current="step"] {
    inline-size: var(--rs-unit-x6);
    background: var(--rs-color-background-primary);
  }

  .rs-progress-indicator__item[data-secondary] {
    opacity: 0.5;
  }
}