/**
* @name Spinners States
*
* @category communication
* @component loader-spinner
* @section states
* @hidecode true
*
* @html
  <div class="docs-example docs-example--spacing">
    <h3>Default <code class="small">.cui-spinner</code></h3>
    <i class="cui-spinner"></i>
  </div>
  <div class="docs-example docs-example--spacing">
    <h3>Default <code class="small">.cui-spinner .cui-spinner--20</code></h3>
    <i class="cui-spinner cui-spinner--20"></i>
  </div>
  <div class="docs-example docs-example--spacing">
    <h3>Default <code class="small">.cui-spinner .cui-spinner--28</code></h3>
    <i class="cui-spinner cui-spinner--28"></i>
  </div>
  <div class="docs-example docs-example--spacing">
    <h3>Default <code class="small">.cui-spinner .cui-spinner--36</code></h3>
    <i class="cui-spinner cui-spinner--36"></i>
  </div>
  <div class="docs-example docs-example--spacing">
    <h3>Blue <code class="small">.cui-spinner .cui-spinner--blue</code></h3>
    <i class="cui-spinner cui-spinner--blue"></i>
  </div>
  <div class="docs-example docs-example--spacing">
    <h3>Blue <code class="small">.cui-spinner .cui-spinner--blue .cui-spinner--20</code></h3>
    <i class="cui-spinner cui-spinner--blue cui-spinner--20"></i>
  </div>
  <div class="docs-example docs-example--spacing">
    <h3>Blue <code class="small">.cui-spinner .cui-spinner--blue .cui-spinner--28</code></h3>
    <i class="cui-spinner cui-spinner--blue cui-spinner--28"></i>
  </div>
  <div class="docs-example docs-example--spacing">
    <h3>Blue <code class="small">.cui-spinner .cui-spinner--blue .cui-spinner--36</code></h3>
    <i class="cui-spinner cui-spinner--blue cui-spinner--36"></i>
  </div>
*
*
*/

@import '../tools/functions/core';
@import '../settings/spinner';
@import '../tools/mixins/spinner';

