// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "~bourbon/app/assets/stylesheets/bourbon";
@import "../../common/variables";
@import "../progress/common";
@import "./common";

/*
Spinners

Markup:
<div class="pt-spinner {{.modifier}}">
  <div class="pt-spinner-svg-container">
    <svg viewBox="0 0 100 100">
      <path class="pt-spinner-track" d="M 50,50 m 0,-44.5 a 44.5,44.5 0 1 1 0,89 a 44.5,44.5 0 1 1 0,-89"></path>
      <path class="pt-spinner-head" d="M 94.5 50 A 44.5 44.5 0 0 0 50 5.5"></path>
    </svg>
  </div>
</div>

.pt-small - Small spinner
.pt-large - Large spinner

Styleguide pt-spinner
*/

@keyframes pt-spinner-animation {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

// see https://css-tricks.com/scale-svg/
// how to Scale SVG to Fit the Available Width (and adjust the height to match) Option 4

.pt-spinner {
  @include spinner-size($spinner-width-factor, $spinner-stroke-width, $spinner-speed);

  path {
    fill-opacity: 0;
  }

  .pt-spinner-head {
    transition: stroke-dashoffset ($pt-transition-duration * 2) $pt-transition-ease;
    stroke: $progress-head-color;
    stroke-linecap: round;
  }

  .pt-spinner-track {
    stroke: $progress-track-color;
  }

  &.pt-small {
    @include spinner-size(
      $spinner-width-factor-small,
      $spinner-stroke-width-small,
      $spinner-speed-small
    );
  }

  &.pt-large {
    @include spinner-size(
      $spinner-width-factor-large,
      $spinner-stroke-width-large,
      $spinner-speed-large
    );
  }
}

.pt-spinner:not(.pt-svg-spinner) {
  display: inline-block;

  .pt-spinner-svg-container {
    position: relative;
    width: 100%;
    height: 0;
    padding: 0;
    padding-bottom: 100%;
    animation: pt-spinner-animation $spinner-speed linear infinite;
  }

  &.pt-no-spin .pt-spinner-svg-container {
    animation: none;
  }

  svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.pt-svg-spinner {
  transform-origin: center;
  animation: pt-spinner-animation $spinner-speed linear infinite;

  &.pt-no-spin {
    animation: none;
  }
}

.pt-svg-spinner-transform-group {
  transform-origin: center;
}

.pt-dark .pt-spinner {
  .pt-spinner-head {
    stroke: $dark-progress-head-color;
  }

  .pt-spinner-track {
    stroke: $dark-progress-track-color;
  }
}

@each $intent, $color in $pt-intent-colors {
  .pt-spinner.pt-intent-#{$intent} .pt-spinner-head {
    stroke: $color;
  }
}