hongluan-ui/theme/hl-menu.css

Hongluan Component Library for Vue 3

@charset "UTF-8";:root{--main-color:#36A4FF;--rgb-main-color:54,164,255;--shadow-color:62,78,106;--primary:#36A4FF;--primary-bg:#36A4FF;--primary-hover:#5eb6ff;--primary-active:#1d99ff;--primary-light:#ebf6ff;--success:#4CC09E;--success-bg:#4CC09E;--success-hover:#70cdb1;--success-active:#40b694;--success-light:#edf9f5;--danger:#FF4D4F;--danger-bg:#FF4D4F;--danger-hover:#ff7172;--danger-active:#ff3235;--danger-light:#ffeded;--warning:#FA8B16;--warning-bg:#FA8B16;--warning-hover:#fba245;--warning-active:#f58005;--warning-light:#fff3e8;--info:#4a72e5;--info-bg:#4a72e5;--info-hover:#6e8eea;--info-active:#3561e2;--info-light:#edf1fc;--rgb-primary:54,164,255;--rgb-success:76,192,158;--rgb-danger:255,77,79;--rgb-warning:250,139,22;--rgb-info:74,114,229;--rgb-bg-body:255,255,255;--rgb-bg-content:255,255,255;--rgb-bg-light:246,249,251;--rgb-bg-popup:255,255,255;--rgb-bg-element:255,255,255;--rgb-bg-hover:249,250,254;--rgb-bg-active:54,164,255;--rgb-bg-header:249,250,254;--rgb-bg-backdrop:0,0,0;--text-regular:#4B4B4B;--text-secondary:#8A8A8A;--text-light:#BDBDBD;--text-lightest:#CACFD6;--text-title:#202020;--text-link:var(--main-color);--text-hover:var(--main-color);--text-active:var(--main-color);--text-inverse:#FFFFFF;--bg-body:#ffffff;--bg-content:#FFFFFF;--bg-light:#F6F9FB;--bg-popup:#FFFFFF;--bg-element:#FFFFFF;--bg-hover:#F9FAFE;--bg-active:#36A4FF;--bg-header:#F9FAFE;--bg-backdrop:rgba(0, 0, 0, 0.3);--border-regular:#EDEDED;--border-light:#E7E7E7;--border-dark:#E7E7E7;--box-shadow-sm:0 2px 4px 0 rgba(var(--shadow-color, 62, 78, 106), 0.06);--box-shadow-md:0 4px 16px 0 rgba(var(--shadow-color, 62, 78, 106), 0.08);--box-shadow-lg:0 6px 24px rgba(var(--shadow-color, 62, 78, 106), 0.1);--box-shadow-xl:0 12px 40px 0 rgba(var(--shadow-color, 62, 78, 106), 0.24);--primary-light-5:#ebf9ff;--primary-light-4:#c7edff;--primary-light-3:#a3deff;--primary-light-2:#7ecdff;--primary-light-1:#5abaff;--primary-dark-1:#0b88ff;--primary-dark-2:#006bde;--primary-dark-3:#0050b3;--primary-dark-4:#003888;--primary-dark-5:#00235d;--success-light-5:#ecfaf3;--success-light-4:#c9f1e0;--success-light-3:#a8e6ce;--success-light-2:#88dbbd;--success-light-1:#6acead;--success-dark-1:#33b392;--success-dark-2:#269b81;--success-dark-3:#168570;--success-dark-4:#0b6b5c;--success-dark-5:#034d44;--danger-light-5:#ffedf0;--danger-light-4:#ffcdd4;--danger-light-3:#ffadb6;--danger-light-2:#ff8d96;--danger-light-1:#ff6d74;--danger-dark-1:#ff231f;--danger-dark-2:#ef0d00;--danger-dark-3:#c11100;--danger-dark-4:#921200;--danger-dark-5:#640f00;--warning-light-5:#fff0e8;--warning-light-4:#fed6bd;--warning-light-3:#fdbf93;--warning-light-2:#fcab6a;--warning-light-1:#fb9a40;--warning-dark-1:#e67f04;--warning-dark-2:#c17103;--warning-dark-3:#9c6002;--warning-dark-4:#774d01;--warning-dark-5:#513700;--info-light-5:#ecf3fd;--info-light-4:#cbddf9;--info-light-3:#aac5f5;--info-light-2:#89abf0;--info-light-1:#6a8feb;--info-dark-1:#204ce4;--info-dark-2:#1536c6;--info-dark-3:#0c24a4;--info-dark-4:#06157f;--info-dark-5:#020a59;--form-bg-color:var(--bg-element);--form-bg-color-fill:#f5f8fa;--form-border-color:var(--border-dark);--form-disabled-border-color:var(--border-light);--form-disabled-bg-color:var(--bg-light);--form-disabled-font-color:var(--text-light);--form-icon-color:var(--text-regular);--form-shadow-color:var(--rgb-primary);--hl-button-font-color:var(--text-regular);--hl-button-font-color-hover:var(--primary);--hl-button-font-color-active:var(--primary);--hl-button-bg-color:var(--bg-element);--hl-button-bg-color-hover:var(--bg-element);--hl-button-bg-color-active:var(--bg-element);--hl-button-border-color:var(--form-border-color);--hl-button-border-color-hover:#c3e4ff;--hl-button-border-color-active:var(--primary);--hl-menu-icon-color:#5281E9;--hl-menu-icon-color-hover:currentColor;--hl-menu-icon-color-active:#ffffff;--hl-menu-font-color:var(--text-regular);--hl-menu-font-color-hover:var(--text-secondary);--hl-menu-font-color-active:#ffffff;--hl-menu-bg-color:#ffffff;--hl-menu-bg-hover:#F8FAFF;--hl-menu-bg-active:#9EAECD;--hl-menu-group-title-color:rgba(#000, 0.2);--hl-menu-child-bg-color:#ffffff;--hl-menu-dropdown-shadow:var(--box-shadow-md)}.hl-menu{--menu-height:80px;--menu-width-collapse:80px;--menu-font-size:var(--font-md);--menu-icon-size:18px;--menu-icon-color:var(--hl-menu-icon-color);--menu-icon-color-hover:var(--hl-menu-icon-color-hover);--menu-icon-color-active:var(--hl-menu-icon-color-active);--menu-bg-color:var(--hl-menu-bg-color);--menu-bg-color-hover:var(--hl-menu-bg-hover);--menu-bg-color-active:var(--hl-menu-bg-active);--menu-font-color:var(--hl-menu-font-color);--menu-font-color-hover:var(--hl-menu-font-color-hover);--menu-font-color-active:var(--hl-menu-font-color-active);--menu-group-title-color:var(--hl-menu-group-title-color);--menu-child-bg-color:var(--hl-menu-child-bg-color);--menu-child-font-size:var(--font-md);--menu-item-height:46px;--menu-item-padding-y:var(--sm);--menu-item-padding-x:2em;--menu-subitem-indent:1em;--menu-dropdown-shadow:var(--hl-menu-dropdown-shadow);list-style:none;position:relative;margin:0;padding-left:0;font-size:var(--menu-font-size);background-color:var(--menu-bg-color)}.hl-menu .hl-menu-item{position:relative;list-style:none;margin:0;cursor:pointer;color:var(--menu-font-color);transition:all var(--duration) var(--timing)}.hl-menu .hl-menu-item .hl-menu{font-size:var(--menu-child-font-size)}.hl-menu .hl-menu-item .hl-menu-item .item-content{padding-left:calc(var(--menu-item-padding-x) + var(--menu-subitem-indent) + 1em + var(--menu-icon-size) - var(--menu-font-size))}.hl-menu .hl-menu-item .hl-menu-item .hl-menu-item .item-content{padding-left:calc(var(--menu-item-padding-x) + var(--menu-subitem-indent) + 2em + var(--menu-icon-size) - var(--menu-font-size))}.hl-menu .hl-menu-item .hl-menu-item .hl-menu-item .hl-menu-item .item-content{padding-left:calc(var(--menu-item-padding-x) + var(--menu-subitem-indent) + 3em + var(--menu-icon-size) - var(--menu-font-size))}.hl-menu .hl-menu-item .hl-menu-item .hl-menu-item .hl-menu-item .hl-menu-item .item-content{padding-left:calc(var(--menu-item-padding-x) + var(--menu-subitem-indent) + 4em + var(--menu-icon-size) - var(--menu-font-size))}.hl-menu .hl-menu-item.hl-sub-menu.is-opened{background-color:var(--menu-child-bg-color)}.hl-menu .hl-menu-item.hl-sub-menu.is-opened .menu-inline{background-color:transparent}.hl-menu .hl-menu-item .item-content{display:flex;align-items:center;padding:var(--menu-item-padding-y) var(--menu-item-padding-x);height:var(--menu-item-height);white-space:nowrap;transition:all var(--duration) var(--timing)}.hl-menu .hl-menu-item .item-content:hover{color:var(--menu-font-color-hover);background-color:var(--menu-bg-color-hover)}.hl-menu .hl-menu-item .item-content:hover .item-icon{color:var(--menu-icon-color-hover)}.hl-menu .hl-menu-item .item-content .menu-arrow{position:absolute;right:var(--menu-item-padding-x);width:var(--font-sm);height:var(--font-sm);font-size:var(--font-sm);line-height:1;flex-shrink:0;flex-grow:unset;margin-left:8px;transition:transform var(--duration) var(--timing);color:currentColor}.hl-menu .hl-menu-item a{display:flex;align-items:center;height:100%;width:100%}.hl-menu .hl-menu-item .item-icon{display:block;width:var(--menu-icon-size);height:var(--menu-icon-size);color:var(--menu-icon-color);flex-shrink:0;flex-grow:unset;margin-right:1em;transition:all var(--duration) var(--timing)}.hl-menu .hl-menu-item.is-active:not(.is-opened) .item-content{color:var(--menu-font-color-active);background-color:var(--menu-bg-color-active)}.hl-menu .hl-menu-item.is-active:not(.is-opened) .item-content .item-icon{color:var(--menu-icon-color-active)}.hl-menu .hl-menu-item.is-opened>.item-content .menu-arrow{transform:rotate(90deg)}.hl-menu .hl-menu-item.is-disabled{cursor:not-allowed;color:rgba(var(--hl-menu-font-color),.5)}.hl-menu .hl-menu-item.is-disabled>.item-content:hover{color:inherit;background-color:inherit}.hl-menu .hl-menu-item.hide-menu-arrow .menu-arrow{display:none}.hl-menu .hl-menu-item-group ul{list-style:none;padding:0;margin-bottom:0}.hl-menu .hl-menu-item-group .group-title{color:var(--menu-group-title-color);font-size:var(--font-sm);padding:0 var(--menu-item-padding-x);text-indent:4px;height:40px;display:flex;align-items:center}.hl-menu.horizontal{display:flex;flex-wrap:nowrap;align-items:center}.hl-menu.horizontal .hl-menu-item{display:inline-flex;justify-content:center;align-items:center;height:var(--menu-height);margin:0;color:var(--menu-font-color);white-space:nowrap}.hl-menu.horizontal .hl-menu-item .item-content{height:inherit}.hl-menu.horizontal .hl-menu-item .item-content:hover{background-color:transparent}.hl-menu.horizontal .hl-menu-item .item-content .menu-arrow{position:unset;right:unset;transform:rotate(90deg)}.hl-menu.horizontal .hl-menu-item.is-disabled{color:var(--text-light)}.hl-menu.horizontal .hl-menu-item.is-active:not(.is-opened) .item-content{background-color:transparent}.hl-menu.collapse{width:var(--menu-width-collapse)}.hl-menu.collapse .hl-menu-item{display:flex;align-items:center;justify-content:center}.hl-menu.collapse .hl-menu-item .item-content{display:flex;align-items:center;justify-content:center;width:100%;height:var(--menu-item-height);padding:0}.hl-menu.collapse .hl-menu-item .item-content span{display:none}.hl-menu.collapse .hl-menu-item .item-icon{margin:0;display:block}.hl-menu.collapse .hl-menu-item .menu-arrow{display:none}.hl-menu.collapse .hl-menu-item-group .group-title{position:relative;font-size:0;display:flex;justify-content:center;text-indent:0}.hl-menu.collapse .hl-menu-item-group .group-title::after{content:"‧‧‧";position:relative;font-size:var(--font-h4);font-weight:700}.hl-menu.menu-dropdown{min-width:200px;padding:12px 0;background-color:var(--menu-bg-color);box-shadow:var(--menu-dropdown-shadow)}.hl-menu.menu-dropdown .hl-menu-item:hover{background-color:var(--menu-bg-color-hover)}.hl-menu.menu-dropdown .hl-menu-item .item-content{padding:6px 2em;height:var(--menu-item-height)}.hl-menu.menu-dropdown .hl-menu-item.is-opened>.item-content .menu-arrow{transform:rotate(90deg)}.hl-menu.menu-dropdown .hl-menu-item.is-active:not(.is-opened) .item-content{color:var(--menu-font-color-active)}.hl-menu-popper{--popper-radius:0;--popper-padding-y:0;--popper-padding-x:0;--popper-bg-color:transparent;--popper-border-color:transparent;border:0}.hl-menu-popover{padding:16px;background-color:var(--hl-menu-bg-color);color:var(--hl-menu-font-color);border:none;border-radius:0}:root{--main-color:#36A4FF;--rgb-main-color:54,164,255;--shadow-color:62,78,106;--primary:#36A4FF;--primary-bg:#36A4FF;--primary-hover:#5eb6ff;--primary-active:#1d99ff;--primary-light:#ebf6ff;--success:#4CC09E;--success-bg:#4CC09E;--success-hover:#70cdb1;--success-active:#40b694;--success-light:#edf9f5;--danger:#FF4D4F;--danger-bg:#FF4D4F;--danger-hover:#ff7172;--danger-active:#ff3235;--danger-light:#ffeded;--warning:#FA8B16;--warning-bg:#FA8B16;--warning-hover:#fba245;--warning-active:#f58005;--warning-light:#fff3e8;--info:#4a72e5;--info-bg:#4a72e5;--info-hover:#6e8eea;--info-active:#3561e2;--info-light:#edf1fc;--rgb-primary:54,164,255;--rgb-success:76,192,158;--rgb-danger:255,77,79;--rgb-warning:250,139,22;--rgb-info:74,114,229;--rgb-bg-body:255,255,255;--rgb-bg-content:255,255,255;--rgb-bg-light:246,249,251;--rgb-bg-popup:255,255,255;--rgb-bg-element:255,255,255;--rgb-bg-hover:249,250,254;--rgb-bg-active:54,164,255;--rgb-bg-header:249,250,254;--rgb-bg-backdrop:0,0,0;--text-regular:#4B4B4B;--text-secondary:#8A8A8A;--text-light:#BDBDBD;--text-lightest:#CACFD6;--text-title:#202020;--text-link:var(--main-color);--text-hover:var(--main-color);--text-active:var(--main-color);--text-inverse:#FFFFFF;--bg-body:#ffffff;--bg-content:#FFFFFF;--bg-light:#F6F9FB;--bg-popup:#FFFFFF;--bg-element:#FFFFFF;--bg-hover:#F9FAFE;--bg-active:#36A4FF;--bg-header:#F9FAFE;--bg-backdrop:rgba(0, 0, 0, 0.3);--border-regular:#EDEDED;--border-light:#E7E7E7;--border-dark:#E7E7E7;--box-shadow-sm:0 2px 4px 0 rgba(var(--shadow-color, 62, 78, 106), 0.06);--box-shadow-md:0 4px 16px 0 rgba(var(--shadow-color, 62, 78, 106), 0.08);--box-shadow-lg:0 6px 24px rgba(var(--shadow-color, 62, 78, 106), 0.1);--box-shadow-xl:0 12px 40px 0 rgba(var(--shadow-color, 62, 78, 106), 0.24);--primary-light-5:#ebf9ff;--primary-light-4:#c7edff;--primary-light-3:#a3deff;--primary-light-2:#7ecdff;--primary-light-1:#5abaff;--primary-dark-1:#0b88ff;--primary-dark-2:#006bde;--primary-dark-3:#0050b3;--primary-dark-4:#003888;--primary-dark-5:#00235d;--success-light-5:#ecfaf3;--success-light-4:#c9f1e0;--success-light-3:#a8e6ce;--success-light-2:#88dbbd;--success-light-1:#6acead;--success-dark-1:#33b392;--success-dark-2:#269b81;--success-dark-3:#168570;--success-dark-4:#0b6b5c;--success-dark-5:#034d44;--danger-light-5:#ffedf0;--danger-light-4:#ffcdd4;--danger-light-3:#ffadb6;--danger-light-2:#ff8d96;--danger-light-1:#ff6d74;--danger-dark-1:#ff231f;--danger-dark-2:#ef0d00;--danger-dark-3:#c11100;--danger-dark-4:#921200;--danger-dark-5:#640f00;--warning-light-5:#fff0e8;--warning-light-4:#fed6bd;--warning-light-3:#fdbf93;--warning-light-2:#fcab6a;--warning-light-1:#fb9a40;--warning-dark-1:#e67f04;--warning-dark-2:#c17103;--warning-dark-3:#9c6002;--warning-dark-4:#774d01;--warning-dark-5:#513700;--info-light-5:#ecf3fd;--info-light-4:#cbddf9;--info-light-3:#aac5f5;--info-light-2:#89abf0;--info-light-1:#6a8feb;--info-dark-1:#204ce4;--info-dark-2:#1536c6;--info-dark-3:#0c24a4;--info-dark-4:#06157f;--info-dark-5:#020a59;--form-bg-color:var(--bg-element);--form-bg-color-fill:#f5f8fa;--form-border-color:var(--border-dark);--form-disabled-border-color:var(--border-light);--form-disabled-bg-color:var(--bg-light);--form-disabled-font-color:var(--text-light);--form-icon-color:var(--text-regular);--form-shadow-color:var(--rgb-primary);--hl-button-font-color:var(--text-regular);--hl-button-font-color-hover:var(--primary);--hl-button-font-color-active:var(--primary);--hl-button-bg-color:var(--bg-element);--hl-button-bg-color-hover:var(--bg-element);--hl-button-bg-color-active:var(--bg-element);--hl-button-border-color:var(--form-border-color);--hl-button-border-color-hover:#c3e4ff;--hl-button-border-color-active:var(--primary);--hl-menu-icon-color:#5281E9;--hl-menu-icon-color-hover:currentColor;--hl-menu-icon-color-active:#ffffff;--hl-menu-font-color:var(--text-regular);--hl-menu-font-color-hover:var(--text-secondary);--hl-menu-font-color-active:#ffffff;--hl-menu-bg-color:#ffffff;--hl-menu-bg-hover:#F8FAFF;--hl-menu-bg-active:#9EAECD;--hl-menu-group-title-color:rgba(#000, 0.2);--hl-menu-child-bg-color:#ffffff;--hl-menu-dropdown-shadow:var(--box-shadow-md)}.hl-popover{--popover-radius:var(--form-radius);--popover-padding-y:var(--md);--popover-padding-x:var(--md);--popover-font-color:var(--text-regular);--popover-bg-color:var(--bg-popup);--popover-bg-color-dark:#212435;--popover-tooltip-padding-y:var(--xxs);--popover-tooltip-padding-x:var(--sm);--popover-tooltip-font-size:var(--font-sm);--popover-shadow:var(--box-shadow-lg);position:absolute;width:auto;padding:var(--popover-padding-y) var(--popover-padding-x);background-color:var(--popover-bg-color);box-shadow:var(--popover-shadow);border-radius:var(--popover-radius);color:var(--popover-font-color);border:none;word-break:break-all}.hl-popover .popper-arrow::before{border:none}.hl-popover.no-style{padding:unset;background-color:unset;box-shadow:unset;border-radius:unset;border:unset}.hl-popover.tooltip{font-size:var(--popover-tooltip-font-size);padding:var(--popover-tooltip-padding-y) var(--popover-tooltip-padding-x)}.hl-popover.dark{background-color:var(--popover-bg-color-dark);color:var(--text-inverse);border:none}.hl-popover.dark .popper-arrow::before{border-color:var(--popover-bg-color-dark);background-color:var(--popover-bg-color-dark)}.hl-popover .popover-title{color:currentColor;margin-bottom:4px}.hl-popover p{margin-bottom:0}:root{--main-color:#36A4FF;--rgb-main-color:54,164,255;--shadow-color:62,78,106;--primary:#36A4FF;--primary-bg:#36A4FF;--primary-hover:#5eb6ff;--primary-active:#1d99ff;--primary-light:#ebf6ff;--success:#4CC09E;--success-bg:#4CC09E;--success-hover:#70cdb1;--success-active:#40b694;--success-light:#edf9f5;--danger:#FF4D4F;--danger-bg:#FF4D4F;--danger-hover:#ff7172;--danger-active:#ff3235;--danger-light:#ffeded;--warning:#FA8B16;--warning-bg:#FA8B16;--warning-hover:#fba245;--warning-active:#f58005;--warning-light:#fff3e8;--info:#4a72e5;--info-bg:#4a72e5;--info-hover:#6e8eea;--info-active:#3561e2;--info-light:#edf1fc;--rgb-primary:54,164,255;--rgb-success:76,192,158;--rgb-danger:255,77,79;--rgb-warning:250,139,22;--rgb-info:74,114,229;--rgb-bg-body:255,255,255;--rgb-bg-content:255,255,255;--rgb-bg-light:246,249,251;--rgb-bg-popup:255,255,255;--rgb-bg-element:255,255,255;--rgb-bg-hover:249,250,254;--rgb-bg-active:54,164,255;--rgb-bg-header:249,250,254;--rgb-bg-backdrop:0,0,0;--text-regular:#4B4B4B;--text-secondary:#8A8A8A;--text-light:#BDBDBD;--text-lightest:#CACFD6;--text-title:#202020;--text-link:var(--main-color);--text-hover:var(--main-color);--text-active:var(--main-color);--text-inverse:#FFFFFF;--bg-body:#ffffff;--bg-content:#FFFFFF;--bg-light:#F6F9FB;--bg-popup:#FFFFFF;--bg-element:#FFFFFF;--bg-hover:#F9FAFE;--bg-active:#36A4FF;--bg-header:#F9FAFE;--bg-backdrop:rgba(0, 0, 0, 0.3);--border-regular:#EDEDED;--border-light:#E7E7E7;--border-dark:#E7E7E7;--box-shadow-sm:0 2px 4px 0 rgba(var(--shadow-color, 62, 78, 106), 0.06);--box-shadow-md:0 4px 16px 0 rgba(var(--shadow-color, 62, 78, 106), 0.08);--box-shadow-lg:0 6px 24px rgba(var(--shadow-color, 62, 78, 106), 0.1);--box-shadow-xl:0 12px 40px 0 rgba(var(--shadow-color, 62, 78, 106), 0.24);--primary-light-5:#ebf9ff;--primary-light-4:#c7edff;--primary-light-3:#a3deff;--primary-light-2:#7ecdff;--primary-light-1:#5abaff;--primary-dark-1:#0b88ff;--primary-dark-2:#006bde;--primary-dark-3:#0050b3;--primary-dark-4:#003888;--primary-dark-5:#00235d;--success-light-5:#ecfaf3;--success-light-4:#c9f1e0;--success-light-3:#a8e6ce;--success-light-2:#88dbbd;--success-light-1:#6acead;--success-dark-1:#33b392;--success-dark-2:#269b81;--success-dark-3:#168570;--success-dark-4:#0b6b5c;--success-dark-5:#034d44;--danger-light-5:#ffedf0;--danger-light-4:#ffcdd4;--danger-light-3:#ffadb6;--danger-light-2:#ff8d96;--danger-light-1:#ff6d74;--danger-dark-1:#ff231f;--danger-dark-2:#ef0d00;--danger-dark-3:#c11100;--danger-dark-4:#921200;--danger-dark-5:#640f00;--warning-light-5:#fff0e8;--warning-light-4:#fed6bd;--warning-light-3:#fdbf93;--warning-light-2:#fcab6a;--warning-light-1:#fb9a40;--warning-dark-1:#e67f04;--warning-dark-2:#c17103;--warning-dark-3:#9c6002;--warning-dark-4:#774d01;--warning-dark-5:#513700;--info-light-5:#ecf3fd;--info-light-4:#cbddf9;--info-light-3:#aac5f5;--info-light-2:#89abf0;--info-light-1:#6a8feb;--info-dark-1:#204ce4;--info-dark-2:#1536c6;--info-dark-3:#0c24a4;--info-dark-4:#06157f;--info-dark-5:#020a59;--form-bg-color:var(--bg-element);--form-bg-color-fill:#f5f8fa;--form-border-color:var(--border-dark);--form-disabled-border-color:var(--border-light);--form-disabled-bg-color:var(--bg-light);--form-disabled-font-color:var(--text-light);--form-icon-color:var(--text-regular);--form-shadow-color:var(--rgb-primary);--hl-button-font-color:var(--text-regular);--hl-button-font-color-hover:var(--primary);--hl-button-font-color-active:var(--primary);--hl-button-bg-color:var(--bg-element);--hl-button-bg-color-hover:var(--bg-element);--hl-button-bg-color-active:var(--bg-element);--hl-button-border-color:var(--form-border-color);--hl-button-border-color-hover:#c3e4ff;--hl-button-border-color-active:var(--primary);--hl-menu-icon-color:#5281E9;--hl-menu-icon-color-hover:currentColor;--hl-menu-icon-color-active:#ffffff;--hl-menu-font-color:var(--text-regular);--hl-menu-font-color-hover:var(--text-secondary);--hl-menu-font-color-active:#ffffff;--hl-menu-bg-color:#ffffff;--hl-menu-bg-hover:#F8FAFF;--hl-menu-bg-active:#9EAECD;--hl-menu-group-title-color:rgba(#000, 0.2);--hl-menu-child-bg-color:#ffffff;--hl-menu-dropdown-shadow:var(--box-shadow-md)}.hl-icon{--icon-radius:var(--radius-lg);--icon-size:16px;--icon-bg-color:var(--bg-hover);display:inline-flex;position:relative;align-items:center;justify-content:center;vertical-align:middle;font-style:normal;width:var(--icon-size);height:var(--icon-size);flex-shrink:0;flex-grow:0;color:var(--icon-color)}.hl-icon.disabled{color:var(--form-disabled-font-color)}.hl-icon .icon-system{--stroke-width:2;--fill-opacity:0}.hl-icon .icon-system g{fill-opacity:var(--fill-opacity);stroke-width:var(--stroke-width);stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd;fill:currentColor}.hl-icon svg{width:100%;height:100%;display:block;color:currentColor}.hl-icon.fill{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--icon-size) * 2);height:calc(var(--icon-size) * 2);background-color:var(--icon-bg-color)}.hl-icon.fill.radius{border-radius:var(--icon-radius)}.hl-icon.fill.round{border-radius:var(--radius-round)}.hl-icon.fill svg{width:60%;height:60%}.hl-icon.transition:hover path{stroke-dasharray:100;stroke-dashoffset:100;-webkit-animation:dash 2s ease-out forwards;animation:dash 2s ease-out forwards}@-webkit-keyframes dash{to{stroke-dashoffset:0}}@keyframes dash{to{stroke-dashoffset:0}}.hl-icon.primary{--icon-color:var(--primary-bg);--icon-start-color:#FFFFFF}.hl-icon.primary.fill{--icon-color:var(--text-inverse);--icon-bg-color:var(--primary-bg)}.hl-icon.primary.fill.light{--icon-color:var(--primary-bg);--icon-bg-color:var(--primary-light)}.hl-icon.info{--icon-color:var(--info-bg);--icon-start-color:#FFFFFF}.hl-icon.info.fill{--icon-color:var(--text-inverse);--icon-bg-color:var(--info-bg)}.hl-icon.info.fill.light{--icon-color:var(--info-bg);--icon-bg-color:var(--info-light)}.hl-icon.success{--icon-color:var(--success-bg);--icon-start-color:#FFFFFF}.hl-icon.success.fill{--icon-color:var(--text-inverse);--icon-bg-color:var(--success-bg)}.hl-icon.success.fill.light{--icon-color:var(--success-bg);--icon-bg-color:var(--success-light)}.hl-icon.warning{--icon-color:var(--warning-bg);--icon-start-color:#FFFFFF}.hl-icon.warning.fill{--icon-color:var(--text-inverse);--icon-bg-color:var(--warning-bg)}.hl-icon.warning.fill.light{--icon-color:var(--warning-bg);--icon-bg-color:var(--warning-light)}.hl-icon.danger{--icon-color:var(--danger-bg);--icon-start-color:#FFFFFF}.hl-icon.danger.fill{--icon-color:var(--text-inverse);--icon-bg-color:var(--danger-bg)}.hl-icon.danger.fill.light{--icon-color:var(--danger-bg);--icon-bg-color:var(--danger-light)}.hl-icon.xxxs{--icon-size:12px;--icon-radius:var(--radius-sm)}.hl-icon.xxs{--icon-size:14px;--icon-radius:var(--radius-sm)}.hl-icon.xs{--icon-size:16px;--icon-radius:var(--radius-sm)}.hl-icon.sm{--icon-size:18px;--icon-radius:var(--radius-md)}.hl-icon.md{--icon-size:20px;--icon-radius:var(--radius-md)}.hl-icon.lg{--icon-size:24px;--icon-radius:var(--radius-lg)}.hl-icon.xl{--icon-size:28px;--icon-radius:var(--radius-lg)}.hl-icon.xxl{--icon-size:32px;--icon-radius:var(--radius-xl)}.hl-icon.xxxl{--icon-size:36px;--icon-radius:var(--radius-xl)}