.root {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button-size-md);
  height: var(--icon-button-size-md);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  color: var(--text-secondary);
  transition:
    background var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.root:focus-visible,
.root.root:focus-visible {
  box-shadow: none;
  outline: none;
}

.root:hover:not(:disabled) {
  transform: translateY(-1px);
}

.ghost {
  background: transparent;
  border-color: transparent;
}

.ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--control-ghost-bg-hover);
  color: var(--text-primary);
}

.filled {
  background: var(--control-secondary-bg);
  border-color: var(--control-secondary-border);
  color: var(--text-primary);
}

.filled:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--control-secondary-bg-hover);
  border-color: var(--control-secondary-border-hover);
}

.sm {
  width: var(--icon-button-size-sm);
  height: var(--icon-button-size-sm);
  border-radius: var(--radius-control-sm);
}

.lg {
  width: var(--icon-button-size-lg);
  height: var(--icon-button-size-lg);
  border-radius: var(--radius-control-lg);
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
