.griswold-context-button {
  appearance: none;
  align-items: center;
  background: var(--griswold-button-background, #1f77b4);
  border: 1px solid transparent;
  border-radius: var(--griswold-button-radius, 0.5rem);
  color: var(--griswold-button-color, #fff);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 700;
  gap: 0.5rem;
  justify-content: center;
  line-height: 1.2;
  min-height: 2.75rem;
  padding: 0.75rem 1.125rem;
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.griswold-context-button:hover {
  background: var(--griswold-button-background-hover, #185f90);
  color: var(--griswold-button-color, #fff);
  transform: translateY(-1px);
}

.griswold-context-button:focus-visible {
  box-shadow: 0 0 0 3px var(--griswold-button-focus, rgba(31, 119, 180, 0.28));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .griswold-context-button {
    transition: none;
  }
}