@use "../../libs/css/mixin" as *;
@use "../../libs/css/theme" as *;
@use "../../libs/css/iconfont" as *;

@include b(icon) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  align-items: center;
  color: $hy-icon-color;

  @include m(left) {
    flex-direction: row-reverse;
    align-items: center;
  }

  @include m(right) {
    flex-direction: row;
    align-items: center;
  }

  @include m(top) {
    flex-direction: column-reverse;
    justify-content: center;
  }

  @include m(bottom) {
    flex-direction: column;
    justify-content: center;
  }

  @include e(icon) {
    position: relative;
    @include flex;
    align-items: center;
    vertical-align: -100%;

    @include m(primary) {
      color: $hy-primary;
    }

    @include m(success) {
      color: $hy-success;
    }

    @include m(error) {
      color: $hy-error;
    }

    @include m(warning) {
      color: $hy-warning;
    }

    @include m(info) {
      color: $hy-info;
    }
  }

  @include e(mg) {
    /* #ifndef APP-NVUE */
    height: auto;
    will-change: transform;
    /* #endif */
  }

  @include e(label) {
    @include lineEllipsis;
    color: $hy-text-color--grey;
    font-size: $hy-font-size-sm;
    max-width: 150rpx;
  }
}
@include b(rotate) {
  animation: hy-rotate 1s infinite linear;
  @keyframes hy-rotate {
    0% {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(1turn);
    }
  }
}