.sui-a-progress-bar {
  appearance: none;
  height: $sui-size-xs * 0.5;
  width: 100%;
  border-radius: $sui-border-radius-rounded;
  overflow: hidden;
  border: none;
  background: $sui-color-brand-denim-300;
  box-shadow: inset 0 0 0 rem(1) rgba(0, 0, 0, .1);
  transition: .2s;

  &::after {
    background-image: none;
  }

  &::-webkit-progress-bar {
    background: none;
  }

  &::-webkit-progress-value {
    transition: .2s;
  }

  &::-moz-progress-bar {
    transition: .2s;
  }

  @include suiProgressBarColor($sui-color-brand-denim);

  // -------------------------
  //    Colors
  // -------------------------
  &.as--primary {
    @include suiProgressBarColor($sui-color-primary);
  }

  &.as--success {
    @include suiProgressBarColor($sui-color-success);
  }

  &.as--warning {
    @include suiProgressBarColor($sui-color-warning);
  }

  &.as--danger {
    @include suiProgressBarColor($sui-color-danger);
  }

  // -------------------------
  //    Sizes
  // -------------------------
  &.as--xs {
    height: $sui-size-xs * 0.125;
  }

  &.as--sm {
    height: $sui-size-xs * 0.25;
  }

  &.as--lg {
    height: $sui-size-xs;
  }
}
