//
// Copyright 2020 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

@use './variables';

/// Keyframes for the persistent rotation of the outermost container
/// @access private
@mixin container-rotate-keyframes_ {
  @keyframes mdc-circular-progress-container-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

/// Keyframes for the rotation of the spinner layer
/// @access private
@mixin spinner-layer-rotate-keyframes_ {
  @keyframes mdc-circular-progress-spinner-layer-rotate {
    @for $i from 1 through 8 {
      #{$i * 12.5}% {
        transform: rotate($i * 0.5 * variables.$arc-size);
      }
    }
  }
}

/// Keyframes for the fade-in and fade-out of the first color.
/// .99 opacity is used to force subpixel rendering.
/// @access private
@mixin color-1-fade-in-out-keyframes_ {
  @keyframes mdc-circular-progress-color-1-fade-in-out {
    from {
      opacity: 0.99;
    }
    25% {
      opacity: 0.99;
    }
    26% {
      opacity: 0;
    }
    89% {
      opacity: 0;
    }
    90% {
      opacity: 0.99;
    }
    to {
      opacity: 0.99;
    }
  }
}

/// Keyframes for the fade-in and fade-out of the second color.
/// .99 opacity is used to force subpixel rendering.
/// @access private
@mixin color-2-fade-in-out-keyframes_ {
  @keyframes mdc-circular-progress-color-2-fade-in-out {
    from {
      opacity: 0;
    }
    15% {
      opacity: 0;
    }
    25% {
      opacity: 0.99;
    }
    50% {
      opacity: 0.99;
    }
    51% {
      opacity: 0;
    }
    to {
      opacity: 0;
    }
  }
}

/// Keyframes for the fade-in and fade-out of the third color.
/// .99 opacity is used to force subpixel rendering.
/// @access private
@mixin color-3-fade-in-out-keyframes_ {
  @keyframes mdc-circular-progress-color-3-fade-in-out {
    from {
      opacity: 0;
    }
    40% {
      opacity: 0;
    }
    50% {
      opacity: 0.99;
    }
    75% {
      opacity: 0.99;
    }
    76% {
      opacity: 0;
    }
    to {
      opacity: 0;
    }
  }
}

/// Keyframes for the fade-in and fade-out of the fourth color.
/// .99 opacity is used to force subpixel rendering.
/// @access private
@mixin color-4-fade-in-out-keyframes_ {
  @keyframes mdc-circular-progress-color-4-fade-in-out {
    from {
      opacity: 0;
    }
    65% {
      opacity: 0;
    }
    75% {
      opacity: 0.99;
    }
    90% {
      opacity: 0.99;
    }
    to {
      opacity: 0;
    }
  }
}

/// Keyframes for the expansion and contraction of the arc for the
/// left semi-circle.
/// @access private
@mixin left-spin-keyframes_ {
  @keyframes mdc-circular-progress-left-spin {
    from {
      transform: rotate(265deg);
    }
    50% {
      transform: rotate(130deg);
    }
    to {
      transform: rotate(265deg);
    }
  }
}

/// Keyframes for the expansion and contraction of the arc for the
/// right semi-circle.
/// @access private
@mixin right-spin-keyframes_ {
  @keyframes mdc-circular-progress-right-spin {
    from {
      transform: rotate(-265deg);
    }
    50% {
      transform: rotate(-130deg);
    }
    to {
      transform: rotate(-265deg);
    }
  }
}