@import "../palette";
@import "../mixins/border";

.progress-bar {

  @mixin background($color) {
    background-image: linear-gradient(to right, transparent, rgba($color, 0.4));
    background-position: center right;
    background-size: em-calc(250px) 100%;
    background-repeat: no-repeat;
    background-color: rgba($color, 0.2);
  }

  @mixin glow($color) {
    background-color: mix($white-color, $color);
    box-shadow: 0 0 em-calc(7px) em-calc(2px) rgba($color, 0.75);
  }

  @include border($brand-color);
  position: relative;
  transition: $global-transition-duration-short;

  .progress-bar__colored-bar {
    position: absolute;
    height: 100%;
    border-style: none;
    @include background($brand-color);
    transition: $global-transition-duration-short;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: em-calc(-1px);
      bottom: 0;
      width: em-calc(3px);
      @include glow($brand-color);
      transition: $global-transition-duration-short;
    }
  }

  .progress-bar__text {
    position: relative;
    color: $white-color;
    text-shadow: 0 0 em-calc(1px) $dark-blue-color;
    transition: $global-transition-duration-short;
  }

  &--warning {
    @include border($warning-color);
    .progress-bar__colored-bar {
      @include background($warning-color);
      &::after {
        @include glow($warning-color);
      }
    }
    .progress-bar__text {
      color: $warning-color;
    }
  }

  &--error {
    @include border($negative-color);
    .progress-bar__colored-bar {
      @include background($negative-color);
      &::after {
        @include glow($negative-color);
      }
    }
    .progress-bar__text {
      color: $negative-color;
    }
  }
}