/* Props Editor custom styles — component-level rules only.
 * Global page rules (body, *, focus) live in app.css (standalone only). */

/* Drag Handle specific styles */
/* When header exists, only show on header hover */
.header-hover-area:hover .drag-handle-container {
  opacity: 1 !important;
}

/* When no header exists, show on entire container hover */
.props-editor-container:not(:has(.header-hover-area)) {
  position: relative;
}

.props-editor-container:not(:has(.header-hover-area)):hover .drag-handle-container {
  opacity: 1 !important;
}

.drag-handle-container {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.widgetic-colors .drag-handle svg {
  color: hsl(var(--grey2)) !important;
  transition: color 0.2s ease !important;
}

.widgetic-colors .drag-handle:hover svg {
  color: hsl(var(--grey3)) !important;
}

/* GENERAL WIDGETIC COLORS RULES in all EDITOR */
/* Ensure buttons don't change background on hover */
.widgetic-colors button.bg-white:hover {
  background-color: white !important;
}

/* Ensure proper button text alignment */
.widgetic-colors button span {
  line-height: 1;
}

/* Override button hover states in all contexts */
.widgetic-colors button.bg-white {
  background-color: white !important;
}

.widgetic-colors button.bg-white:hover {
  background-color: white !important;
}

/* General Icons color states */
.widgetic-colors button svg {
  color: hsl(var(--grey5));
}

.widgetic-colors button:hover svg {
  color: hsl(var(--grey7));
}

.design-tab-content[data-state="active"]{
  display: block;
  margin-top: var(--has-both-schemas, 1rem);
}

.props-editor-container:has(.tabs-header) {
  --has-both-schemas: 1rem;
}

.content-items-wrapper {
  padding-top: 1rem;
}