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)

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

.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-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