/**
 * Component CSS — generated from component records.
 * Do not edit. Write CSS on the component via upsert-component / patch-component.
 */

/* delta-component:button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--btn-pad-block) var(--btn-pad-inline);
  border-radius: var(--radius-full);
  font-family: var(--font-text);
  font-size: var(--text-sm-size);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  border: var(--border-width) solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
  background: var(--color-action);
  color: var(--color-on-action);
}

.btn--primary:hover {
  background: var(--color-action-hover);
  color: var(--color-on-action);
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--ghost-border);
}

.btn--ghost:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.btn--secondary {
  background: var(--color-surface-subtle);
  color: var(--color-ink);
  border-color: var(--color-border);
}

.btn--secondary:hover {
  border-color: var(--color-ink-muted);
  color: var(--color-ink);
}

.btn--sm {
  padding: var(--space-sm) var(--space-lg);
}

.btn--block {
  width: 100%;
}

.btn .delta-icon,
.btn svg {
  width: var(--space-md);
  height: var(--space-md);
}