.sage-ai-minus-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M5 13v-2h14v2z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}

/* Add some animation for the button state change */
.jp-ToolbarButtonComponent svg {
  transition: transform 0.3s ease;
}

.sage-ai-context-added .jp-ToolbarButtonComponent svg {
  transform: rotate(45deg);
}

/* Custom button states */
.jp-CellTools .jp-ToolbarButtonComponent[data-command="sage-ai-add-to-context"] {
  position: relative;
}

.jp-ToolbarButtonComponent[data-command="sage-ai-add-to-context"].sage-ai-context-added::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  background-color: #3498db;
  border-radius: 50%;
}
