/* Primary, secondary and text actions share states; surface variants retain the theme. */
.action-specimen-dark {
  background: var(--ink);
  color: var(--paper);
}

.action-surface-dark {
  --action-focus-color: var(--paper);
  --action-text-rule: var(--ochre);
  --action-text-icon: var(--action-icon-light);
}

.button {
  --action-bg: var(--rust);
  --action-fg: var(--white);
  --action-border: var(--rust);
  --action-hover-bg: var(--action-primary-hover);
  --action-hover-fg: var(--white);
  --action-hover-border: var(--action-primary-hover);
  --action-icon: var(--action-icon-light);
  --action-hover-icon: var(--action-icon-light);
  background: var(--action-bg);
  color: var(--action-fg);
  border-color: var(--action-border);
  transition: var(--action-transition);
  cursor: pointer;
}

.button-secondary {
  --action-bg: transparent;
  --action-fg: var(--ink);
  --action-border: var(--ink);
  --action-hover-bg: var(--ink);
  --action-hover-border: var(--ink);
  --action-icon: var(--action-icon-dark);
}

.button-dark {
  --action-bg: var(--ink);
  --action-border: var(--ink);
  --action-hover-bg: var(--navy);
  --action-hover-border: var(--navy);
}

.button-light {
  --action-bg: var(--paper);
  --action-fg: var(--ink);
  --action-border: var(--paper);
  --action-hover-bg: var(--ink);
  --action-hover-border: var(--ink);
  --action-icon: var(--action-icon-dark);
}

.button-outline-light {
  --action-bg: transparent;
  --action-fg: var(--white);
  --action-border: var(--white);
  --action-hover-bg: var(--white);
  --action-hover-fg: var(--ink);
  --action-hover-border: var(--white);
  --action-hover-icon: var(--action-icon-dark);
}

.text-link {
  min-height: var(--action-target-size);
  color: inherit;
  border-bottom: 0;
}

.text-link::after {
  height: var(--action-line-width);
  background: var(--action-text-rule);
  transform: scaleX(0);
  transition: var(--action-underline-transition);
}

.button img {
  filter: var(--action-icon);
}

.text-link img {
  filter: var(--action-text-icon);
}

:is(.button, .text-link, .conversion-submit-compact) img {
  flex: 0 0 auto;
  transform: none;
  transition: var(--transition-nudge);
}

.newsletter .conversion-submit-compact {
  min-height: var(--action-target-size);
  transition: var(--action-transition);
}

:is(.button, .text-link, .conversion-submit-compact):focus-visible {
  outline-width: var(--action-focus-width);
  outline-style: solid;
  outline-color: var(--action-focus-color);
  outline-offset: var(--action-focus-offset);
}

.button:is(:focus-visible, :active):not(:disabled) {
  background: var(--action-hover-bg);
  color: var(--action-hover-fg);
  border-color: var(--action-hover-border);
}

.button:is(:focus-visible, :active):not(:disabled) img {
  filter: var(--action-hover-icon);
}

.text-link:is(:focus-visible, :active)::after,
.thinking-path:focus-visible .text-link::after {
  transform: scaleX(1);
}

.newsletter .conversion-submit-compact:is(:focus-visible, :active):not(:disabled) {
  background: var(--rust);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover:not(:disabled) {
    background: var(--action-hover-bg);
    color: var(--action-hover-fg);
    border-color: var(--action-hover-border);
  }

  .button:hover:not(:disabled) img {
    filter: var(--action-hover-icon);
  }

  .text-link:hover {
    color: inherit;
  }

  .text-link:hover::after,
  .thinking-path:hover .text-link::after {
    transform: scaleX(1);
  }

  .newsletter .conversion-submit-compact:hover:not(:disabled) {
    background: var(--rust);
  }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.button, .text-link, .conversion-submit-compact):active:not(:disabled) {
    translate: 0 var(--motion-press);
  }

  :is(.button, .text-link, .conversion-submit-compact):focus-visible:not(:disabled) img {
    translate: var(--motion-nudge) 0;
  }

  :is(.button, .text-link):focus-visible img[src*="arrow-up-right"] {
    translate: var(--motion-nudge) calc(-1 * var(--motion-nudge));
  }

  @media (hover: hover) and (pointer: fine) {
    :is(.button, .text-link, .conversion-submit-compact):hover:not(:disabled) img,
    .thinking-path:hover .text-link img {
      translate: var(--motion-nudge) 0;
    }

    :is(.button, .text-link):hover img[src*="arrow-up-right"] {
      translate: var(--motion-nudge) calc(-1 * var(--motion-nudge));
    }
  }
}

.button:disabled,
.conversion-submit-compact:disabled {
  opacity: var(--action-disabled-opacity);
  cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
  :is(.button, .text-link, .conversion-submit-compact),
  :is(.button, .text-link, .conversion-submit-compact) img,
  .text-link::after {
    transition: none;
    translate: none;
  }
}