@layer components {
  /* Progress bar container */
  .progress-bar {
    block-size: 1.5rem;
    margin-block: var(--block-space-half);
    position: relative;
  }

  /* Semantic progress element */
  .progress-bar__bar {
    appearance: none;
    background-color: var(--color-gray-200);
    block-size: 100%;
    border: none;
    border-radius: 0.25rem;
    inline-size: 100%;
    overflow: hidden;
  }

  /* WebKit (Chrome, Safari, Edge) */
  .progress-bar__bar::-webkit-progress-bar {
    background-color: var(--color-gray-200);
    border-radius: 0.25rem;
  }

  .progress-bar__bar::-webkit-progress-value {
    background-color: var(--color-positive);
    border-radius: 0.25rem;
    transition: width 300ms ease;
  }

  /* Firefox */
  .progress-bar__bar::-moz-progress-bar {
    background-color: var(--color-positive);
    border-radius: 0.25rem;
  }

  /* Overdue state */
  .progress-bar__bar.progress-bar--overdue::-webkit-progress-value {
    background-color: var(--color-negative);
  }

  .progress-bar__bar.progress-bar--overdue::-moz-progress-bar {
    background-color: var(--color-negative);
  }

  /* Label overlay */
  .progress-bar__label {
    align-items: center;
    color: var(--color-ink);
    display: flex;
    font-size: 0.875rem;
    font-weight: 500;
    inset: 0;
    justify-content: center;
    position: absolute;
  }
}