/* frontend/components/IconButton/IconButton.css */
.icon-btn {
  display: inline-flex;
  color: var(--text-icon);
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 32px;
  height: 32px;
  transition: background .15s, color .15s;
}

.icon-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-body);
}

.icon-btn[data-active] {
  color: var(--accent);
}

.icon-btn[data-active]:hover {
  background: var(--accent-bg);
  color: var(--accent);
}

.icon-btn:disabled {
  opacity: .4;
  cursor: default;
}

.icon-btn:disabled:hover {
  background: none;
}