$icon-button-size: ($icon-size * 2);
@include pulsate("icon-button-focus-ripple-pulsate");

.dig-icon-button {

  * { @include ease-out(); }
  position: relative;
  padding: ($icon-size / 2);
  width: $icon-size * 2;
  height: $icon-size * 2;

  &.mid-size {
    width: $icon-size * 2.5;
    height: $icon-size * 2.5;
  }

  .dig-focus-ripple {
    .dig-focus-ripple-inner {
      background-color: rgba(0,0,0,0.1);
      box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
      border: solid 6px $transparent;
      background-clip: padding-box;
      @include pulsate-animation("icon-button-focus-ripple-pulsate");
    }
  }

  .dig-over-ripple {
    .dig-over-ripple-inner {
      background-color: rgba(0,0,0,0.1);
      box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
      //border: solid 6px $transparent;
      background-clip: padding-box;
      @include pulsate-animation("icon-button-over-ripple-pulsate");
    }
  }

  // .dig-icon-button-tooltip {
  //   margin-top: ($icon-button-size + 4);
  // }

  &.dig-is-disabled {
    * {
      color: lighten($body-text-color, 75%);
      fill: lighten($body-text-color, 75%);
    }
  }
}

.dig-dark-theme {
  .dig-touch-ripple {
    .dig-ripple-circle-inner {
      background-color: rgba(255,255,255,0.3);
    }
  }

  .dig-focus-ripple {
    .dig-focus-ripple-inner {
      background-color: rgba(255,255,255,0.3);
      box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3);
    }
  }
}