ha-icon-button.button {
  color: var(--secondary-color, white);
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  padding: 0px;
  margin: 3px;
  --ha-icon-display: block;
  /* Buttons can always be clicked */
  pointer-events: auto;
  opacity: 0.9;
}

// =====================================================================================
// From: https://github.com/home-assistant/frontend/blob/dev/src/common/style/icon_color_css.ts
// Modified version for ha-icon and ha-icon-button.
// =====================================================================================
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@mixin state-icon($element) {
  #{$element}[data-domain='alert'][data-state='on'],
  #{$element}[data-domain='automation'][data-state='on'],
  #{$element}[data-domain='binary_sensor'][data-state='on'],
  #{$element}[data-domain='calendar'][data-state='on'],
  #{$element}[data-domain='camera'][data-state='streaming'],
  #{$element}[data-domain='cover'][data-state='open'],
  #{$element}[data-domain='fan'][data-state='on'],
  #{$element}[data-domain='humidifier'][data-state='on'],
  #{$element}[data-domain='light'][data-state='on'],
  #{$element}[data-domain='input_boolean'][data-state='on'],
  #{$element}[data-domain='lock'][data-state='unlocked'],
  #{$element}[data-domain='media_player'][data-state='on'],
  #{$element}[data-domain='media_player'][data-state='paused'],
  #{$element}[data-domain='media_player'][data-state='playing'],
  #{$element}[data-domain='script'][data-state='on'],
  #{$element}[data-domain='sun'][data-state='above_horizon'],
  #{$element}[data-domain='switch'][data-state='on'],
  #{$element}[data-domain='timer'][data-state='active'],
  #{$element}[data-domain='vacuum'][data-state='cleaning'],
  #{$element}[data-domain='group'][data-state='on'],
  #{$element}[data-domain='group'][data-state='home'],
  #{$element}[data-domain='group'][data-state='open'],
  #{$element}[data-domain='group'][data-state='locked'],
  #{$element}[data-domain='group'][data-state='problem'] {
    color: var(--paper-item-icon-active-color, #fdd835);
  }

  #{$element}[data-domain='climate'][data-state='cooling'] {
    color: var(--cool-color, var(--state-climate-cool-color));
  }

  #{$element}[data-domain='climate'][data-state='heating'] {
    color: var(--heat-color, var(--state-climate-heat-color));
  }

  #{$element}[data-domain='climate'][data-state='drying'] {
    color: var(--dry-color, var(--state-climate-dry-color));
  }

  #{$element}[data-domain='alarm_control_panel'] {
    color: var(--alarm-color-armed, var(--label-badge-red));
  }
  #{$element}[data-domain='alarm_control_panel'][data-state='disarmed'] {
    color: var(--alarm-color-disarmed, var(--label-badge-green));
  }
  #{$element}[data-domain='alarm_control_panel'][data-state='pending'],
  #{$element}[data-domain='alarm_control_panel'][data-state='arming'] {
    color: var(--alarm-color-pending, var(--label-badge-yellow));
    animation: pulse 1s infinite;
  }
  #{$element}[data-domain='alarm_control_panel'][data-state='triggered'] {
    color: var(--alarm-color-triggered, var(--label-badge-red));
    animation: pulse 1s infinite;
  }

  #{$element}[data-domain='plant'][data-state='problem'],
  #{$element}[data-domain='zwave'][data-state='dead'] {
    color: var(--state-icon-error-color);
  }

  /* Color the icon if unavailable */
  #{$element}[data-state='unavailable'] {
    color: var(--state-unavailable-color);
  }
}

@include state-icon('ha-icon');
@include state-icon('ha-icon-button');