/* ========================================
   Element Toolbar
   ======================================== */

#opus-price-builder-app .element-toolbar {
  @apply bg-surface border-b border-border;
  @apply flex flex-col gap-2 p-3;
}

#opus-price-builder-app .element-toolbar__header {
  @apply flex items-center justify-between;
}

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

#opus-price-builder-app .element-toolbar__hint {
  @apply text-xs text-text-muted;
}

#opus-price-builder-app .element-toolbar__items {
  @apply flex flex-wrap gap-2;
}

#opus-price-builder-app .element-toolbar__empty {
  @apply text-sm text-text-muted text-center py-4;
}

/* Element Toolbar Item */
#opus-price-builder-app .element-toolbar-item {
  @apply relative flex items-center gap-2 px-3 py-2;
  @apply bg-surface-secondary rounded-lg border border-transparent;
  @apply cursor-pointer select-none;
  @apply transition-all duration-[--transition-fast];

  &:hover,
  &[data-hovered="true"] {
    @apply bg-element-hover border-element-border;
  }

  &[data-disabled="true"] {
    @apply opacity-50 cursor-not-allowed;
  }
}

#opus-price-builder-app .element-toolbar-item__icon {
  @apply flex items-center justify-center w-6 h-6;
  @apply text-text-muted;

  .element-toolbar-item:hover &,
  .element-toolbar-item[data-hovered="true"] & {
    @apply text-primary;
  }
}

#opus-price-builder-app .element-toolbar-item__label {
  @apply text-sm font-medium text-text;
  @apply whitespace-nowrap;
}

#opus-price-builder-app .element-toolbar-item__add {
  @apply absolute -top-1.5 -right-1.5;
  @apply flex items-center justify-center w-5 h-5;
  @apply bg-primary text-white rounded-full;
  @apply shadow-md;
  @apply hover:bg-primary-hover;
  @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
}
