.ui-icon-button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.ui-icon-button:focus-visible,
.borderless-icon-button:focus-visible {
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  outline: none;
}

.ui-icon-button-solid.ui-icon-button-neutral {
  color: var(--color-text-muted);
}

.ui-icon-button-solid.ui-icon-button-neutral:hover {
  background: var(--color-surface-neutral-hover);
  color: var(--color-text-primary);
}

.borderless-icon-button {
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  outline: none;
}

.ui-icon-button-ghost.ui-icon-button-neutral,
.ui-icon-button-ghost.ui-icon-button-danger {
  color: var(--color-text-faint);
}

.borderless-icon-button svg {
  height: 1rem;
  width: 1rem;
}