@use '@material/feature-targeting/feature-targeting';
@use './variables' as icon-variables;

@mixin setFontFace($className, $fontFamily) {
  @font-face {
    font-family: $fontFamily;
    font-style: normal;
    font-weight: 400;

    @if (icon-variables.$with-subdir == 1) {
      @if ($className == 'material-icons') {
        src: url('#{icon-variables.$font-path}/#{icon-variables.$subdir}/#{$className}.woff2')
            format('woff2'),
          url('#{icon-variables.$font-path}/#{icon-variables.$subdir}/#{$className}.woff')
            format('woff');
      } @else {
        src: url('#{icon-variables.$font-path}/#{icon-variables.$subdir}/#{$className}.woff2')
          format('woff2');
      }
    } @else {
      @if ($className == 'material-icons') {
        src: url('#{icon-variables.$font-path}/#{$className}.woff2')
            format('woff2'),
          url('#{icon-variables.$font-path}/#{$className}.woff') format('woff');
      } @else {
        src: url('#{icon-variables.$font-path}/#{$className}.woff2')
          format('woff2');
      }
    }

    font-display: swap; // [Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details.
  }

  .#{$className} {
    font-family: $fontFamily;
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
  }
}

@mixin setIconClass($query: feature-targeting.all()) {
  $feat-animation: feature-targeting.create-target($query, animation);

  /* Rules for sizing the icon. */
  @each $size in icon-variables.$sizes {
    &.md-#{$size} {
      font-size: #{$size}px;

      width: #{$size}px;
      height: #{$size}px;
    }
  }

  &.md-dark,
  &.md-light {
    @include feature-targeting.targets($feat-animation) {
      transition: color 250ms;
    }
  }

  /* Rules for using icons as black on a light background. */
  &.md-dark {
    color: icon-variables.$dark;
    &:hover {
      color: icon-variables.$dark-focused;
    }
    &.md-inactive {
      color: icon-variables.$dark-inactive;
    }
  }

  /* Rules for using icons as white on a dark background. */
  &.md-light {
    color: icon-variables.$light;
    &:hover {
      color: icon-variables.$light-focused;
    }
    &.md-inactive {
      color: icon-variables.$light-inactive;
    }
  }
}