/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
/** @define ProgressBar */
/** Color Variants */
.ProgressBar {
  /* Reset the default appearance */
  appearance: none;
  background: var(--colorsSurfaceGrey, #eeeeee);
  border: 0;
  border-radius: 6px;
  display: block;
  height: 10px;
  width: 100%;
}

.ProgressBar::-webkit-progress-value,
.ProgressBar::-webkit-progress-bar {
  border-radius: 6px;
  transition: width cubic-bezier(0.4, 0, 0.2, 1) 300ms 0ms;
}

.ProgressBar::-webkit-progress-bar {
  background: var(--colorsSurfaceGrey, #eeeeee);
}

.ProgressBar::-webkit-progress-value {
  background: #08bfdf;
}

.ProgressBar::-moz-progress-bar {
  background: #08bfdf;
  border-radius: 6px;
  transition: width cubic-bezier(0.4, 0, 0.2, 1) 300ms 0ms;
}

.ProgressBar__bar,
.ProgressBar__value {
  border-radius: 6px;
  height: 10px;
}

.ProgressBar__bar {
  background: var(--colorsSurfaceGrey, #eeeeee);
}

.ProgressBar__value {
  background: #08bfdf;
}

.ProgressBar--blue::-webkit-progress-value {
  background: var(--colorsStatusInfo, #0265dc);
}
.ProgressBar--blue::-moz-progress-bar {
  background: var(--colorsStatusInfo, #0265dc);
}
.ProgressBar--blue .ProgressBar__value {
  background: var(--colorsStatusInfo, #0265dc);
}

.ProgressBar--green::-webkit-progress-value {
  background: var(--colorsStatusSuccess, #007a4d);
}
.ProgressBar--green::-moz-progress-bar {
  background: var(--colorsStatusSuccess, #007a4d);
}
.ProgressBar--green .ProgressBar__value {
  background: var(--colorsStatusSuccess, #007a4d);
}

.ProgressBar--red::-webkit-progress-value {
  background: var(--colorsStatusCritical, #e13212);
}
.ProgressBar--red::-moz-progress-bar {
  background: var(--colorsStatusCritical, #e13212);
}
.ProgressBar--red .ProgressBar__value {
  background: var(--colorsStatusCritical, #e13212);
}

.ProgressBar--yellow::-webkit-progress-value {
  background: var(--colorsStatusWarning, #ffbe00);
}
.ProgressBar--yellow::-moz-progress-bar {
  background: var(--colorsStatusWarning, #ffbe00);
}
.ProgressBar--yellow .ProgressBar__value {
  background: var(--colorsStatusWarning, #ffbe00);
}

.ProgressBar--blue-grey::-webkit-progress-value {
  background: var(--colorsStatusDefault, #8c9ca5);
}
.ProgressBar--blue-grey::-moz-progress-bar {
  background: var(--colorsStatusDefault, #8c9ca5);
}
.ProgressBar--blue-grey .ProgressBar__value {
  background: var(--colorsStatusDefault, #8c9ca5);
}

/** Size Variants */
.ProgressBar--small,
.ProgressBar--small .ProgressBar__bar,
.ProgressBar--small .ProgressBar__value {
  height: 5px;
}

.ProgressBar--indeterminate {
  overflow: hidden;
  position: relative;
}
.ProgressBar--indeterminate .ProgressBar__value {
  position: absolute;
  top: 0;
  left: -80%;
  will-change: left, right;
  animation: indeterminateprogress 1.15s cubic-bezier(0.57, 0.63, 0.91, 0.61) infinite;
}

@keyframes indeterminateprogress {
  0% {
    left: -60%;
    right: 100%;
  }
  85%, 100% {
    left: 110%;
    right: -180%;
  }
}
.ProgressBar--top,
.ProgressBar--bottom {
  position: absolute;
  left: 0;
  right: 0;
}

.ProgressBar--top {
  top: 0;
  border-radius: 6px 6px 0 0;
}

.ProgressBar--bottom {
  bottom: 0;
  border-radius: 0 0 6px 6px;
}

/*# sourceMappingURL=ProgressBar.css.map */