@ibiz-template/vue3-components 0.7.41-alpha.2 → 0.7.41-alpha.21

package/es/panel-component/app-extend-menu/extend-menu-base/extend-menu-base.util.d.ts

@@ -0,0 +1,222 @@
+import { Ref, VNode } from 'vue';
+import { IAppMenuItem, ILayout } from '@ibiz/model-core';
+import { IAppMenuItemProvider } from '@ibiz-template/runtime';
+import { Namespace } from '@ibiz-template/core';
+/**
+ * @description 组件传参类型定义
+ *
+ * @export
+ * @interface IExtendMenuProps
+ */
+export interface IExtendMenuProps {
+    items: IAppMenuItem[];
+    menuItemsState: {
+        [p: string]: {
+            visible: boolean;
+            permitted: boolean;
+        };
+    };
+    providers: {
+        [key: string]: IAppMenuItemProvider;
+    };
+    position: 'LEFT' | 'RIGHT' | 'TOP' | 'BOTTOM';
+    layoutMode: 'TABLE' | 'TABLE_12COL' | 'TABLE_24COL' | 'FLEX' | 'BORDER' | 'ABSOLUTE';
+    layout: ILayout;
+}
+/**
+ * @description 菜单项绘制数据
+ *
+ * @export
+ * @interface IMenuBaseItem
+ * @extends {IAppMenuItem}
+ */
+export interface IMenuBaseItem extends IAppMenuItem {
+    /** 数据层级 */
+    level: number;
+    /** 主键 */
+    value?: string;
+    /** 主文本 */
+    label?: string;
+    /** 父主键 */
+    parentId?: string;
+    /** 子项数据集合 */
+    children?: IMenuBaseItem[];
+}
+/**
+ * @description 按钮菜单项绘制数据
+ *
+ * @export
+ * @interface IButtonMenuItem
+ * @extends {IAppMenuItem}
+ */
+export interface IButtonMenuItem extends IMenuBaseItem {
+}
+/**
+ * @description 菜单绘制通用参数
+ *
+ * @export
+ * @interface IMenuRenderParams
+ */
+export interface IMenuRenderParams {
+    /** 菜单样式处理命名空间 */
+    ns: Namespace;
+    /** 菜单对齐 */
+    menuAlign: 'horizontal' | 'vertical';
+    /** 菜单项权限数据 */
+    menuItemsState: {
+        [p: string]: {
+            visible: boolean;
+            permitted: boolean;
+        };
+    };
+}
+/**
+ * @description 绘制单个菜单项参数
+ *
+ * @export
+ * @interface IMenuItemParams
+ * @extends {IMenuRenderParams}
+ */
+export interface IMenuItemParams extends IMenuRenderParams {
+    /** 菜单项 */
+    menu: IMenuBaseItem;
+}
+/**
+ * @description 多菜单项（子菜单内容）参数
+ *
+ * @export
+ * @interface IMenuContentParams
+ * @extends {IMenuRenderParams}
+ */
+export interface IMenuContentParams extends IMenuRenderParams {
+    /** 是否支持布局 */
+    isLayout: boolean;
+    /** 菜单方向 */
+    position: string;
+    /** 菜单项绘制数据集合 */
+    menus: IButtonMenuItem[];
+    /** 显示级联箭头 */
+    showCascaderArrow?: boolean;
+    /** 菜单布局模型 */
+    menuLayout?: ILayout;
+    /** 菜单项点击 */
+    handleMenuItemClick: (_menu: IButtonMenuItem, event: MouseEvent) => void;
+    /** 鼠标移入菜单项，准备弹出子菜单 */
+    handleMenuItemMouseEnter: (_menu: IButtonMenuItem, event: MouseEvent) => void;
+    /** 鼠标移出菜单项 */
+    handleMenuItemMouseLeave: (_menu: IButtonMenuItem, event: MouseEvent) => void;
+}
+/**
+ * @description 绘制常规菜单项参数
+ *
+ * @export
+ * @interface IStandardMenuItemParams
+ * @extends {IMenuRenderParams}
+ */
+export interface IStandardMenuItemParams extends IMenuRenderParams {
+    /** 菜单项 */
+    menu: IMenuBaseItem;
+    /** 是否为首次绘制 */
+    isFirst: boolean;
+    /** 是否水平折叠收起菜单 */
+    collapse: boolean;
+}
+/**
+ * @description 绘制常规菜单的参数
+ *
+ * @export
+ * @interface IStandardMenuContentParams
+ * @extends {IMenuContentParams}
+ */
+export interface IStandardMenuContentParams extends IMenuRenderParams {
+    /** 是否支持布局 */
+    isLayout: boolean;
+    /** 菜单方向 */
+    position: string;
+    /** 是否水平折叠收起菜单（仅在 menuAlign 为 vertical 时可用） */
+    collapse: boolean;
+    /** 刷新key */
+    refreshKey: string;
+    /** 菜单项绘制数据集合 */
+    menus: IMenuBaseItem[];
+    /** 菜单布局模型 */
+    menuLayout?: ILayout;
+    /** 菜单选中 */
+    handleMenuSelect: (_id: string, event: MouseEvent) => void;
+}
+/**
+ * @description 用于构建级联菜单的弹出层控制逻辑
+ *
+ * - 支持多层级菜单结构；
+ * - 根据鼠标移入/移出控制子菜单弹出与关闭；
+ * - 菜单项移入时打开对应子菜单，移出时自动延迟关闭；
+ * - 子菜单弹出方向根据配置自动计算；
+ * - 支持箭头图标旋转动画；
+ *
+ * @param props - 外部传入的菜单属性，包含菜单项、权限、适配器、布局模式等
+ * @param ns - 命名空间，用于生成 CSS BEM 类名
+ * @param menuAlign - 菜单排列方向（如 vertical）
+ * @param onMenuItemClick - 菜单项点击事件处理器
+ * @param renderCascader - 子菜单内容渲染函数（返回 VNode）
+ *
+ * @returns {
+ *   getOverlayNum: 获取打开的级联数量；
+ *   clearAllCascader: 清除所有层级弹窗和计时器；
+ *   openCascaderPopover: 打开子菜单气泡；
+ *   onMenuItemMouseEnter: 鼠标移入菜单项时的处理函数；
+ *   onMenuItemMouseLeave: 鼠标移出菜单项时的处理函数；
+ * }
+ */
+export declare function useCascaderPopover(props: IExtendMenuProps, ns: Namespace, menuAlign: Ref<string>, renderCascaderContent: (_menu: IButtonMenuItem) => VNode): {
+    getOverlayNum: () => number;
+    clearAllCascader: () => void;
+    openCascaderPopover: (menu: IButtonMenuItem, evt: MouseEvent, opts?: IData) => void;
+    handleMenuItemMouseEnter: (_menu: IButtonMenuItem, _event: MouseEvent) => void;
+    handleMenuItemMouseLeave: (_menu: IButtonMenuItem, _event: MouseEvent) => void;
+};
+/**
+ * @description 用于构建边缘布局弹出层控制逻辑
+ *
+ * - 创建 fixed 占位元素
+ * - 占位块随目标元素变化而更新
+ * - 鼠标悬停触发弹出层
+ * - 移出占位层自动关闭弹层
+ * - 组件卸载自动清理
+ *
+ * @export
+ * @param {(Ref<HTMLElement | undefined>)} menuRef 菜单元素引用
+ * @param {Namespace} ns 命名空间工具
+ * @param {('LEFT' | 'RIGHT' | 'TOP' | 'BOTTOM')} position 元素的方向
+ * @param {Ref<string>} menuAlign 菜单对齐方式
+ * @param {() => number} getOverlayNum 获取当前层级 Overlay 数量
+ * @param {() => VNode} renderBorderContent 渲染边框内容
+ * @returns {
+ *   closeBorderPopover: 关闭边框弹出层
+ * }
+ */
+export declare function useBorderLayout(menuRef: Ref<HTMLElement | undefined>, ns: Namespace, position: 'LEFT' | 'RIGHT' | 'TOP' | 'BOTTOM', menuAlign: Ref<string>, getOverlayNum: () => number, renderBorderContent: () => VNode): {
+    closeBorderPopover: () => void;
+};
+/**
+ * 递归生成菜单数据，递给 element 的 Menu 组件
+ *
+ * @param {AppMenuItemModel[]} items
+ * @return {*}  {IMenuBaseItem[]}
+ */
+export declare function getMenus(items: IAppMenuItem[], _parentItem?: IAppMenuItem, level?: number): IMenuBaseItem[];
+/**
+ * @description 查询菜单项模型
+ *
+ * @export
+ * @param {string} _id 菜单标识
+ * @param {IAppMenuItem[]} items 菜单数据集合
+ * @return {*}  {(IAppMenuItem | undefined)}
+ */
+export declare function findMenuItem(_id: string, items: IAppMenuItem[]): IAppMenuItem | undefined;
+/**
+ * 获取菜单布局样式
+ *
+ * @param {ILayout} [layout] 布局模型
+ * @return {*}
+ */
+export declare function getMenuLayout(layout?: ILayout): IData;

