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

@use "../../common/hyphenation" as *;
@use "../../common/print-exact" as *;
@use "../../common/resets" as *;
@use "../../common/text-rendering" as *;

.ams-button {
  // Override line height for Icon in Button.
  --ams-icon-line-height: var(--ams-button-line-height);

  @include reset-button;

  border-style: var(--ams-button-border-style);
  border-width: var(--ams-button-border-width);
  cursor: var(--ams-button-cursor);
  display: inline-flex;
  font-family: var(--ams-button-font-family);
  font-size: var(--ams-button-font-size);
  font-weight: var(--ams-button-font-weight);
  gap: var(--ams-button-gap);
  justify-content: center;
  line-height: var(--ams-button-line-height);
  outline-offset: var(--ams-button-outline-offset);
  padding-block: var(--ams-button-padding-block);
  padding-inline: var(--ams-button-padding-inline);
  touch-action: manipulation;

  @include hyphenation;
  @include print-exact;
  @include text-rendering;

  &:disabled,
  &[aria-disabled="true"] {
    cursor: var(--ams-button-disabled-cursor);
  }
}

.ams-button--primary {
  background-color: var(--ams-button-primary-background-color);
  border-color: var(--ams-button-primary-border-color);
  color: var(--ams-button-primary-color);

  &:disabled,
  [aria-disabled="true"] {
    background-color: var(--ams-button-primary-disabled-background-color);
    border-color: var(--ams-button-primary-disabled-border-color);
  }

  &:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: var(--ams-button-primary-hover-background-color);
    border-color: var(--ams-button-primary-hover-border-color);
  }
}

.ams-button--secondary {
  background-color: var(--ams-button-secondary-background-color);
  border-color: var(--ams-button-secondary-border-color);
  color: var(--ams-button-secondary-color);

  &:disabled,
  [aria-disabled="true"] {
    border-color: var(--ams-button-secondary-disabled-border-color);
    color: var(--ams-button-secondary-disabled-color);
  }

  &:hover:not(:disabled, [aria-disabled="true"]) {
    box-shadow: var(--ams-button-secondary-hover-box-shadow);
    color: var(--ams-button-secondary-hover-color);
  }
}

.ams-button--tertiary {
  background-color: var(--ams-button-tertiary-background-color);
  border-color: var(--ams-button-tertiary-border-color);
  color: var(--ams-button-tertiary-color);

  &:disabled,
  [aria-disabled="true"] {
    color: var(--ams-button-tertiary-disabled-color);
  }

  &:hover:not(:disabled, [aria-disabled="true"]) {
    border-color: var(--ams-button-tertiary-hover-border-color);
    color: var(--ams-button-tertiary-hover-color);
  }
}

.ams-button--icon-only {
  padding-block: var(--ams-button-icon-only-padding-block);
  padding-inline: var(--ams-button-icon-only-padding-inline);
}