$component-identifier: '.progress-bar';

$height-progress-bar: 16px;
$background-color-unfilled-progress-bar: $color-gray2;
$background-color-filled-progress-bar: $color-gray3;
$background-color-filled-success-progress-bar: $color-success;
$background-color-filled-info-progress-bar: $color-info;
$background-color-filled-warning-progress-bar: $color-warning;
$background-color-filled-danger-progress-bar: $color-danger;

//NOTE: note sure why I need
@mixin apply-progress-bar-fill-colors($filled-color) {
  &::-ms-fill {
    background-color: $filled-color;
  }

  &::-moz-progress-bar {
    background-color: $filled-color;
  }

  &::-webkit-progress-value {
    background-color: $filled-color;
  }
}

#{$component-identifier} {
  display: block;
  width: 100%;
  height: $height-progress-bar;

  &.m-pill {
    &[value] {
      border-radius: $height-progress-bar / 2;

      &::-moz-progress-bar {
        @include border-left-radius($height-progress-bar / 2);
      }

      &::-webkit-progress-value {
        @include border-left-radius($height-progress-bar / 2);
      }

      &::-moz-progress-bar {
        @include border-right-radius($height-progress-bar / 2);
      }

      &::-webkit-progress-value {
        @include border-right-radius($height-progress-bar / 2);
      }

      &::-webkit-progress-bar {
        border-radius: $height-progress-bar / 2;
      }
    }
  }

  &[value] {
    border: 0;
    appearance: none;
    background-color: $background-color-unfilled-progress-bar;

    &::-ms-fill {
      border: 0;
    }

    &::-webkit-progress-bar {
      background-color: $background-color-unfilled-progress-bar;
    }

    //NOTE: note sure why I need the seprate selector but using
    //&.m-striped::-ms-fill,
    //&.m-striped::-moz-progress-bar,
    //&.m-striped::-webkit-progress-value {
    //NOTE: does nto seem to work (I must be missing something)

    &.m-striped::-ms-fill {
      background-size: 30px 30px;
      background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, .2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, .2) 50%,
        rgba(255, 255, 255, .2) 75%,
        transparent 75%,
        transparent
      );
    }

    &.m-striped::-moz-progress-bar {
      background-size: 30px 30px;
      background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, .2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, .2) 50%,
        rgba(255, 255, 255, .2) 75%,
        transparent 75%,
        transparent
      );
    }

    &.m-striped::-webkit-progress-value {
      background-size: 30px 30px;
      background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, .2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, .2) 50%,
        rgba(255, 255, 255, .2) 75%,
        transparent 75%,
        transparent
      );
    }

    @include apply-progress-bar-fill-colors($background-color-filled-progress-bar);

    &.m-success {
      @include apply-progress-bar-fill-colors($background-color-filled-success-progress-bar);
    }

    &.m-info {
      @include apply-progress-bar-fill-colors($background-color-filled-info-progress-bar);
    }

    &.m-warning {
      @include apply-progress-bar-fill-colors($background-color-filled-warning-progress-bar);
    }

    &.m-danger {
      @include apply-progress-bar-fill-colors($background-color-filled-danger-progress-bar);
    }
  }
}

$component-identifier: '';