.cg-button {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--cg-radius-md);
  min-height: var(--cg-control-height);
  min-width: var(--cg-touch-target);
  padding-inline: var(--cg-space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cg-space-2);
  font-size: 0.9375rem;
  font-weight: var(--cg-font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--cg-motion-fast) var(--cg-ease-standard),
    background-color var(--cg-motion-base) var(--cg-ease-standard),
    border-color var(--cg-motion-base) var(--cg-ease-standard),
    color var(--cg-motion-base) var(--cg-ease-standard);
}

@media (max-width: 47.99rem) {
  .cg-button {
    min-height: var(--cg-control-height-lg);
  }
}

.cg-button svg {
  width: var(--cg-icon-sm);
  height: var(--cg-icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.cg-button--primary {
  background: var(--cg-color-brand-700);
  color: var(--cg-color-surface);
}

a.cg-button--primary:hover,
button.cg-button--primary:hover {
  background: var(--cg-color-brand-600);
  color: var(--cg-color-surface);
}

.cg-button--secondary {
  background: var(--cg-color-surface);
  color: var(--cg-color-brand-700);
  border-color: var(--cg-color-brand-600);
}

a.cg-button--secondary:hover,
button.cg-button--secondary:hover {
  background: var(--cg-color-brand-50);
  color: var(--cg-color-brand-700);
  border-color: var(--cg-color-brand-700);
}

.cg-button--tertiary {
  background: var(--cg-color-brand-100);
  color: var(--cg-color-brand-700);
}

a.cg-button--tertiary:hover,
button.cg-button--tertiary:hover {
  background: var(--cg-color-brand-50);
  color: var(--cg-color-brand-700);
}

.cg-button--destructive {
  background: var(--cg-color-error);
  color: var(--cg-color-surface);
}

a.cg-button--destructive:hover,
button.cg-button--destructive:hover {
  background: var(--cg-color-sale-dark);
  color: var(--cg-color-surface);
}

.cg-button:active {
  transform: scale(0.985);
}

.cg-button--icon {
  min-width: var(--cg-touch-target);
  min-height: var(--cg-touch-target);
  padding-inline: var(--cg-space-2);
  border-color: transparent;
  background: transparent;
  color: var(--cg-color-ink-900);
}

a.cg-button--icon:hover,
button.cg-button--icon:hover {
  background: var(--cg-color-brand-50);
  color: var(--cg-color-ink-900);
}

.cg-button--icon svg {
  width: var(--cg-icon-md);
  height: var(--cg-icon-md);
}

.cg-button:focus-visible {
  outline: 2px solid var(--cg-color-info);
  outline-offset: 3px;
}

.cg-button[disabled],
.cg-button[aria-disabled="true"] {
  border-color: var(--cg-color-border-strong);
  color: var(--cg-color-ink-500);
  background: var(--cg-color-brand-50);
}

.cg-link {
  text-decoration: underline;
  text-decoration-thickness: var(--cg-text-decoration-thickness);
  text-underline-offset: 0.2em;
  color: var(--cg-color-brand-700);
}

.cg-link--nav {
  text-decoration: none;
  font-weight: var(--cg-font-weight-semibold);
}

.cg-link--icon {
  display: inline-flex;
  align-items: center;
  gap: var(--cg-space-2);
}

.cg-link--icon svg {
  width: var(--cg-icon-sm);
  height: var(--cg-icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.cg-button.is-loading {
  cursor: progress;
  color: inherit;
}

.cg-button.is-loading::after {
  content: "";
  width: var(--cg-icon-sm);
  height: var(--cg-icon-sm);
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: cg-spin 900ms linear infinite;
}

@keyframes cg-spin {
  to {
    transform: rotate(360deg);
  }
}