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

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

@mixin reset-button {
  border: none;
  margin-block: 0; // [1]
  margin-inline: 0; // [1]

  // [1] Remove the margin in older Safari.
}

.ams-button {
  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 text-rendering;
  @include reset-button;

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

@mixin ams-button-forced-color-mode {
  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
    border: var(--ams-button-forced-color-mode-border); // add border because forced colors changes box-shadow to none
  }
}

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

  @include ams-button-forced-color-mode;

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

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

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

  @include ams-button-forced-color-mode;

  &:disabled,
  [aria-disabled="true"] {
    background-color: var(--ams-button-secondary-disabled-background-color);
    box-shadow: var(--ams-button-secondary-disabled-box-shadow);
    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);
  color: var(--ams-button-tertiary-color);

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

  &:hover:not(:disabled, [aria-disabled="true"]) {
    box-shadow: var(--ams-button-tertiary-hover-box-shadow);
    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);
}