@use 'sass:math';
@use '../style/base' as *;

// # clock
$sar-loading-scale-number: 12;

@include bem(loading) {
  @include b() {
    @include universal;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    @include m(vertical) {
      flex-direction: column;
    }
  }

  @include e(icon) {
    @include universal;

    @include m(circular, clock) {
      align-items: center;
      justify-content: center;
      width: 1em;
      height: 1em;
    }

    @include m-intersect(circular, animated) {
      animation: #{bem-ns(loading-rotate)} var(
          --sar-loading-icon-animation-duration
        ) linear infinite;
    }

    @include m-intersect(clock, animated) {
      animation: #{bem-ns(loading-rotate)} var(
          --sar-loading-icon-animation-duration
        ) steps(#{$sar-loading-scale-number}) infinite;
    }

    @keyframes #{bem-ns(loading-rotate)} {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(1turn);
      }
    }
  }

  @include e(spinner) {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: conic-gradient(
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 255, 255, 0) 60deg,
      currentColor 330deg,
      rgba(255, 255, 255, 0) 360deg
    );
    -webkit-mask: radial-gradient(transparent calc(55% - 1px), #fff 55%);
  }

  @include e(scale) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    &::before {
      display: flex;
      width: var(--sar-loading-scale-width);
      min-width: var(--sar-loading-scale-min-width);
      transform: scaleX(var(--sar-loading-scale-scale-x));
      height: var(--sar-loading-scale-height);
      margin: 0 auto;
      border-radius: var(--sar-loading-scale-border-radius);
      content: '';
      background-color: currentColor;
    }

    @for $i from 1 through $sar-loading-scale-number {
      @include m(#{$i}) {
        opacity: tofixed(math.div(1, $sar-loading-scale-number) * $i, 4);
        transform: rotate(#{math.div(360, $sar-loading-scale-number) * $i}deg);
      }
    }

    @include m(hidden) {
      opacity: 0;
    }
  }

  @include e(text) {
    @include universal;
    margin-left: var(--sar-loading-text-margin-left);
  }

  @include m(vertical) {
    @include e(text) {
      margin-left: 0;
      margin-top: var(--sar-loading-text-vertical-margin-top);
    }
  }
}