vuematerial/vue-material

@mixin md-progress-bar-indeterminate ($hue) {
  @include md-theme-property(background-color, $hue, null, .38);

  .md-progress-bar-track,
  .md-progress-bar-fill {
    &:after {
      @include md-theme-property(background-color, $hue);
    }
  }
}

@mixin md-progress-bar-determinate ($hue) {
  @include md-theme-property(background-color, $hue, null, .38);

  .md-progress-bar-fill {
    @include md-theme-property(background-color, $hue);
  }
}

@mixin md-progress-bar-buffer ($hue) {
  .md-progress-bar-fill {
    @include md-theme-property(background-color, $hue);
  }

  .md-progress-bar-track {
    @include md-theme-property(background-color, $hue, null, .38);
  }

  .md-progress-bar-buffer {
    @include md-theme-property(border-color, $hue, null, .38);
  }
}

@mixin md-progress-spinner-spec ($hue) {
  .md-progress-spinner-circle {
    @include md-theme-property(stroke, $hue);
  }
}

.md-progress-bar {
  @include md-theme-component() {
    &.md-indeterminate,
    &.md-query {
      @include md-progress-bar-indeterminate(primary);

      &.md-accent {
        @include md-progress-bar-indeterminate(accent)
      }
    }

    &.md-determinate {
      @include md-progress-bar-determinate(primary);

      &.md-accent {
        @include md-progress-bar-determinate(accent)
      }
    }

    &.md-buffer {
      @include md-progress-bar-buffer(primary);

      &.md-accent {
        @include md-progress-bar-buffer(accent)
      }
    }
  }
}

.md-progress-spinner {
  @include md-theme-component() {
    @include md-progress-spinner-spec(primary);

    &.md-accent {
      @include md-progress-spinner-spec(accent)
    }
  }
}