:host {
  /**
  *  @prop --progressPadding: The padding of rux-progress
  */
  --progressPadding: 0.125rem 0 0 0.125rem;
  /**
  * @prop --progressRadius: The border radius of rux-progress bar
  */
  --progressRadius: 0.625rem;
  /**
  * @prop --progressHeight: The height of rux-progress
  */
  --progressHeight: 0.875rem;
  /**
  * @prop --progressWidth: The width of rux-progress
  */
  --progressWidth: calc(100% - 4px);
  /**
  * @prop --progressDeterminateBarBackgroundColor: Bar background color of determinate progress
  */
  /**
  * @prop --progressDeterminateTrackBackgroundColor: Track background color of determinate progress
  */
  /**
  * @prop --progressDeterminateTrackBorderColor: Track border color of determinate progress.
  */
  --progressDeterminateTrackBorderColor: var(--primaryDark);
  --progressIndeterminate: url("data:image/svg+xml,%3Csvg width='64' height='64' xmlns='http://www.w3.org/2000/svg'%3E %3Cdefs%3E %3ClinearGradient x1='65.479%25' y1='-8.436%25' x2='50%25' y2='100%25' id='a'%3E %3Cstop stop-color='%234dacff' offset='0%25'/%3E %3Cstop stop-color='%234dacff' stop-opacity='0' offset='100%25'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath d='M32 64C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm0-6c14.36 0 26-11.64 26-26S46.36 6 32 6 6 17.64 6 32s11.64 26 26 26z' fill='rgba(0,0,0,.3)'/%3E %3Cpath d='M51.908 8.236l-2.358 3.245A26.894 26.894 0 0 0 32 5C17.088 5 5 17.088 5 32s12.088 27 27 27c1.129 0 2.242-.07 3.334-.204l4.435 3.222C37.286 62.66 34.683 63 32 63 14.88 63 1 49.12 1 32 1 14.88 14.88 1 32 1c7.579 0 14.522 2.72 19.908 7.236z' fill='url(%23a)'/%3E %3Cpath d='M47.564 12c1.92 0 3.557-.64 4.075-2.367.112-.375.361-.67.361-1.08C52 6.248 50.572 4 48.234 4S44 5.867 44 8.17c0 2.304 1.225 3.83 3.564 3.83z' fill='%234dacff'/%3E %3C/g%3E %3C/svg%3E ");
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.075rem 0px;
}

.rux-progress[value] {
  appearance: none;
  background-color: var(--progressDeterminateTrackBackgroundColor);
  border: 1px solid var(--progressDeterminateTrackBorderColor);
  border-radius: var(--progressRadius);
  height: 1.25rem;
  width: 100%;
}

.rux-progress__value {
  margin-left: 0.5rem;
  text-align: right;
  color: var(--controlLabelColor);
}

.rux-progress[value]::-webkit-progress-bar {
  background-color: transparent;
}

.rux-progress[value]::-webkit-progress-value {
  border-radius: var(--progressRadius);
  height: var(--progressHeight);
  margin: var(--progressPadding);
  max-width: var(--progressWidth);
  background: var(--progressDeterminateBarBackgroundColor);
  transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  -webkit-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
}

.rux-progress[value]::-ms-fill {
  border-radius: var(--progressRadius);
  border: none;
  height: var(--progressHeight);
  margin: 0.125rem;
  max-width: calc(100% - 0.375rem);
  background-color: var(--progressDeterminateBarBackgroundColor);
}

.rux-progress[value]::-moz-progress-bar {
  border-radius: var(--progressRadius);
  margin: 0.125rem 0.125rem 0 0.125rem;
  height: var(--progressHeight);
  max-width: var(--progressWidth);
  background: var(--progressDeterminateBarBackgroundColor);
}

/* Indeterminate */
.rux-progress:indeterminate {
  -webkit-appearance: none;
  position: relative;
  height: 5rem;
  width: 5rem;
  background-color: transparent;
  border: none;
  background-image: var(--progressIndeterminate, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000000%22%20fill-opacity%3D%22.3%22%20stroke%3D%22%2314202c%22%20d%3D%22M32%2C63.5%20C49.3969696%2C63.5%2063.5%2C49.3969696%2063.5%2C32%20C63.5%2C14.6030304%2049.3969696%2C0.5%2032%2C0.5%20C14.6030304%2C0.5%200.5%2C14.6030304%200.5%2C32%20C0.5%2C49.3969696%2014.6030304%2C63.5%2032%2C63.5%20Z%20M32%2C56.5%20C18.4690236%2C56.5%207.5%2C45.5309764%207.5%2C32%20C7.5%2C18.4690236%2018.4690236%2C7.5%2032%2C7.5%20C45.5309764%2C7.5%2056.5%2C18.4690236%2056.5%2C32%20C56.5%2C45.5309764%2045.5309764%2C56.5%2032%2C56.5%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%234dacff%22%20fill-rule%3D%22nonzero%22%20d%3D%22M32%2C61.9354839%20C30.9333606%2C61.9354839%2030.0686785%2C61.0708018%2030.0686785%2C60.0041623%20C30.0686785%2C58.9375229%2030.9333606%2C58.0728408%2032%2C58.0728408%20C40.1954904%2C58.0728408%2047.7578267%2C54.2689176%2052.6662672%2C47.8987622%20C56.1526582%2C43.3741373%2058.0728408%2C37.8356396%2058.0728408%2C32%20C58.0728408%2C17.6003676%2046.3996324%2C5.92715921%2032%2C5.92715921%20C17.6003676%2C5.92715921%205.92715921%2C17.6003676%205.92715921%2C32%20C5.92715921%2C33.0666394%205.0624771%2C33.9313215%203.99583767%2C33.9313215%20C2.92919824%2C33.9313215%202.06451613%2C33.0666394%202.06451613%2C32%20C2.06451613%2C15.4670888%2015.4670888%2C2.06451613%2032%2C2.06451613%20C48.5329112%2C2.06451613%2061.9354839%2C15.4670888%2061.9354839%2C32%20C61.9354839%2C38.6961574%2059.7285058%2C45.0618765%2055.7259583%2C50.2563674%20C50.0938506%2C57.5656952%2041.4065535%2C61.9354839%2032%2C61.9354839%20Z%22%20%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  animation-name: spin;
  animation-duration: 1.367s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* Removes the default animation from IE */
.rux-progress:indeterminate::-ms-fill {
  animation-name: none;
}

.rux-progress:indeterminate::-moz-progress-bar {
  background-color: transparent;
}

.rux-progress:indeterminate::-webkit-progress-value,
.rux-progress:indeterminate::-webkit-progress-bar {
  background-color: transparent;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}