@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(icon-loading) {
  @include absolute-full;
  margin: auto;
  width: 100%;
  // height: 100%;
  // max-width: 44px;
  // max-height: 44px;
  max-width: 50px;
  max-height: 50px;

  border-radius: getCssVar('');
  z-index: 999999;
  color: getCssVar('color');
  transition: getCssVar('transition-ease');

  @include e(item) {
    @include absolute-full;
    // width: 100%;
    // height: 100%;
    border-radius: inherit;

    .path {
      stroke: currentColor;
      stroke-width: 10;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }
  }

  @include e(1) {
    animation: rotate 0.88s ease infinite 0.11s;

    .path {
      stroke-dasharray: 60 150;
    }
  }
  @include e(2) {
    opacity: 0.6;
    animation: rotate 0.88s linear infinite;

    .path {
      stroke-dasharray: 5 130;
    }
  }
}