s5l.ru-crm/app/components/Admin/CategoryNode/index.styl

.category-node
  border: 1px solid var(--border-color)
  border-radius: var(--border-radius)
  margin-bottom: var(--spacing-xs)
  transition: var(--transition-fast)
  position: relative

.category-node--dragging
  opacity: 0.5
  background: var(--color-primary-10)

.category-node--drag-over
  border-color: var(--color-primary)
  background: var(--color-primary-10)

.category-node__header
  display: flex
  align-items: center
  gap: var(--spacing-sm)
  padding: var(--spacing-md)
  background: var(--color-light-10)
  cursor: grab
  user-select: none
  
  .theme-dark &
    background: var(--color-dark-50)
  
  .category-node--expanded &
    border-bottom: 1px solid var(--border-color)
  
  .category-node--dragging &
    cursor: grabbing

.category-node__toggle
  width: 24px
  height: 24px
  border: 1px solid var(--border-color)
  border-radius: var(--border-radius-sm)
  background: var(--color-white)
  display: flex
  align-items: center
  justify-content: center
  cursor: pointer
  font-weight: var(--font-weight-bold)
  
  .theme-dark &
    background: var(--color-dark)
    color: var(--color-light)

.category-node__spacer
  width: 24px
  text-align: center
  color: var(--color-secondary)

.category-node__name
  flex: 1
  font-weight: var(--font-weight-medium)

.category-node__badge
  background: var(--color-primary)
  color: var(--color-white)
  padding: 2px 8px
  border-radius: 12px
  font-size: var(--font-size-xs)
  font-weight: var(--font-weight-bold)

.category-node__actions
  display: flex
  gap: var(--spacing-xs)
  opacity: 0
  transition: var(--transition-fast)
  
  .category-node__header:hover &
    opacity: 1

.category-node__children
  padding: var(--spacing-sm)
  background: var(--color-white)
  
  .theme-dark &
    background: var(--color-dark-20)

.category-node__drop-indicator
  position: absolute
  bottom: -2px
  left: 0
  right: 0
  height: 3px
  background: var(--color-primary)
  border-radius: 2px

// Анимации
.category-node-enter-active,
.category-node-leave-active
  transition: all 0.3s ease

.category-node-enter-from,
.category-node-leave-to
  opacity: 0
  transform: translateX(-10px)

@media (max-width: 768px)
  .category-node__actions
    opacity: 1
  
  .category-node__header
    flex-wrap: wrap