@include exports('cui-spinner') {
  // Default styles applied outside of media query
  %#{$spinner__class},
  .#{$spinner__class}
  {
    border-radius: 50%;
    position: relative;
    margin: 2px;
    display: inline-block;
    @include spinner-style($spinner--gray__border-color, $spinner-progress--black__border-color, transparent);
    @include spinner-size($spinner__width, $spinner__height);
     &:after {
      content: "";
      position: absolute;
      border-radius: 50%;
      text-indent: -9999em;
      animation: load8 1s infinite linear;
      top: -1px;
      left: -1px;

      @-webkit-keyframes load8 {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
        @keyframes load8 {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
     }

     &--20
     {
      @extend .#{$spinner__class};
      @include spinner-size($spinner--20__width, $spinner--20__height);
     }

     &--28
     {
      @extend .#{$spinner__class};
      @include spinner-size($spinner--28__width, $spinner--28__height);
     }

     &--36
     {
      @extend .#{$spinner__class};
      @include spinner-size($spinner--36__width, $spinner--36__height);
     }

     &--40
     {
      @extend .#{$spinner__class};
      @include spinner-size($spinner--40__width, $spinner--40__height);
     }

     &--48
     {
      @extend .#{$spinner__class};
      @include spinner-size($spinner--48__width, $spinner--48__height);
     }

     &--56
     {
      @extend .#{$spinner__class};
      @include spinner-size($spinner--56__width, $spinner--56__height);
     }

     &--80
     {
      @extend .#{$spinner__class};
      @include spinner-size($spinner--80__width, $spinner--80__height);
     }

     &--blue
     {
      @include spinner-style($spinner--blue__border-color, $spinner-progress--blue__border-color, transparent);
     }

     .#{$dark-class} & {
      @include spinner-style($spinner--gray__border-color, $spinner-progress--white__border-color, transparent);
     }

     &-progress {
      @include spinner-progress-color($spinner--gray__border-color, $spinner-progress--black__border-color);

      display: inline-block;
      margin: .125rem;

      @each $size, $icon-size, $font-size in $spinner-sizes {
        &--#{$size} {
          $circle-size: #{$size}px;
          $inset-size: calc(#{$circle-size} - 2px);
          $transition-length: 1s;

          width:  #{$circle-size};
          height: #{$circle-size};
          border-radius: 50%;

          .cui-spinner-progress__circle {
            .cui-spinner-progress__mask, .cui-spinner-progress__fill {
              position: absolute;
              width: #{$circle-size};
              height: #{$circle-size};
              border-radius: 50%;
              -webkit-backface-visibility: hidden;
              border-radius: 50%;
              transition: -webkit-transform $transition-length;
              transition: -ms-transform $transition-length;
              transition: transform $transition-length;
            }
            .cui-spinner-progress__mask {
              clip: rect(0px, #{$circle-size}, #{$circle-size}, calc(#{$circle-size} / 2));
              .cui-spinner-progress__fill {
                clip: rect(0px, calc(#{$circle-size} / 2), #{$circle-size}, 0px);
              }
            }
          }
          .cui-spinner-progress__inset-circle {
            width: $inset-size;
            height: $inset-size;
            position: absolute;
            margin-left: calc((#{$circle-size} - #{$inset-size}) / 2);
            margin-top: calc((#{$circle-size} - #{$inset-size}) / 2);
            border-radius: 50%;
            .cui-spinner-progress__percentage {
              padding-top: 6px;
              text-align: center;
              font-size: 14px;
              line-height: 22px;
            }
            &--check {
              @include flex;
              font-family: $icon-font-name;
              font-weight: normal;
              &:before{
                content: $icon-size;
                font-size: $font-size;
              }
            }
          }

          $i: 0;
          $increment: 180deg / 100;
          @for $i from 0 through 100 {
            &.cui-spinner-progress__percentage-#{$i} {
              .cui-spinner-progress__circle {
                .cui-spinner-progress__mask.cui-spinner-progress__full, .cui-spinner-progress__fill {
                  -webkit-transform: rotate($increment * $i);
                  -ms-transform: rotate($increment * $i);
                  transform: rotate($increment * $i);
                }
                .cui-spinner-progress__fill.cui-spinner-progress__fix {
                  -webkit-transform: rotate($increment * $i * 2);
                  -ms-transform: rotate($increment * $i * 2);
                  transform: rotate($increment * $i * 2);
                }
              }
            }
          }
        }
      }

      &--blue {
        @include spinner-progress-color($spinner--blue__border-color, $spinner-progress--blue__border-color);
      }

      .#{$dark-class} & {
        @include spinner-progress-color($spinner--gray__border-color, $spinner-progress--white__border-color);
      }
    }
  }
}

// TODO: Remove depreciated Symphony, Foundation and Bootstrap selectors after converting in Atlas
.icon-spinner {
    @extend %#{$spinner__class};
    @extend %#{$spinner__class}--blue;
  }


/**
* @component loader
* @section default
* @html
  <i class="cui-spinner cui-spinner--36 cui-spinner--black"></i>
  <i class="cui-spinner cui-spinner--36 cui-spinner--blue"></i>
*/

/**
* @component loader
* @section determinate
* @html
  <div class="cui-spinner-progress cui-spinner-progress__percentage-65 cui-spinner-progress--36 cui-spinner-progress--black">
    <div class="cui-spinner-progress__circle">
      <div class="cui-spinner-progress__mask cui-spinner-progress__full"><div class="cui-spinner-progress__fill"></div></div>
      <div class="cui-spinner-progress__mask cui-spinner-progress__half">
        <div class="cui-spinner-progress__fill"></div>
        <div class="cui-spinner-progress__fill cui-spinner-progress__fix"></div>
      </div>
      <div class="cui-spinner-progress__inset-circle"></div>
    </div>
  </div>
*/

/**
* @component loader
* @section percentage
* @html
  <div class="cui-spinner-progress cui-spinner-progress__percentage-65 cui-spinner-progress--36 cui-spinner-progress--black">
    <div class="cui-spinner-progress__circle">
      <div class="cui-spinner-progress__mask cui-spinner-progress__full"><div class="cui-spinner-progress__fill"></div></div>
      <div class="cui-spinner-progress__mask cui-spinner-progress__half">
        <div class="cui-spinner-progress__fill"></div>
        <div class="cui-spinner-progress__fill cui-spinner-progress__fix"></div>
      </div>
      <div class="cui-spinner-progress__inset-circle"><div class="cui-spinner-progress__percentage">65</div></div>
    </div>
  </div>
*/

/**
* @component loader
* @section check
* @html
  <div class="cui-spinner-progress cui-spinner-progress__percentage-100 cui-spinner-progress--36 cui-spinner-progress--black">
    <div class="cui-spinner-progress__circle">
      <div class="cui-spinner-progress__mask cui-spinner-progress__full"><div class="cui-spinner-progress__fill"></div></div>
      <div class="cui-spinner-progress__mask cui-spinner-progress__half">
        <div class="cui-spinner-progress__fill"></div>
        <div class="cui-spinner-progress__fill cui-spinner-progress__fix"></div>
      </div>
      <div class="cui-spinner-progress__inset-circle cui-spinner-progress__inset-circle--check"></div>
    </div>
  </div>
*/