/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

@use "../../common/resets" as *;

.ams-icon-button {
  @include reset-button;

  background-color: transparent;
  color: var(--ams-icon-button-color);
  cursor: var(--ams-icon-button-cursor);
  display: inline-flex;
  outline-offset: var(--ams-icon-button-outline-offset);
  touch-action: manipulation;

  &:hover {
    background-color: var(--ams-icon-button-hover-background-color);
    color: var(--ams-icon-button-hover-color);
  }

  &:disabled {
    background-color: transparent;
    color: var(--ams-icon-button-disabled-color);
    cursor: var(--ams-icon-button-disabled-cursor);
  }
}

.ams-icon-button--contrast {
  color: var(--ams-icon-button-contrast-color);

  &:hover {
    background-color: var(--ams-icon-button-contrast-hover-background-color);
    color: var(--ams-icon-button-contrast-hover-color);
  }

  &:disabled {
    background-color: transparent;
    color: var(--ams-icon-button-contrast-disabled-color);
  }
}

.ams-icon-button--inverse {
  background-color: var(--ams-icon-button-inverse-background-color);
  color: var(--ams-icon-button-inverse-color);

  &:hover {
    background-color: var(--ams-icon-button-inverse-hover-background-color);
    color: var(--ams-icon-button-inverse-hover-color);
  }

  &:disabled {
    background-color: var(--ams-icon-button-inverse-disabled-background-color);
    color: var(--ams-icon-button-inverse-disabled-color);
  }
}