package/es/panel-component/app-extend-menu/extend-menu-base/extend-menu-base.util.mjs

@@ -0,0 +1,349 @@
+import { ref, h, onMounted, onUnmounted } from 'vue';
+
+"use strict";
+function useCascaderPopover(props, ns, menuAlign, renderCascaderContent) {
+  let hoverCount = 0;
+  let closeTimer = null;
+  const overlayInstances = /* @__PURE__ */ new Map();
+  const activeMenuIdStack = ref([]);
+  const rotatedArrowElements = /* @__PURE__ */ new Map();
+  const getOverlayNum = () => {
+    return overlayInstances.size;
+  };
+  const getPopoverPlacement = (level) => {
+    switch (props.position) {
+      case "TOP":
+        return level > 0 ? "right-start" : "bottom-start";
+      case "BOTTOM":
+        return level > 0 ? "right-end" : "top-start";
+      case "RIGHT":
+        return "left-start";
+      case "LEFT":
+        return "right-start";
+      default:
+        return void 0;
+    }
+  };
+  const clearCloseTimer = () => {
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      closeTimer = null;
+    }
+  };
+  const resetArrowRotation = (ns2, key) => {
+    const arrow = rotatedArrowElements.get(key);
+    if (!arrow)
+      return;
+    arrow.classList.remove(ns2.is("rotate-arrow", true));
+    rotatedArrowElements.delete(key);
+  };
+  const rotateArrowIcon = (el, ns2, key) => {
+    if (el) {
+      el.classList.add(ns2.is("rotate-arrow", true));
+      rotatedArrowElements.set(key, el);
+    }
+  };
+  const closePopoverAtLevel = (key) => {
+    const overlay = overlayInstances.get(key);
+    if (overlay) {
+      overlay.dismiss();
+      overlayInstances.delete(key);
+      resetArrowRotation(ns, key);
+    }
+  };
+  const closeSubsequentPopovers = (currentLevel) => {
+    let level = currentLevel;
+    while (overlayInstances.get(level + 1)) {
+      level++;
+    }
+    for (let i = level; i >= currentLevel; i--) {
+      closePopoverAtLevel(i);
+    }
+  };
+  const closeAllPopovers = () => {
+    for (const key of overlayInstances.keys()) {
+      closePopoverAtLevel(key);
+    }
+    overlayInstances.clear();
+    activeMenuIdStack.value = [];
+    hoverCount = 0;
+  };
+  const scheduleDelayedClose = () => {
+    clearCloseTimer();
+    closeTimer = setTimeout(() => {
+      if (hoverCount <= 0) {
+        closeAllPopovers();
+      }
+    }, 300);
+  };
+  const clearAllCascader = () => {
+    closeAllPopovers();
+    clearCloseTimer();
+  };
+  const handleMenuItemMouseEnter = (_menu, event) => {
+    if (activeMenuIdStack.value.includes(_menu.id))
+      return;
+    activeMenuIdStack.value.push(_menu.id);
+    closeSubsequentPopovers(_menu.level);
+    if (_menu.children) {
+      openCascaderPopover(_menu, event);
+    }
+    clearCloseTimer();
+  };
+  const handleMenuItemMouseLeave = (_menu) => {
+    const index = activeMenuIdStack.value.indexOf(_menu.id);
+    if (index !== -1) {
+      activeMenuIdStack.value.splice(index, 1);
+    }
+    scheduleDelayedClose();
+  };
+  const onPopoverMouseEnter = () => {
+    hoverCount++;
+    clearCloseTimer();
+  };
+  const onPopoverMouseLeave = (_menu, _event) => {
+    hoverCount = Math.max(0, hoverCount - 1);
+    scheduleDelayedClose();
+  };
+  const openCascaderPopover = (menu, evt, opts) => {
+    var _a;
+    const overlay = ibiz.overlay.createPopover(
+      () => h(renderCascaderContent(menu), {
+        onMouseenter: onPopoverMouseEnter,
+        onMouseleave: onPopoverMouseLeave
+      }),
+      void 0,
+      {
+        width: "auto",
+        height: "auto",
+        noArrow: true,
+        placement: getPopoverPlacement(menu.level),
+        offsetOpts: 10,
+        ...opts,
+        modalClass: "".concat(ns.b("cascader-popover"), " ").concat(ns.is(
+          menuAlign.value,
+          true
+        ), " ").concat((opts == null ? void 0 : opts.modalClass) || "")
+      }
+    );
+    overlayInstances.set(menu.level, overlay);
+    overlay == null ? void 0 : overlay.present(evt.currentTarget);
+    rotateArrowIcon(
+      (_a = evt.currentTarget) == null ? void 0 : _a.parentElement,
+      ns,
+      menu.level
+    );
+  };
+  return {
+    getOverlayNum,
+    openCascaderPopover,
+    clearAllCascader,
+    handleMenuItemMouseEnter,
+    handleMenuItemMouseLeave
+  };
+}
+function useBorderLayout(menuRef, ns, position, menuAlign, getOverlayNum, renderBorderContent) {
+  let overlay;
+  const getElementAbsolutePosition = (element) => {
+    let x = 0;
+    let y = 0;
+    let current = element;
+    while (current) {
+      x += current.offsetLeft;
+      y += current.offsetTop;
+      current = current.offsetParent;
+    }
+    return {
+      x,
+      y,
+      width: element.offsetWidth,
+      height: element.offsetHeight
+    };
+  };
+  const resolvePopoverPlacement = () => {
+    switch (position) {
+      case "TOP":
+        return "bottom";
+      case "BOTTOM":
+        return "top";
+      case "RIGHT":
+        return "left";
+      case "LEFT":
+        return "right";
+      default:
+        return void 0;
+    }
+  };
+  let popoverEl;
+  const closeBorderPopover = () => {
+    overlay == null ? void 0 : overlay.dismiss();
+    overlay = null;
+    document.removeEventListener("mousemove", handleMouseTrackOut);
+    popoverEl = void 0;
+  };
+  const handleMouseTrackOut = (e) => {
+    if (!popoverEl) {
+      popoverEl = document.querySelector(
+        ".".concat(ns.b("border-popover"))
+      );
+    }
+    const pos = getElementAbsolutePosition(popoverEl);
+    const isInside = e.pageX >= pos.x && e.pageX <= pos.x + pos.width && e.pageY >= pos.y && e.pageY <= pos.y + pos.height;
+    if (!isInside && getOverlayNum() <= 0) {
+      closeBorderPopover();
+    }
+  };
+  const handlePlaceholderMouseEnter = async (evt) => {
+    var _a;
+    if (overlay)
+      return;
+    overlay = ibiz.overlay.createPopover(
+      () => h(renderBorderContent()),
+      void 0,
+      {
+        width: "auto",
+        height: "auto",
+        noArrow: true,
+        placement: resolvePopoverPlacement(),
+        offsetOpts: -1,
+        modalClass: "".concat(ns.b("border-popover"), " ").concat(ns.is(menuAlign.value, true))
+      }
+    );
+    const triggerEl = (_a = evt.currentTarget) == null ? void 0 : _a.querySelector(
+      ".".concat(ns.be("placehold", "line"))
+    );
+    await (overlay == null ? void 0 : overlay.present(triggerEl));
+    setTimeout(() => {
+      document.addEventListener("mousemove", handleMouseTrackOut);
+    }, 200);
+  };
+  let placeholderEl = null;
+  let resizeObserver = null;
+  let frameLoopId = null;
+  const minWidth = 20;
+  const minHeight = 20;
+  const computeTop = (top, height) => {
+    return position === "BOTTOM" ? top + height - minHeight : top;
+  };
+  const computeLeft = (left, width) => {
+    return position === "RIGHT" ? left + width - minWidth : left;
+  };
+  const computeWidth = (width) => {
+    return ["RIGHT", "LEFT"].includes(position) ? minWidth : width;
+  };
+  const computeHeight = (height) => {
+    return ["TOP", "BOTTOM"].includes(position) ? minHeight : height;
+  };
+  function createFixedPlaceholder(el) {
+    const container = document.createElement("div");
+    container.classList.add(ns.b("placehold"));
+    container.classList.add(ns.is(position.toLowerCase(), !!position));
+    const line = document.createElement("div");
+    line.classList.add(ns.be("placehold", "line"));
+    const arrow = document.createElement("div");
+    arrow.classList.add(ns.be("placehold", "arrow"));
+    container.appendChild(line);
+    container.appendChild(arrow);
+    document.body.appendChild(container);
+    placeholderEl = container;
+    placeholderEl.addEventListener("mouseenter", handlePlaceholderMouseEnter);
+    arrow.innerHTML = '\n      <svg xmlns="http://www.w3.org/2000/svg"\n           viewBox="0 0 1024 1024"\n           width="1em"\n           height="1em"\n           fill="currentColor">\n        <path fill="currentColor"\n              d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z">\n        </path>\n      </svg>\n    ';
+    updatePlaceholderPosition(el);
+  }
+  function updatePlaceholderPosition(el) {
+    if (!placeholderEl)
+      return;
+    const rect = el.getBoundingClientRect();
+    placeholderEl.style.top = "".concat(computeTop(rect.top, rect.height), "px");
+    placeholderEl.style.left = "".concat(computeLeft(rect.left, rect.width), "px");
+    placeholderEl.style.width = "".concat(computeWidth(rect.width), "px");
+    placeholderEl.style.height = "".concat(computeHeight(rect.height), "px");
+  }
+  function startTracking() {
+    const el = menuRef.value;
+    if (!el)
+      return;
+    createFixedPlaceholder(el);
+    resizeObserver = new ResizeObserver(() => updatePlaceholderPosition(el));
+    resizeObserver.observe(el);
+    const updateLoop = () => {
+      updatePlaceholderPosition(el);
+      frameLoopId = requestAnimationFrame(updateLoop);
+    };
+    frameLoopId = requestAnimationFrame(updateLoop);
+  }
+  function stopTrackingAndDestroy() {
+    if (resizeObserver) {
+      const el = menuRef.value;
+      if (el)
+        resizeObserver.unobserve(el);
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+    if (frameLoopId !== null) {
+      cancelAnimationFrame(frameLoopId);
+      frameLoopId = null;
+    }
+    if (placeholderEl && placeholderEl.parentNode) {
+      placeholderEl.removeEventListener(
+        "mouseenter",
+        handlePlaceholderMouseEnter
+      );
+      placeholderEl.parentNode.removeChild(placeholderEl);
+      placeholderEl = null;
+    }
+  }
+  onMounted(startTracking);
+  onUnmounted(stopTrackingAndDestroy);
+  return { closeBorderPopover };
+}
+function getMenus(items, _parentItem, level = 0) {
+  return items.map((item) => {
+    var _a;
+    const data = {
+      ...item,
+      value: item.id,
+      label: item.caption,
+      parentId: _parentItem == null ? void 0 : _parentItem.id,
+      level
+    };
+    if ((_a = item.appMenuItems) == null ? void 0 : _a.length) {
+      data.children = getMenus(item.appMenuItems, item, level + 1);
+    }
+    return data;
+  });
+}
+function findMenuItem(_id, items) {
+  let temp;
+  if (items) {
+    items.some((item) => {
+      if (!item.id)
+        return true;
+      if (item.id === _id) {
+        temp = item;
+        return true;
+      }
+      if (item.appMenuItems && item.appMenuItems.length > 0) {
+        temp = findMenuItem(_id, item.appMenuItems);
+        if (!temp) {
+          return false;
+        }
+        return true;
+      }
+      return false;
+    });
+  }
+  return temp;
+}
+function getMenuLayout(layout) {
+  if ((layout == null ? void 0 : layout.layout) === "FLEX") {
+    const { align, valign } = layout;
+    return {
+      justifyContent: align,
+      alignItems: valign
+    };
+  }
+  return {};
+}
+
+export { findMenuItem, getMenuLayout, getMenus, useBorderLayout, useCascaderPopover };

package/es/panel-component/app-extend-menu/extend-menu-base/extend-standard-menu/extend-standard-menu.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ibiz-extend-standard-menu{width:100%;height:100%}.ibiz-extend-standard-menu__content{position:relative;width:100%;height:100%;background-color:var(--ibiz-color-primary);--ibiz-extend-standard-menu-collapse-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-extend-standard-menu-icon-width:var(--ibiz-width-icon-large);--ibiz-extend-standard-menu-icon-height:var(--ibiz-width-icon-large);--ibiz-extend-standard-menu-icon-margin:0 var(--ibiz-spacing-tight) 0 0;--ibiz-extend-standard-menu-text-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-extend-standard-menu-icon-position:calc(var(--ibiz-spacing-base) - 2px);--ibiz-extend-standard-menu-icon-size:var(--ibiz-width-icon-medium);--ibiz-extend-standard-menu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-extend-standard-menu-scorll-color:var(--ibiz-color-scroll-menu);--ibiz-extend-standard-menu-horizontal-height:50px;--ibiz-extend-standard-menu-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-standard-menu-active-color:var(--ibiz-color-primary-active-text);--ibiz-extend-standard-menu-active-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-standard-menu-color:var(--ibiz-color-text-menu);--ibiz-extend-standard-menu-item-selected-border-color:transparent;--ibiz-extend-standard-menu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-extend-standard-menu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-standard-menu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-standard-menu-item-padding:var(--ibiz-spacing-tight);--ibiz-extend-standard-menu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-extend-standard-menu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-extend-standard-menu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-extend-standard-menu-item-height:42px;--ibiz-extend-standard-menu-item-gap:2px;--ibiz-extend-standard-menu-item-color:var(--ibiz-color-text-menu);--ibiz-extend-standard-menu-item-separator-color:var(--ibiz-color-scroll-menu);--ibiz-extend-standard-menu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-extend-standard-menu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-standard-menu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-standard-menu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-extend-standard-menu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-extend-standard-menu-item-horizontal-height:100%;--ibiz-extend-standard-menu-item-horizontal-border-radius:0;--ibiz-extend-standard-menu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-extend-standard-menu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-extend-standard-menu-item-horizontal-popup-height:40px}.ibiz-extend-standard-menu__content>.el-menu{height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base);overflow:hidden auto;border-right:0;--el-menu-hover-text-color:var(--ibiz-extend-standard-menu-item-color);--el-menu-hover-bg-color:transparent;--ibiz-extend-standard-menu-item-selected-border-color:transparent;--ibiz-extend-standard-menu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-extend-standard-menu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-standard-menu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-standard-menu-item-padding:var(--ibiz-spacing-tight);--ibiz-extend-standard-menu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-extend-standard-menu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-extend-standard-menu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-extend-standard-menu-item-height:42px;--ibiz-extend-standard-menu-item-gap:2px;--ibiz-extend-standard-menu-item-color:var(--ibiz-color-text-menu);--ibiz-extend-standard-menu-item-separator-color:var(--ibiz-color-scroll-menu);--ibiz-extend-standard-menu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-extend-standard-menu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-standard-menu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-standard-menu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-extend-standard-menu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-extend-standard-menu-item-horizontal-height:100%;--ibiz-extend-standard-menu-item-horizontal-border-radius:0;--ibiz-extend-standard-menu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-extend-standard-menu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-extend-standard-menu-item-horizontal-popup-height:40px}.ibiz-extend-standard-menu__content>.el-menu .ibiz-extend-standard-menu__rawitem{min-height:var(--ibiz-extend-standard-menu-item-height);line-height:var(--ibiz-extend-standard-menu-item-height)}.ibiz-extend-standard-menu__content>.el-menu .ibiz-extend-standard-menu__rawitem .ibiz-rawitem{display:flex;align-items:center;justify-content:flex-start;font-size:var(--ibiz-extend-standard-menu-item-font-size);color:var(--ibiz-extend-standard-menu-item-color)}.ibiz-extend-standard-menu__content>.el-menu .ibiz-extend-standard-menu__rawitem .ibiz-rawitem>.ibiz-icon{display:flex;align-items:center;width:var(--ibiz-extend-standard-menu-icon-width);height:var(--ibiz-extend-standard-menu-icon-height);font-size:var(--ibiz-extend-standard-menu-icon-size)}.ibiz-extend-standard-menu__content>.el-menu .ibiz-extend-standard-menu__rawitem .ibiz-rawitem *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-extend-standard-menu__content .el-sub-menu .el-sub-menu__icon-arrow{right:10px;width:var(--ibiz-extend-standard-menu-icon-width);height:var(--ibiz-extend-standard-menu-icon-height);margin-top:-10px;font-size:var(--ibiz-extend-standard-menu-icon-width)}.ibiz-extend-standard-menu__content .el-sub-menu .el-menu-item{padding:calc(var(--ibiz-extend-standard-menu-item-padding) * .875) calc(var(--ibiz-extend-standard-menu-item-padding) * 2.5)}.ibiz-extend-standard-menu__content .el-sub-menu .el-sub-menu__title>.ibiz-extend-standard-menu__counter{right:30px}.ibiz-extend-standard-menu__content .el-menu--vertical{width:100%}.ibiz-extend-standard-menu__content .el-menu--vertical .el-menu-item,.ibiz-extend-standard-menu__content .el-menu--vertical .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;--el-menu-base-level-padding:var(--ibiz-extend-standard-menu-item-padding);width:100%;height:var(--ibiz-extend-standard-menu-item-height);font-size:var(--ibiz-extend-standard-menu-item-font-size);color:var(--ibiz-extend-standard-menu-item-color);white-space:nowrap;border-radius:var(--ibiz-extend-standard-menu-item-border-radius)}.ibiz-extend-standard-menu__content .el-menu--vertical .el-menu-item.is-active,.ibiz-extend-standard-menu__content .el-menu--vertical .el-sub-menu__title.is-active{color:var(--ibiz-extend-standard-menu-item-selected-color)!important;background-color:var(--ibiz-extend-standard-menu-item-selected-bg-color)}.ibiz-extend-standard-menu__content .el-menu--vertical .el-menu-item:hover,.ibiz-extend-standard-menu__content .el-menu--vertical .el-sub-menu__title:hover{color:var(--ibiz-extend-standard-menu-item-hover-color);background-color:var(--ibiz-extend-standard-menu-item-hover-bg-color)}.ibiz-extend-standard-menu__content .el-menu--vertical .el-menu-item+.el-menu-item{margin-top:var(--ibiz-extend-standard-menu-item-gap)}.ibiz-extend-standard-menu__content .el-menu--vertical .el-sub-menu+.el-menu-item{margin-top:var(--ibiz-extend-standard-menu-item-gap)}.ibiz-extend-standard-menu__content .el-menu--vertical .el-sub-menu+.el-sub-menu{margin-top:var(--ibiz-extend-standard-menu-item-gap)}.ibiz-extend-standard-menu__content .el-menu--vertical .el-menu-item+.el-sub-menu{margin-top:var(--ibiz-extend-standard-menu-item-gap)}.ibiz-extend-standard-menu__content .el-menu--vertical .el-sub-menu__title+.el-menu{margin-top:var(--ibiz-extend-standard-menu-item-gap)}.ibiz-extend-standard-menu__content .el-menu--vertical::-webkit-scrollbar-thumb{background-color:var(--ibiz-extend-standard-menu-scorll-color)}.ibiz-extend-standard-menu__content .el-menu--horizontal{align-items:center;height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);overflow-x:hidden;border-bottom:none}.ibiz-extend-standard-menu__content .el-menu--horizontal .el-menu-item,.ibiz-extend-standard-menu__content .el-menu--horizontal .el-sub-menu__title{height:var(--ibiz-extend-standard-menu-item-horizontal-height);padding:var(--ibiz-extend-standard-menu-item-horizontal-padding);font-size:var(--ibiz-extend-standard-menu-item-horizontal-font-size);line-height:var(--ibiz-extend-standard-menu-item-horizontal-height);color:var(--ibiz-extend-standard-menu-item-horizontal-color);white-space:nowrap;border-width:0;border-radius:var(--ibiz-extend-standard-menu-item-horizontal-border-radius)}.ibiz-extend-standard-menu__content .el-menu--horizontal .el-menu-item:hover,.ibiz-extend-standard-menu__content .el-menu--horizontal .el-sub-menu__title:hover{color:var(--ibiz-extend-standard-menu-item-horizontal-hover-color);background-color:var(--ibiz-extend-standard-menu-item-horizontal-hover-bg-color)}.ibiz-extend-standard-menu__content .el-menu--horizontal .el-menu-item.is-active,.ibiz-extend-standard-menu__content .el-menu--horizontal .el-sub-menu__title.is-active{color:var(--ibiz-extend-standard-menu-item-selected-color)!important;background-color:var(--ibiz-extend-standard-menu-item-horizontal-selected-bg-color);border-top:var(--ibiz-extend-standard-menu-item-border)}.ibiz-extend-standard-menu__content .el-menu--horizontal .el-menu-item .el-sub-menu__icon-arrow,.ibiz-extend-standard-menu__content .el-menu--horizontal .el-sub-menu__title .el-sub-menu__icon-arrow{right:var(--ibiz-extend-standard-menu-icon-position)}.ibiz-extend-standard-menu__content .el-menu--horizontal .el-sub-menu{height:var(--ibiz-extend-standard-menu-item-horizontal-height)}.ibiz-extend-standard-menu__content .el-menu--horizontal .el-sub-menu>.el-sub-menu__title{padding-right:var(--ibiz-extend-standard-menu-item-horizontal-padding-right)}.ibiz-extend-standard-menu__content .el-menu--horizontal>.el-sub-menu:hover .el-sub-menu__title{color:var(--ibiz-extend-standard-menu-item-horizontal-hover-color);background-color:var(--ibiz-extend-standard-menu-item-horizontal-hover-bg-color)}.ibiz-extend-standard-menu__content .el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title{color:var(--ibiz-extend-standard-menu-item-horizontal-selected-color);background-color:var(--ibiz-extend-standard-menu-item-horizontal-selected-bg-color);border-top:var(--ibiz-extend-standard-menu-item-border);border-bottom:0}.ibiz-extend-standard-menu__content .el-menu--horizontal::-webkit-scrollbar-thumb{background-color:var(--ibiz-extend-standard-menu-scorll-color)}.ibiz-extend-standard-menu__content .el-menu--horizontal .el-divider--vertical{border-color:var(--ibiz-extend-standard-menu-item-separator-color)}.ibiz-extend-standard-menu__content.is-horizontal{--ibiz-color-text-0:var(--ibiz-color-primary-text);--ibiz-color-text-1:var(--ibiz-color-primary-text);--ibiz-color-text-2:var(--ibiz-color-primary-text);--ibiz-color-text-3:var(--ibiz-color-primary-text);width:100%;height:var(--ibiz-extend-standard-menu-horizontal-height)}.ibiz-extend-standard-menu__content.is-bottom .el-menu--horizontal .el-menu-item.is-active,.ibiz-extend-standard-menu__content.is-bottom .el-menu--horizontal .el-sub-menu.is-active .el-sub-menu__title{border-top:0;border-bottom:var(--ibiz-extend-standard-menu-item-border)}.ibiz-extend-standard-menu__content.is-collapse>.el-menu{padding:var(--ibiz-spacing-tight)}.ibiz-extend-standard-menu__content .el-menu{--ibiz-color-primary-hover:var(--ibiz-extend-standard-menu-active-bg-color);--ibiz-color-primary-hover-text:var(--ibiz-extend-standard-menu-active-color);--ibiz-color-primary-active:var(--ibiz-extend-standard-menu-hover-bg-color);--ibiz-color-primary-active-text:var(--ibiz-extend-standard-menu-hover-color);--el-button-text-color:var(--ibiz-extend-standard-menu-color)}.ibiz-extend-standard-menu__icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-extend-standard-menu-icon-width);height:var(--ibiz-extend-standard-menu-icon-height);font-size:var(--ibiz-extend-standard-menu-icon-size)}.ibiz-extend-standard-menu__icon+.ibiz-extend-standard-menu__caption{margin:var(--ibiz-extend-standard-menu-text-margin)}.ibiz-extend-standard-menu__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-extend-standard-menu-popup-container{--el-menu-hover-text-color:var(--ibiz-extend-standard-menu-item-color);--el-menu-hover-bg-color:transparent;--ibiz-extend-standard-menu-item-selected-border-color:transparent;--ibiz-extend-standard-menu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-extend-standard-menu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-standard-menu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-standard-menu-item-padding:var(--ibiz-spacing-tight);--ibiz-extend-standard-menu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-extend-standard-menu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-extend-standard-menu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-extend-standard-menu-item-height:42px;--ibiz-extend-standard-menu-item-gap:2px;--ibiz-extend-standard-menu-item-color:var(--ibiz-color-text-menu);--ibiz-extend-standard-menu-item-separator-color:var(--ibiz-color-scroll-menu);--ibiz-extend-standard-menu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-extend-standard-menu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-standard-menu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-standard-menu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-extend-standard-menu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-extend-standard-menu-item-horizontal-height:100%;--ibiz-extend-standard-menu-item-horizontal-border-radius:0;--ibiz-extend-standard-menu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-extend-standard-menu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-extend-standard-menu-item-horizontal-popup-height:40px}.ibiz-extend-standard-menu-popup-container .ibiz-extend-standard-menu__rawitem{min-height:var(--ibiz-extend-standard-menu-item-height);line-height:var(--ibiz-extend-standard-menu-item-height)}.ibiz-extend-standard-menu-popup-container .ibiz-extend-standard-menu__rawitem .ibiz-rawitem{display:flex;align-items:center;justify-content:flex-start;font-size:var(--ibiz-extend-standard-menu-item-font-size);color:var(--ibiz-extend-standard-menu-item-color)}.ibiz-extend-standard-menu-popup-container .ibiz-extend-standard-menu__rawitem .ibiz-rawitem>.ibiz-icon{display:flex;align-items:center;width:var(--ibiz-extend-standard-menu-icon-width);height:var(--ibiz-extend-standard-menu-icon-height);font-size:var(--ibiz-extend-standard-menu-icon-size)}.ibiz-extend-standard-menu-popup-container .ibiz-extend-standard-menu__rawitem .ibiz-rawitem *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-extend-standard-menu-popup-container.el-menu--popup-container{--ibiz-extend-standard-menu-collapse-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-extend-standard-menu-icon-width:var(--ibiz-width-icon-large);--ibiz-extend-standard-menu-icon-height:var(--ibiz-width-icon-large);--ibiz-extend-standard-menu-icon-margin:0 var(--ibiz-spacing-tight) 0 0;--ibiz-extend-standard-menu-text-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-extend-standard-menu-icon-position:calc(var(--ibiz-spacing-base) - 2px);--ibiz-extend-standard-menu-icon-size:var(--ibiz-width-icon-medium);--ibiz-extend-standard-menu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-extend-standard-menu-scorll-color:var(--ibiz-color-scroll-menu);--ibiz-extend-standard-menu-horizontal-height:50px;--ibiz-extend-standard-menu-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-standard-menu-active-color:var(--ibiz-color-primary-active-text);--ibiz-extend-standard-menu-active-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-standard-menu-color:var(--ibiz-color-text-menu);--ibiz-extend-standard-menu-item-selected-border-color:transparent;--ibiz-extend-standard-menu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-extend-standard-menu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-standard-menu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-standard-menu-item-padding:var(--ibiz-spacing-tight);--ibiz-extend-standard-menu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-extend-standard-menu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-extend-standard-menu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-extend-standard-menu-item-height:42px;--ibiz-extend-standard-menu-item-gap:2px;--ibiz-extend-standard-menu-item-color:var(--ibiz-color-text-menu);--ibiz-extend-standard-menu-item-separator-color:var(--ibiz-color-scroll-menu);--ibiz-extend-standard-menu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-extend-standard-menu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-standard-menu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-standard-menu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-extend-standard-menu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-extend-standard-menu-item-horizontal-height:100%;--ibiz-extend-standard-menu-item-horizontal-border-radius:0;--ibiz-extend-standard-menu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-extend-standard-menu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-extend-standard-menu-item-horizontal-popup-height:40px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-extend-standard-menu-popup-container.el-menu--popup-container .el-menu--popup{max-height:100vh;padding:var(--ibiz-spacing-extra-tight);overflow:auto;background-color:var(--ibiz-color-primary)}.ibiz-extend-standard-menu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item,.ibiz-extend-standard-menu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;width:100%;height:var(--ibiz-extend-standard-menu-item-horizontal-popup-height);font-size:var(--ibiz-extend-standard-menu-item-font-size);color:var(--ibiz-extend-standard-menu-item-horizontal-color);white-space:nowrap;border-radius:var(--ibiz-extend-standard-menu-item-horizontal-border-radius)}.ibiz-extend-standard-menu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item.is-active,.ibiz-extend-standard-menu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title.is-active{color:var(--ibiz-extend-standard-menu-item-horizontal-selected-color);background-color:var(--ibiz-extend-standard-menu-item-horizontal-selected-bg-color)}.ibiz-extend-standard-menu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item:hover,.ibiz-extend-standard-menu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title:hover{color:var(--ibiz-extend-standard-menu-item-hover-color);background-color:var(--ibiz-extend-standard-menu-item-hover-bg-color)}.ibiz-extend-standard-menu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item .el-icon,.ibiz-extend-standard-menu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title .el-icon{display:none}.ibiz-extend-standard-menu-popup-container .ibiz-extend-standard-menu__counter{position:absolute;top:50%;right:5px;height:20px;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-tight);line-height:initial;color:var(--ibiz-color-danger-text);background-color:var(--ibiz-color-danger);border-radius:var(--ibiz-border-radius-medium);transform:translateY(-50%)}.ibiz-extend-standard-menu__separator--horizontal{margin:var(--ibiz-spacing-tight) 0;border-color:var(--ibiz-extend-standard-menu-item-separator-color)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu){--el-menu-hover-text-color:var(--ibiz-extend-standard-menu-item-color);--el-menu-hover-bg-color:transparent;--ibiz-extend-standard-menu-item-selected-border-color:transparent;--ibiz-extend-standard-menu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-extend-standard-menu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-standard-menu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-standard-menu-item-padding:var(--ibiz-spacing-tight);--ibiz-extend-standard-menu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-extend-standard-menu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-extend-standard-menu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-extend-standard-menu-item-height:42px;--ibiz-extend-standard-menu-item-gap:2px;--ibiz-extend-standard-menu-item-color:var(--ibiz-color-text-menu);--ibiz-extend-standard-menu-item-separator-color:var(--ibiz-color-scroll-menu);--ibiz-extend-standard-menu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-extend-standard-menu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-standard-menu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-standard-menu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-extend-standard-menu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-extend-standard-menu-item-horizontal-height:100%;--ibiz-extend-standard-menu-item-horizontal-border-radius:0;--ibiz-extend-standard-menu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-extend-standard-menu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-extend-standard-menu-item-horizontal-popup-height:40px;--ibiz-extend-standard-menu-collapse-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-extend-standard-menu-icon-width:var(--ibiz-width-icon-large);--ibiz-extend-standard-menu-icon-height:var(--ibiz-width-icon-large);--ibiz-extend-standard-menu-icon-margin:0 var(--ibiz-spacing-tight) 0 0;--ibiz-extend-standard-menu-text-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-extend-standard-menu-icon-position:calc(var(--ibiz-spacing-base) - 2px);--ibiz-extend-standard-menu-icon-size:var(--ibiz-width-icon-medium);--ibiz-extend-standard-menu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-extend-standard-menu-scorll-color:var(--ibiz-color-scroll-menu);--ibiz-extend-standard-menu-horizontal-height:50px;--ibiz-extend-standard-menu-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-standard-menu-active-color:var(--ibiz-color-primary-active-text);--ibiz-extend-standard-menu-active-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-standard-menu-color:var(--ibiz-color-text-menu);--ibiz-extend-standard-menu-item-selected-border-color:transparent;--ibiz-extend-standard-menu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-extend-standard-menu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-standard-menu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-standard-menu-item-padding:var(--ibiz-spacing-tight);--ibiz-extend-standard-menu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-extend-standard-menu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-extend-standard-menu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-extend-standard-menu-item-height:42px;--ibiz-extend-standard-menu-item-gap:2px;--ibiz-extend-standard-menu-item-color:var(--ibiz-color-text-menu);--ibiz-extend-standard-menu-item-separator-color:var(--ibiz-color-scroll-menu);--ibiz-extend-standard-menu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-extend-standard-menu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-standard-menu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-standard-menu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-standard-menu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-extend-standard-menu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-extend-standard-menu-item-horizontal-height:100%;--ibiz-extend-standard-menu-item-horizontal-border-radius:0;--ibiz-extend-standard-menu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-extend-standard-menu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-extend-standard-menu-item-horizontal-popup-height:40px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu) .ibiz-extend-standard-menu__rawitem{min-height:var(--ibiz-extend-standard-menu-item-height);line-height:var(--ibiz-extend-standard-menu-item-height)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu) .ibiz-extend-standard-menu__rawitem .ibiz-rawitem{display:flex;align-items:center;justify-content:flex-start;font-size:var(--ibiz-extend-standard-menu-item-font-size);color:var(--ibiz-extend-standard-menu-item-color)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu) .ibiz-extend-standard-menu__rawitem .ibiz-rawitem>.ibiz-icon{display:flex;align-items:center;width:var(--ibiz-extend-standard-menu-icon-width);height:var(--ibiz-extend-standard-menu-icon-height);font-size:var(--ibiz-extend-standard-menu-icon-size)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu) .ibiz-extend-standard-menu__rawitem .ibiz-rawitem *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu) .el-menu--popup{padding:var(--ibiz-spacing-extra-tight);background-color:var(--ibiz-color-primary)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu) .el-menu--popup .el-menu-item,.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu) .el-menu--popup .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;width:100%;height:var(--ibiz-extend-standard-menu-item-horizontal-popup-height);font-size:var(--ibiz-extend-standard-menu-item-font-size);color:var(--ibiz-extend-standard-menu-item-horizontal-color);white-space:nowrap;border-radius:var(--ibiz-extend-standard-menu-item-horizontal-border-radius)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu) .el-menu--popup .el-menu-item.is-active,.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu) .el-menu--popup .el-sub-menu__title.is-active{color:var(--ibiz-extend-standard-menu-item-horizontal-selected-color);background-color:var(--ibiz-extend-standard-menu-item-horizontal-selected-bg-color)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu) .el-menu--popup .el-menu-item:hover,.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu) .el-menu--popup .el-sub-menu__title:hover{color:var(--ibiz-extend-standard-menu-item-hover-color);background-color:var(--ibiz-extend-standard-menu-item-hover-bg-color)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu) .el-menu--popup .el-menu-item .el-icon,.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu) .el-menu--popup .el-sub-menu__title .el-icon{display:none}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu) .el-menu .el-sub-menu.is-active>.el-sub-menu__title{color:var(--ibiz-extend-standard-menu-item-horizontal-selected-color)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-extend-standard-menu__item,.ibiz-extend-standard-menu-submenu) .ibiz-extend-standard-menu__separator--vertical{width:100%;height:1px;margin:var(--ibiz-spacing-tight) 0;border-top:1px var(--ibiz-extend-standard-menu-item-separator-color) solid}