// Lightning Design System 2.3.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

// Circle's cirumference
$_icon-trend-circumference: 46.3385px; // r=7.375 * pi * 2

// Arrow path length
$_icon-trend-arrow-length: 20.15px;

// HACK: Trick minifiers so they don't minify 0px to 0,
// which breaks the animation in Edge
$_icon-trend-zero: 0.1px;

// HACK: a 1px stroke sitting on a pixel grid line (here: the arrow)
// doesn't get aliased well on non-retina displays,
// so we bump up the stroke-width to force a better anti-aliasing
// which improves rendering at small size
$_icon-trend-one: 1.125px;

/**
 * @summary Initializes trend icon
 *
 * @name trend
 * @selector .slds-icon-trend
 * @restrict span
 * @variant
 */
.slds-icon-trend {
  width: 1rem;
  height: 1rem;
  display: inline-block;

  /**
   * @summary Add .slds-is-animated to the SVG to enhance the icon with an animation.
   *
   * @selector .slds-is-animated
   * @restrict .slds-icon-trend
   */
  &.slds-is-animated {

    .slds-icon-trend__arrow {
      animation: slds-icon-trend-arrow ($duration-slowly * 2) ($duration-slowly) ease-in-out both;
    }

    .slds-icon-trend__circle {
      animation: slds-icon-trend-circle ($duration-slowly * 2) ease-in-out both;
    }
  }

  /**
   * @summary Add .slds-is-paused to the SVG to pause the icon with an animation.
   *
   * @selector .slds-is-paused
   * @restrict .slds-icon-trend
   */
  &.slds-is-paused {

    .slds-icon-trend__arrow,
    .slds-icon-trend__circle {
      animation-play-state: paused;
    }
  }
}

.slds-icon-trend[data-slds-trend="down"] {
  color: #c23934;
  transform: rotate(45deg);
}

.slds-icon-trend[data-slds-trend="neutral"] {
  color: #979797;
}

.slds-icon-trend[data-slds-trend="up"] {
  color: #028048;
  transform: rotate(-45deg);
}

.slds-icon-trend__arrow,
.slds-icon-trend__circle {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: $_icon-trend-one;
}

/**
 * @summary Arrow element inside of trend icon
 *
 * @selector .slds-icon-trend__arrow
 * @restrict .slds-icon-trend path
 */
.slds-icon-trend__arrow {
  stroke-dashoffset: $_icon-trend-zero;
  stroke-dasharray: $_icon-trend-arrow-length * 2 - $_icon-trend-one;
}

/**
 * @summary Circle element inside of trend icon
 *
 * @selector .slds-icon-trend__circle
 * @restrict .slds-icon-trend circle
 */
.slds-icon-trend__circle {
  stroke-dasharray: ($_icon-trend-circumference - 4px), $_icon-trend-circumference;
}

@keyframes slds-icon-trend-arrow {

  from {
    stroke-dashoffset: $_icon-trend-arrow-length * 2;
  }
}

@keyframes slds-icon-trend-circle {

  from {
    stroke-dasharray: $_icon-trend-zero, $_icon-trend-circumference;
  }
}