// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
@use "sass:math";

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

/**
 * @name eq
 * @selector .slds-icon-eq
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-icon-eq {
  position: relative;
  width: fix-ie-rounding(14);
  height: fix-ie-rounding(math.div($_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: $brand-accessible;
  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(#{math.div($_eq-bar-height-max, $_eq-bar-height-min)});
  }
}