@layer env.components {
  .env-meter-header,
  .env-progress-header {
    align-items: baseline;
    font: var(--env-type-body-sm);
  }
  .env-meter-label,
  .env-progress-label {
    color: var(--env-color-fg-muted);
  }
  .env-meter-value,
  .env-progress-value {
    color: var(--env-color-fg-control);
    font-weight: var(--env-font-weight-medium);
  }
  .env-meter-track,
  .env-progress-track {
    --env-meter-track-height: 0.625rem;
    block-size: var(--env-meter-track-height);
    overflow: hidden;
    border-radius: var(--env-radius-full);
    background: var(--env-color-bg-neutral-muted);
  }
  .env-meter-indicator,
  .env-progress-indicator {
    block-size: 100%;
    border-radius: inherit;
    background: var(--env-color-bg-primary-emphasis);
    transition: inline-size var(--env-motion-duration-medium) var(--env-motion-ease);
  }
  .env-progress[data-indeterminate] .env-progress-indicator {
    inline-size: 40%;
    animation: env-progress-indeterminate calc(var(--env-motion-duration-slow) * 5) linear infinite;
  }
  .env-progress[data-indeterminate]:dir(rtl) .env-progress-indicator {
    animation-name: env-progress-indeterminate-rtl;
  }
  @keyframes env-progress-indeterminate {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(250%);
    }
  }
  @keyframes env-progress-indeterminate-rtl {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-250%);
    }
  }
  .env-progress[data-segmented] .env-progress-track {
    display: flex;
    gap: var(--env-space-1);
    background: none;
  }
  .env-progress-segment {
    flex: 1 1 0;
    overflow: hidden;
    border-radius: var(--env-radius-full);
    background: var(--env-color-bg-neutral-muted);
  }
  .env-progress-segment::before {
    content: '';
    display: block;
    inline-size: calc(var(--env-progress-segment-fill, 0) * 100%);
    block-size: 100%;
    border-radius: inherit;
    background: var(--env-color-bg-primary-emphasis);
  }
  @media (prefers-reduced-motion: reduce) {
    .env-meter-indicator,
    .env-progress-indicator {
      transition: none;
    }
    .env-progress[data-indeterminate] .env-progress-indicator {
      inline-size: 100%;
      animation: none;
      background: repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, var(--env-color-bg-primary-emphasis) 35%, transparent) 0
          var(--env-space-1),
        transparent var(--env-space-1) calc(2 * var(--env-space-1))
      );
    }
  }
  @media (forced-colors: active) {
    .env-meter-track,
    .env-progress-track,
    .env-progress-segment {
      outline: 1px solid CanvasText;
      outline-offset: -1px;
    }
    .env-meter-indicator,
    .env-progress-indicator {
      background-color: Highlight;
    }
    .env-progress-segment {
      forced-color-adjust: none;
      background: Canvas;
    }
    .env-progress-segment::before {
      background: Highlight;
    }
  }
  @media (forced-colors: active) and (prefers-reduced-motion: reduce) {
    .env-progress[data-indeterminate] .env-progress-indicator {
      forced-color-adjust: none;
      background: repeating-linear-gradient(
        -45deg,
        Highlight 0 var(--env-space-1),
        Canvas var(--env-space-1) calc(2 * var(--env-space-1))
      );
    }
  }
  [data-env-skeleton] :is(.env-meter-track, .env-progress-track, .env-progress-segment) {
    --env-skeleton-shape: 1;
    background: var(--env-skeleton-paint);
    box-shadow: none;
  }
  [data-env-skeleton] :is(.env-meter-indicator, .env-progress-indicator),
  [data-env-skeleton] .env-progress-segment::before {
    visibility: hidden;
  }
}