.root {
  display: inline-flex;
  align-items: center;
  gap: var(--su-space-1);
  padding: 0;
  border: none;
  background: none;
  font-size: var(--su-font-size-sm);
  line-height: var(--su-line-height-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--su-duration-fast) var(--su-ease-out);
}

.primary {
  color: var(--su-color-primary);
}

.danger {
  color: var(--su-color-danger);
}

.root:hover:not(:disabled) {
  text-decoration: underline;
}

.root:focus-visible {
  border-radius: var(--su-radius-xs);
  outline: var(--su-focus-ring);
  outline-offset: var(--su-focus-ring-offset);
}

.root:disabled {
  color: var(--su-text-disabled);
  cursor: not-allowed;
}

.icon {
  display: inline-flex;
  font-size: var(--su-font-size-md);
}

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