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

// I need to associate slds-icon-animated with something since there isn't a base variant

// All SLDS size classes like `slds-r1` and `slds-r9` in one string.
// This is faster for style calculation than `[class*="slds-r"]`.
/// @private
@function all-slds-r () {
  $result: '';
  @for $i from 1 through 9 {
    $result: "#{$result}, .slds-r#{$i}";
  }

  @return str-slice($result, 3); // Remove initial ", "
}

/**
 * @summary Containing actionable element that holds the waffle icon
 *
 * @name waffle
 * @selector .slds-icon-waffle_container
 * @restrict button
 * @support dev-ready
 * @variant
 */
.slds-icon-waffle_container {
  border: 0;
  outline: 0;

  &:hover,
  &:focus {

    #{all-slds-r()} {
      animation: slds-icon-waffle-throb 2 200ms alternate;
    }

    .slds-r1,
    .slds-r2,
    .slds-r3 {
      background-color: var(--slds-g-color-brand-base-50,#418fde);
    }

    .slds-r4,
    .slds-r5,
    .slds-r7 {
      background-color: var(--slds-g-color-warning-base-70,#ed8b00);
    }

    .slds-r6,
    .slds-r8,
    .slds-r9 {
      background-color: var(--slds-g-color-palette-yellow-80,#ffb60f);
    }

    .slds-r2,
    .slds-r4 {
      transition-delay: 50ms;
      animation-delay: 50ms;
    }

    .slds-r3,
    .slds-r5,
    .slds-r7 {
      transition-delay: 100ms;
      animation-delay: 100ms;
    }

    .slds-r6,
    .slds-r8 {
      transition-delay: 150ms;
      animation-delay: 150ms;
    }

    .slds-r9 {
      transition-delay: 200ms;
      animation-delay: 200ms;
    }
  }
}

/**
 * @summary Element container circles for the waffle icon
 *
 * @selector .slds-icon-waffle
 * @restrict .slds-icon-waffle_container > span
 */
.slds-icon-waffle {
  @include square(rem(21px));
  position: relative;
  display: block;
  cursor: pointer;

  #{all-slds-r()} {
    @include square(rem(5px));
    background-color: var(--slds-g-color-neutral-base-50, #{$color-background-icon-waffle});
    display: inline-block;
    position: absolute;
    border-radius: $border-radius-circle;
    transition: background-color 100ms;
    transform-origin: 50% 50%;
    will-change: scale, background-color;
    border: 2px solid transparent;
  }

  // Positioning
  .slds-r1 {
    top: 0;
    left: 0;
  }

  .slds-r2 {
    top: 0;
    left: rem(8px);
  }

  .slds-r3 {
    top: 0;
    right: 0;
  }

  .slds-r4 {
    top: rem(8px);
    left: 0;
  }

  .slds-r5 {
    top: rem(8px);
    left: rem(8px);
  }

  .slds-r6 {
    top: rem(8px);
    right: 0;
  }

  .slds-r7 {
    bottom: 0;
    left: 0;
  }

  .slds-r8 {
    bottom: 0;
    left: rem(8px);
  }

  .slds-r9 {
    bottom: 0;
    right: 0;
  }

  // Default delays
  // scss-lint:disable MergeableSelector
  .slds-r1 {
    transition-delay: 200ms;
  }

  .slds-r2,
  .slds-r4 {
    transition-delay: 150ms;
  }

  .slds-r3,
  .slds-r5,
  .slds-r7 {
    transition-delay: 100ms;
  }

  .slds-r6,
  .slds-r8 {
    transition-delay: 50ms;
  }
}

@keyframes slds-icon-waffle-throb {

  to {
    transform: scale(1.5);
  }
}