// 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

$_eq-bar-height-min: 3px;
$_eq-bar-height-max: 14px;

/**
 * @name eq
 * @selector .slds-icon-eq
 * @restrict div
 * @variant
 */
.slds-icon-eq {
  position: relative;
  width: fix-ie-rounding(14);
  height: fix-ie-rounding($_eq-bar-height-max / 1px);

  /**
   * @summary Turn animation on for animated icon
   *
   * @selector .slds-is-animated
   * @restrict .slds-icon-eq
   */
  &.slds-is-animated {

    .slds-icon-eq__bar {
      animation: slds-icon-eq 0.25s ease-in-out infinite alternate;
      will-change: transform;
      // Reset bar height
      height: rem($_eq-bar-height-min);

      &:nth-of-type(2) {
        animation-duration: 0.65s;
      }

      &:nth-of-type(3) {
        animation-duration: 0.35s;
      }
    }
  }
}

/**
 * @summary Vertical bar for equalizer icon
 *
 * @selector .slds-icon-eq__bar
 * @restrict .slds-icon-eq div
 */
.slds-icon-eq__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: fix-ie-rounding(4);
  height: rem($_eq-bar-height-min) * 3;
  background: #0070d2;
  transform: scaleY(1);
  transform-origin: bottom;

  &:nth-of-type(2) {
    left: fix-ie-rounding(5);
    height: rem($_eq-bar-height-max);
  }

  &:nth-of-type(3) {
    left: fix-ie-rounding(10);
    height: rem($_eq-bar-height-min) * 4;
  }
}

@keyframes slds-icon-eq {

  to {
    transform: scaleY(#{$_eq-bar-height-max / $_eq-bar-height-min});
  }
}