/**
 * Do not edit directly, this file was auto-generated.
 */
@layer jokul.components {
  .jkl-progress-bar {
    --track-color: var(--jkl-color-border-separator);
    --bar-color: var(--jkl-color-border-input-focus);
    --bar-height: 0.25rem;
    background-color: var(--track-color);
    border-radius: 6.25rem;
    height: var(--bar-height);
    width: 100%;
    overflow: hidden;
  }
  .jkl-progress-bar__tracker {
    display: block;
    height: var(--bar-height);
    background-color: var(--bar-color);
  }
  @media screen and (forced-colors: active) {
    .jkl-progress-bar {
      background-color: Canvas;
    }
    .jkl-progress-bar__tracker {
      background-color: CanvasText;
    }
  }
  .jkl-progress-bar {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-progress-bar:active, .jkl-progress-bar:hover, .jkl-progress-bar:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-progress-bar {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-progress-bar:active, .jkl-progress-bar:hover, .jkl-progress-bar:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-progress-bar:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-progress-bar__tracker {
    transition-property: width;
    transition-timing-function: ease;
    transition-duration: 150ms;
  }
  @keyframes jkl-downcount-ugzjexj {
    from {
      width: 100%;
    }
    to {
      width: 0%;
    }
  }
}