/**
 *
 * Rules
 *
 */
:host {
  display: block;
}
:host(.primary) {
  --ezp-iconButton-background-disabled: var(--ezp-core-shade-primary);
  --ezp-iconButton-background-init: var(--ezp-theme-solid);
  --ezp-iconButton-color-disabled: var(--ezp-core-foreground-tertiary);
  --ezp-iconButton-color-init: var(--ezp-white-100);
  --ezp-iconButton-opacity-active: 0.74;
  --ezp-iconButton-opacity-hover: 0.84;
}

:host(.secondary) {
  --ezp-iconButton-background-active: var(--ezp-core-shade-tertiary);
  --ezp-iconButton-background-disabled: var(--ezp-core-shade-primary);
  --ezp-iconButton-background-hover: var(--ezp-core-shade-secondary);
  --ezp-iconButton-background-init: var(--ezp-core-shade-primary);
  --ezp-iconButton-color-disabled: var(--ezp-core-foreground-tertiary);
  --ezp-iconButton-color-init: var(--ezp-theme-solid);
}

:host(.tertiary) {
  --ezp-iconButton-background-active: var(--ezp-core-shade-secondary);
  --ezp-iconButton-background-hover: var(--ezp-core-shade-primary);
  --ezp-iconButton-background-init: transparent;
  --ezp-iconButton-color-disabled: var(--ezp-core-foreground-tertiary);
  --ezp-iconButton-color-init: var(--ezp-theme-solid);
}

:host(.quaternary) {
  --ezp-iconButton-background-init: transparent;
  --ezp-iconButton-color-disabled: var(--ezp-core-foreground-tertiary);
  --ezp-iconButton-color-init: var(--ezp-theme-solid);
  --ezp-iconButton-opacity-active: 0.58;
  --ezp-iconButton-opacity-hover: 0.74;
}

#button {
  align-items: center;
  appearance: none;
  background: var(--ezp-iconButton-background, var(--ezp-iconButton-background-init));
  border: 0;
  border-radius: 3px;
  box-shadow: none;
  color: var(--ezp-iconButton-color, var(--ezp-iconButton-color-init));
  cursor: var(--ezp-iconButton-cursor, pointer);
  display: flex;
  justify-content: center;
  margin: 0;
  opacity: var(--ezp-iconButton-opacity, 1);
  outline: none;
  padding: var(--ezp-spacing-2);
}
@media (hover: hover) {
  #button:not(:disabled):hover {
    --ezp-iconButton-background: var(
      --ezp-iconButton-background-hover,
      var(--ezp-iconButton-background-init)
    );
    --ezp-iconButton-opacity: var(--ezp-iconButton-opacity-hover, 1);
  }
  #button:not(:disabled):active {
    --ezp-iconButton-background: var(
      --ezp-iconButton-background-active,
      var(--ezp-iconButton-background-init)
    );
    --ezp-iconButton-opacity: var(--ezp-iconButton-opacity-active, 1);
  }
}
#button:disabled {
  --ezp-iconButton-background: var(
    --ezp-iconButton-background-disabled,
    var(--ezp-iconButton-background-init)
  );
  --ezp-iconButton-color: var(--ezp-iconButton-color-disabled);
  --ezp-iconButton-cursor: default;
}