/* ========================================
   Layer Tree
   ======================================== */

#opus-price-builder-app .layer-tree {
  @apply flex flex-col h-full;
  @apply bg-surface border-r border-border;
  width: var(--size-tree-width);
}

#opus-price-builder-app .layer-tree__header {
  @apply flex items-center justify-between;
  @apply px-4 py-3 border-b border-border;
}

#opus-price-builder-app .layer-tree__title {
  @apply text-sm font-semibold text-text;
}

#opus-price-builder-app .layer-tree__content {
  @apply flex-1 overflow-auto p-2;
}

#opus-price-builder-app .layer-tree__empty {
  @apply text-sm text-text-muted text-center py-8;
}

/* Layer Tree Item */
#opus-price-builder-app .layer-item {
  @apply flex items-center gap-2 px-2 py-1.5;
  @apply rounded-md cursor-pointer select-none;
  @apply transition-colors duration-[--transition-fast];

  &:hover {
    @apply bg-surface-secondary;
  }

  &[data-selected="true"] {
    @apply bg-element-selected;
  }

  &[data-dragging="true"] {
    @apply opacity-50;
  }
}

#opus-price-builder-app .layer-item__icon {
  @apply w-4 h-4 text-text-muted;
}

#opus-price-builder-app .layer-item__name {
  @apply flex-1 text-sm text-text truncate;
}

#opus-price-builder-app .layer-item__actions {
  @apply flex items-center gap-1 opacity-0;
  @apply transition-opacity duration-[--transition-fast];

  .layer-item:hover & {
    @apply opacity-100;
  }
}
