@import './variable.scss';
@import './minxin.scss';

@font-face {
  font-family: $m-icon-font-family;
  src: url('#{$m-icon-font-path}.eot');
  src:
    url('#{$m-icon-font-path}.eot?#iefix') format('embedded-opentype'),
    url('#{$m-icon-font-path}.woff2') format('woff2'),
    url('#{$m-icon-font-path}.woff') format('woff'),
    url('#{$m-icon-font-path}.ttf') format('truetype'),
    url('#{$m-icon-font-path}.svg#NextIcon') format('svg');
  font-display: swap;
}

.#{$hashClassName}.#{$m-icon-prefix} {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: $m-icon-font-family;
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;

  &:before {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  &-icon-loading {
    content: $m-icon-content-loading;
    animation: loadingCircle 1s infinite linear;
  }

  // built-in icons
  @each $icon in $iconList {
    &-#{$icon}:before {
      content: var(--icon-content-#{$icon});
    }
  }
}

@keyframes loadingCircle {
  0% {
    transform-origin: 50% 50%;
    transform: rotate(0deg);
  }

  100% {
    transform-origin: 50% 50%;
    transform: rotate(360deg);
  }
}

.#{$hashClassName}.#{$m-icon-prefix} {
  &-xxs {
    @include icon-size($m-icon-xxs);
  }

  &-xs {
    @include icon-size($m-icon-xs);
  }

  &-small {
    @include icon-size($m-icon-s);
  }

  &-medium {
    @include icon-size($m-icon-m);
  }

  &-large {
    @include icon-size($m-icon-l);
  }

  &-xl {
    @include icon-size($m-icon-xl);
  }

  &-xxl {
    @include icon-size($m-icon-xxl);
  }

  &-xxxl {
    @include icon-size($m-icon-xxxl);
  }

  &-inherit {
    @include icon-size(inherit);
  }
}

.#{$hashClassName}.#{$m-icon-prefix} {
  &.#{$css-prefix}inherit .#{$css-prefix}icon-remote,
  .#{$css-prefix}icon-remote {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
  }
}