/* docara-shell-source: runtime/component/progress-bar/css/progress-bar.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
@layer sf.components {
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-progress-bar .sf-progress-bar-progress {
    margin-right: auto;
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .sf-progress-bar .sf-progress-bar-progress {
    margin-right: auto;
    }
  }
  .sf-progress-bar .sf-progress-bar-progress:where(:dir(ltr)) {
    margin-right: auto;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-progress-bar .sf-progress-bar-progress {
    margin-left: auto;
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .sf-progress-bar .sf-progress-bar-progress {
    margin-left: auto;
    }
  }
  .sf-progress-bar .sf-progress-bar-progress:where(:dir(rtl)) {
    margin-left: auto;
  }
  .sf-progress-bar .sf-progress-bar-progress {
    height: 100%;
    -webkit-margin-end: auto;
            margin-inline-end: auto;
    width: 0;
    transition-property: width;
    /* The width of a filling bar is the one thing on it that moves, and it moves
       far: the fast step reads as a jump. This used to name --sf-duration-default,
       which is declared nowhere -- the scale is fast, normal, slow -- so the
       browser dropped the declaration and the bar had no transition at all. */
    transition-duration: var(--sf-duration-normal);
  }
  .sf-progress-bar .sf-progress-bar-main {
    width: 100%;
  }
  .sf-progress-bar {
    width: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-progress-bar .sf-progress-bar-progress {
      transition-duration: 0s;
    }
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) */
  .sf-progress-bar {
    background-color: transparent;
    background-color: var(--sf-progress-bar--background-color, transparent);
    color: var(--sf-on-surface);
    color: var(--sf-progress-bar--color, var(--sf-on-surface));
    font-family: var(--sf-text--family);
    font-family: var(--sf-progress-bar--font-family, var(--sf-text--family));
    font-weight: var(--sf-font-weight-regular);
    font-weight: var(--sf-progress-bar--font-weight, var(--sf-font-weight-regular));
    gap: var(--sf-progress-bar--gap);
    font-size: var(--sf-progress-bar--font-size);
    line-height: var(--sf-progress-bar--line-height);
  }
  .sf-progress-bar .sf-progress-bar-main {
    --sf-progress-bar-main--background-color: var(--sf-surface-container);
    --sf-progress-bar-main--border-radius: var(--sf-radius--ui);
    background-color: var(--sf-progress-bar-main--background-color);
    border-radius: var(--sf-progress-bar-main--border-radius);
    height: var(--sf-progress-bar-main--height);
  }
  .sf-progress-bar .sf-progress-bar-progress {
    --sf-progress-bar-progress--background-color: var(--sf-primary);
    --sf-progress-bar-progress--border-radius: var(--sf-radius--ui);
    background-color: var(--sf-progress-bar-progress--background-color);
    border-radius: var(--sf-progress-bar-progress--border-radius);
  }
  .sf-progress-bar.sf-progress-bar--info .sf-progress-bar-progress {
    --sf-progress-bar-progress--background-color: var(--sf-info);
  }
  .sf-progress-bar.sf-progress-bar--success .sf-progress-bar-progress {
    --sf-progress-bar-progress--background-color: var(--sf-success);
  }
  .sf-progress-bar.sf-progress-bar--warning .sf-progress-bar-progress {
    --sf-progress-bar-progress--background-color: var(--sf-warning);
  }
  .sf-progress-bar.sf-progress-bar--error .sf-progress-bar-progress {
    --sf-progress-bar-progress--background-color: var(--sf-error);
  }
  /* utility-hint: align-items/flex-end (.items-end) */
  .sf-progress-bar.sf-progress-bar--size-1 {
    --sf-progress-bar--font-size: var(--sf-text-size-1\/2);
    --sf-progress-bar--line-height: var(--sf-text-height-1\/2);
  }
  /* utility-hint: flex/1 (.flex-1) */
  .sf-progress-bar--size-1 .sf-progress-bar-main {
    --sf-progress-bar-main--height: var(--sf-text-size-1\/5);
  }
  /* utility-hint: align-items/flex-start (.items-start) */
  .sf-progress-bar.sf-progress-bar--size-2 {
    --sf-progress-bar--font-size: var(--sf-text-size-1);
    --sf-progress-bar--line-height: var(--sf-text-height-1);
  }
  /* utility-hint: flex/1 (.flex-1) */
  .sf-progress-bar--size-2 .sf-progress-bar-main {
    --sf-progress-bar-main--height: var(--sf-text-size-1\/4);
  }
  /* utility-hint: align-items/flex-start (.items-start) */
  .sf-progress-bar.sf-progress-bar--size-3 {
    --sf-progress-bar--font-size: var(--sf-text-size-2);
    --sf-progress-bar--line-height: var(--sf-text-height-2);
  }
  /* utility-hint: flex/1 (.flex-1) */
  .sf-progress-bar--size-3 .sf-progress-bar-main {
    --sf-progress-bar-main--height: var(--sf-text-size-1\/3);
  }
  /* utility-hint: align-items/flex-end (.items-end) */
  .sf-progress-bar.sf-progress-bar--size-1\/3 {
    --sf-progress-bar--font-size: var(--sf-text-size-1\/4);
    --sf-progress-bar--line-height: var(--sf-text-height-1\/4);
  }
  /* utility-hint: flex/1 (.flex-1) */
  .sf-progress-bar--size-1\/3 .sf-progress-bar-main {
    --sf-progress-bar-main--height: var(--sf-text-size-1\/7);
  }
  /* utility-hint: align-items/flex-end (.items-end) */
  .sf-progress-bar.sf-progress-bar--size-1\/2 {
    --sf-progress-bar--font-size: var(--sf-text-size-1\/3);
    --sf-progress-bar--line-height: var(--sf-text-height-1\/3);
  }
  /* utility-hint: flex/1 (.flex-1) */
  .sf-progress-bar--size-1\/2 .sf-progress-bar-main {
    --sf-progress-bar-main--height: var(--sf-text-size-1\/6);
  }
  .sf-progress-bar--size-1, .sf-progress-bar--size-2 {
    --sf-progress-bar--gap: var(--sf-space-1\/3);
  }
  .sf-progress-bar--size-3 {
    --sf-progress-bar--gap: var(--sf-space-1\/2);
  }
  .sf-progress-bar--size-1\/3, .sf-progress-bar--size-1\/2 {
    --sf-progress-bar--gap: var(--sf-space-1\/4);
  }
}