// 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 size of an icon.
///
/// Only use this mixin if your UI calls for an icon size which is not one of
/// the presets: 12px, 13px, 16px, 18px, 20px, or 24px.
///
/// The font-icon CSS has a default font size of 24px, therefore, one must be
/// more specific to override the default.
/// Note: The should be scoped to a shimmed selector outside.
@mixin material-icon-size($size) {
  ::ng-deep .material-icon-i.material-icon-i {
    font-size: $size;
  }
}

/// Changes to flip the icon horizontally.
///
/// RTL is handled by the class on body, we don't handle rtl in this mixin.
@mixin material-icon-flip() {
  ::ng-deep .material-icon-i {
    transform: scaleX(-1);
  }
}

/// Changes the padding of the icon
// TODO(google): Consider removing this mixin. Moved from client code.
@mixin material-icon-padding($padding) {
  ::ng-deep .material-icon-i {
    padding: $padding;
  }
}

@mixin material-icon-weight($weight) {
  ::ng-deep .material-icon-i {
    font-weight: $weight;
  }
}

/// Use an SVG for an icon instead of the font-icon by passing a URL or data
/// as svgUrl.
///
/// This requires setting the icon to the material-icon as blank so that it is
/// not shown.
///
/// Note: This mixin should target material-icon.
@mixin svg-icon($svg-icon) {
  ::ng-deep .material-icon-i {
    background-image: $svg-icon;
    background-size: cover;
  }
}

/// Sets the size of the inner <i> element of material-icon.
///
/// Useful when using custom SVG icons and cannot pass size into
/// material-icon component directly.
@mixin svg-icon-size($size) {
  ::ng-deep .material-icon-i {
    height: $size;
    width: $size;
  }
}

