.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;
}

/* Solid tone — base colors */
.ui-icon-button-solid.ui-icon-button-neutral {
  color: var(--color-text-muted);
}
.ui-icon-button-solid.ui-icon-button-danger {
  color: var(--color-status-danger-foreground);
}
.ui-icon-button-solid.ui-icon-button-warning {
  color: var(--color-status-warning-foreground);
}
.ui-icon-button-solid.ui-icon-button-success {
  color: var(--color-status-success-foreground);
}

/* Solid tone — hover (icon color only, no background fill) */
.ui-icon-button-solid.ui-icon-button-neutral:hover {
  color: var(--color-text-primary);
}
.ui-icon-button-solid.ui-icon-button-danger:hover {
  color: var(--color-status-danger-strong-hover);
}
.ui-icon-button-solid.ui-icon-button-warning:hover {
  color: var(--color-status-warning-strong-hover);
}
.ui-icon-button-solid.ui-icon-button-success:hover {
  color: var(--color-status-success-strong-hover);
}

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

/* Ghost tone — base colors */
.ui-icon-button-ghost.ui-icon-button-neutral {
  color: var(--color-text-faint);
}
.ui-icon-button-ghost.ui-icon-button-danger {
  color: var(--color-text-faint);
}
.ui-icon-button-ghost.ui-icon-button-warning {
  color: var(--color-text-faint);
}
.ui-icon-button-ghost.ui-icon-button-success {
  color: var(--color-text-faint);
}

/* Ghost tone — hover */
.ui-icon-button-ghost.ui-icon-button-neutral:hover {
  color: var(--color-text-primary);
}
.ui-icon-button-ghost.ui-icon-button-danger:hover {
  color: var(--color-status-danger-icon-hover);
}
.ui-icon-button-ghost.ui-icon-button-warning:hover {
  color: var(--color-status-warning-strong);
}
.ui-icon-button-ghost.ui-icon-button-success:hover {
  color: var(--color-status-success-strong);
}

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