////
/// @group icon
////

@import '@react-md/typography/dist/scss/variables';
@import 'mixins';

/// Creates the font face for material icons. This takes either a font url
/// prefix string or a map of urls for each required font file. If you are using
/// create-react-app, you **must** use the Map version so the fonts can be
/// correctly included by the build process.
///
/// @example scss - create-react-app Example Usage
///   // This is going to assume you have downloaded the material-icons zip with
///   // all the icon font files and copied it into `src/fonts/material-icons`
///   // and you are including the fonts in `src/index.scss`
///   @include rmd-icon-material-icons-font-face((
///     woff2: url(./fonts/material-icons/MaterialIcons-Regular.woff2),
///     woff: url(./fonts/material-icons/MaterialIcons-Regular.woff),
///     truetype: url(./fonts/material-icons/MaterialIcons-Regular.ttf)
///   ));
///
/// @example scss - Example Usage SCSS
///   $local-font-url: '/fonts/material-icons';
///   @include rmd-icon-material-icons-font-face($local-font-url);
///
/// @param {Map|String} font-url-or-map ['/fonts/material-icons'] - This is
/// either a font url prefix for the folder that is "hosting" the material icons
/// or a Map of direct urls for the eot, woff2, woff, and truetype material icon
/// fonts.
/// @param {Boolean} old-ie-support [false] - Boolean if there should be a
/// fallback for IE6-8 by including a url to the eot font. If this is set to
/// true and using the Map version of `$font-url-or-map`, you must also include
/// a url to the eot font.
@mixin rmd-icon-material-icons-font-face(
  $font-url-or-map: '/fonts/material-icons',
  $old-ie-support: false
) {
  $font-family: 'Material Icons';
  $font-name: 'MaterialIcons-Regular';

  $font-url: '';
  $font-map: null;
  @if type-of($font-url-or-map) == 'string' {
    $font-url: if(char-at($font-url) != '/', $font-url + '/', $font-url) + $font-name;
  } @else {
    $font-map: $font-url-or-map;
    $required-keys: woff2 woff truetype;
    @if $old-ie-support {
      $required-keys: #{$required-keys} eot;
    }

    @each $key in $required-keys {
      @if not map-has-key($font-map, $key) {
        @error 'It is required to include all of \'#{$required-keys}\' in your font url map, but one or more was missing! Privded keys: #{map-keys($font-map)}.';
      }
    }
  }

  @font-face {
    font-family: $font-family;
    font-style: normal;
    font-weight: map-get($rmd-typography-font-weights, normal);

    @if $old-ie-support {
      @if $font-map == null {
        src: url($font-url + '.eot');
      } @else {
        src: #{map-get($font-map, eot)};
      }
    }

    @if $font-map == null {
      src: local($font-family), local($font-name), url($font-url + '.woff2') format('woff2'),
        url($font-url + '.woff') format('woff') url($font-url + '.ttf') format('truetype');
    } @else {
      $woff2: map-get($font-url-or-map, woff2);
      $woff: map-get($font-url-or-map, woff);
      $truetype: map-get($font-url-or-map, truetype);

      $src: local($font-family), local($font-name);
      $src: "local(#{$font-family}), local(#{$font-name}), #{$woff2} format('woff2'), #{$woff} format('woff'), #{$truetype} format('truetype')";

      src: #{$src};
    }
  }
}

/// Creates the material-icons css class if hosting material icons locally
/// instead of using the Google fonts service. By default, this will not include
/// the font-size size you _should_ be using the `FontIcon` component from
/// react-md which adds the correct font-size.
///
/// @param {Boolean} include-font-size [false] - Boolean if the material icons
/// class name should include the default icon font size.
@mixin rmd-icon-material-icons-class($include-font-size: false) {
  .material-icons {
    // sass-lint:disable-block property-sort-order,no-vendor-prefixes
    @if $include-font-size {
      @include rmd-icon-theme(font-size, size);
    }

    direction: ltr;
    display: inline-block;
    font-family: 'Material Icons';
    // Support for IE.
    font-feature-settings: 'liga';
    // Support for Firefox.
    -moz-osx-font-smoothing: grayscale;
    // Support for all WebKit browsers.
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    // Support for Safari and Chrome.
    text-rendering: optimizeLegibility;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
  }
}

/// Creates both the font face and css class for material icons when hosting the
/// fonts locally instead of using the Google fonts service.  This takes either
/// a font url prefix string or a map of urls for each required font file. If
/// you are using create-react-app, you **must** use the Map version so the
/// fonts can be correctly included by the build process.
///
/// @example scss - Example Usage SCSS
///   $local-font-url: '/fonts/material-icons';
///   @include rmd-icon-material-icons-font-face($local-font-url);
///
/// @example scss - Using Absolute Paths
///   // This example will assume that the material icons font has been
///   // downloaded and copied into the `public/fonts/material-icons` folder
///   // The fonts will not be bundled with your normal build process and just
///   // will be static assets.
///
///   // The next 2 lines are equivalent
///   @include rmd-icon-material-icons-font-face;
///   @include rmd-icon-material-icons-font-face('/fonts/material-icons');
///
///   @include rmd-typography-host-google-font('Source Code Pro');
///
/// @example scss - Using Relative Paths
///   // Since it might be useful to include the font in the normal build
///   // process to hash and prefix the urls as needed, you can also use
///   // relative paths instead of absolute paths.
///   // This example will assume you are working within a `src/fonts.scss` file
///   // and have copied material-icons into a `src/fonts/material-icons` directory
///
///   // Note the `~./`. This will resolve this import to the `src` directory
///   // within create-react-app
///   @include rmd-icon-material-icons-font-face('~./fonts/material-icons');
///
/// @param {Map|String} font-url-or-map ['/fonts/material-icons'] - This is
/// either a font url prefix for the folder that is "hosting" the material icons
/// or a Map of direct urls for the eot, woff2, woff, and truetype material icon
/// fonts.
/// @param {Boolean} include-font-size [false] - Boolean if the material icons
/// class name should include the default icon font size.
/// @param {Boolean} old-ie-support [false] - Boolean if there should be a
/// fallback for IE6-8 by including a url to the eot font. If this is set to
/// true and using the Map version of `$font-url-or-map`, you must also include
/// a url to the eot font.
@mixin rmd-icon-host-material-icons(
  $font-url-or-map: '/fonts/material-icons',
  $include-font-size: false,
  $old-ie-support: false
) {
  @include rmd-icon-material-icons-font-face($font-url-or-map, $old-ie-support);
  @include rmd-icon-material-icons-class($include-font-size);
}