@import "../mixins/mixins.scss";
@import "../base.scss";


@include b(loading-icon) {
  width: 1em;
  height: 1em;
  animation: loading-rotate 1.5s infinite ease-in-out;
  @include e(path) {
    stroke-width: 2;
    stroke-dasharray: 95, 126;
    stroke-dashoffset: 0;
    animation: loading-dash 1.5s ease-in-out infinite;
  }
  @include e(plain) {
    .ss-loading-icon__path {
      stroke: $textPrimary;
    }
  }
  @include e(primary) {
    .ss-loading-icon__path {
      stroke: $mc;
    }
  }
  @include e(success) {
    .ss-loading-icon__path {
      stroke: $sc;
    }
  }
  @include e(warning) {
    .ss-loading-icon__path {
      stroke: $wc;
    }
  }
  @include e(danger) {
    .ss-loading-icon__path {
      stroke: $ec;
    }
  }
}

@keyframes loading-dash {
    0% {
      stroke-dasharray: 1, 126;
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dasharray: 95, 126;
      stroke-dashoffset: -31px;
    }

    to {
      stroke-dasharray: 6, 120;
      stroke-dashoffset: -120px;
    }
  }
  @keyframes loading-rotate {
    to {
      transform: rotate(1turn);
    }
  }