/* =========================================================================
   BUTTON COMPONENT
   The single component in v1 with its own tier 3 tokens.
   ========================================================================= */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--theme-space-inline-sm);

  padding-block: var(--button-space-block);
  padding-inline: var(--button-space-inline);

  background-color: var(--button-color-background-default);
  color: var(--button-color-text-default);
  border: 2px solid var(--button-color-border-default);
  border-radius: var(--button-radius);
  box-shadow: var(--button-shadow);

  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  letter-spacing: var(--button-letter-spacing);
  text-transform: uppercase;
  text-decoration: none;

  cursor: pointer;
  transition:
    background-color var(--theme-duration-default) var(--theme-easing-default),
    color var(--theme-duration-default) var(--theme-easing-default),
    box-shadow var(--theme-duration-default) var(--theme-easing-default),
    transform var(--theme-duration-fast) var(--theme-easing-default);
}

.button:hover,
.button:focus-visible {
  background-color: var(--button-color-background-hover);
  color: var(--button-color-text-hover);
  box-shadow: var(--button-shadow-hover);
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.button:disabled,
.button[aria-disabled="true"] {
  background-color: var(--button-color-background-disabled);
  color: var(--button-color-text-disabled);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* -------------------------------------------------------------------------
   Secondary button — outline variant
   ------------------------------------------------------------------------- */

.button--secondary {
  background-color: var(--button-secondary-color-background-default);
  color: var(--button-secondary-color-text-default);
  border-color: var(--button-secondary-color-border-default);
  box-shadow: none;
}

.button--secondary:hover,
.button--secondary:focus-visible {
  background-color: var(--button-secondary-color-background-hover);
  color: var(--button-secondary-color-text-hover);
  border-color: var(--button-secondary-color-border-hover);
  box-shadow: none;
}