@layer components {
  .rs-progress {
    --rs-progress-accent: var(--rs-color-background-primary);
    --rs-progress-track: var(--rs-color-background-neutral-faded);
    display: block;
    inline-size: 100%;
    block-size: var(--rs-unit-x2);
    border: 0;
    border-radius: var(--rs-radius-small);
    overflow: hidden;
    background: var(--rs-progress-track);
    accent-color: var(--rs-progress-accent);
  }

  .rs-progress[data-size="small"] {
    block-size: var(--rs-unit-x1);
  }

  .rs-progress[data-tone="positive"] {
    --rs-progress-accent: var(--rs-color-background-positive);
  }

  .rs-progress[data-tone="warning"] {
    --rs-progress-accent: var(--rs-color-background-warning);
  }

  .rs-progress[data-tone="critical"] {
    --rs-progress-accent: var(--rs-color-background-critical);
  }

  .rs-progress::-webkit-progress-bar {
    background: var(--rs-progress-track);
  }

  .rs-progress::-webkit-progress-value {
    border-radius: var(--rs-radius-small);
    background: var(--rs-progress-accent);
    transition: inline-size var(--rs-duration-medium)
      var(--rs-easing-decelerate);
  }

  .rs-progress::-moz-progress-bar {
    border-radius: var(--rs-radius-small);
    background: var(--rs-progress-accent);
  }
}