/* Web/Button/Primary (192:19), Web/Button/Text (192:28) */

.aht-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aht-spacing-8);
  min-height: 48px;
  padding-inline: var(--aht-spacing-20);
  border: 0;
  border-radius: var(--aht-radius-4);
  font-size: var(--aht-type-utility-size);
  line-height: var(--aht-type-utility-line);
  font-weight: var(--aht-font-weight-semibold);
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--aht-duration-fast) var(--aht-ease-standard),
    color var(--aht-duration-fast) var(--aht-ease-standard);
}

.aht-button--block {
  display: flex;
  width: 100%;
}

.aht-button:focus-visible {
  outline: 2px solid var(--aht-color-border-focus);
  outline-offset: 2px;
}

/* ---- Primary ------------------------------------------------------- */

.aht-button--primary {
  background: var(--aht-color-action-primary-default);
  color: var(--aht-color-text-on-brand);
}

.aht-button--primary:hover {
  background: var(--aht-color-action-primary-hover);
}

.aht-button--primary:active {
  background: var(--aht-color-action-primary-pressed);
}

.aht-button--primary:disabled,
.aht-button--primary[aria-disabled='true'] {
  background: var(--aht-color-action-primary-disabled);
  color: var(--aht-color-text-secondary);
  cursor: not-allowed;
}

/* ---- Text ---------------------------------------------------------- */

.aht-button--text {
  background: transparent;
  color: var(--aht-color-text-brand);
}

.aht-button--text:hover {
  background: var(--aht-color-action-secondary-hover);
}

.aht-button--text:active {
  background: var(--aht-color-action-secondary-hover);
  color: var(--aht-color-action-primary-hover);
}

.aht-button--text:disabled,
.aht-button--text[aria-disabled='true'] {
  background: transparent;
  color: var(--aht-color-text-secondary);
  cursor: not-allowed;
}

/* Reversed context — the oxblood and brand bands. */
.aht-button--text.aht-button--on-brand {
  color: var(--aht-color-text-on-brand);
}

.aht-button--text.aht-button--on-brand:hover,
.aht-button--text.aht-button--on-brand:active {
  background: rgb(255 255 255 / 12%);
  color: var(--aht-color-text-on-brand);
}