// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

/// Changes the `$indeterminate-, @active- and $seconday-color` of <material-progress>s.
///
/// Example use: @include material-progress-theme(
///     $indeterminate-color: $mat-teal-100,
///     $active-color: $mat-blue-500,
//      $secondary-color: $mat-blue-200);
@mixin material-progress-theme($indeterminate-color, $active-color, $secondary-color) {
  // Use component's selector with the themeable class to increase theme
  // selector's priority.
  ::ng-deep material-progress {
    .progress-container.indeterminate {
      background-color: $indeterminate-color;
    }

    .progress-container.indeterminate > .secondary-progress {
      background-color: $active-color;
    }

    .active-progress {
      background-color: $active-color;
    }

    .secondary-progress {
      background-color: $secondary-color;
    }
  }
}

// Changes the height and roundedness of the ends of <material-progress>.
//
// Example use:
// :host material-progress {
//   wide-rounded-progress-bar($mat-grid * 2);
// }
//
@mixin wide-rounded-progress-bar($height) {
  ::ng-deep {
    height: $height;

    .progress-container,
    .active-progress,
    .secondary-progress {
      border-radius: $height / 2;
    }
  }
}
