$lui-icon-button-size: ($icon-size * 2);
$lui-icon-button-active-background-color: $grey-400;
$lui-icon-button-active-icon-color: $white;
$lui-icon-button-disabled-icon-color: $grey-400;

@include pulsate("icon-button-focus-ripple-pulsate");

.lui-icon-button {

  * { @include ease-out(); }

  position: relative;
  padding: ($icon-size / 2);
  width: $icon-size * 2;
  height: $icon-size * 2;

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


  &.lui-icon-button-compact {
    padding: 0;
    width: auto;
    height: auto;

    .lui-icon-button-tooltip {
      margin-top: 14px;
    }

  }


  .lui-focus-ripple {
    .lui-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");
    }
  }

  &.lui-is-active {
    background: $lui-icon-button-active-background-color;
    color: $lui-icon-button-active-icon-color;
  }

  &.lui-is-disabled {
    color: $lui-icon-button-disabled-icon-color!important;
  }
}

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

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