tdesign-react 0.45.6-alpha.1 → 0.45.6-alpha.2

package/es/menu/style/index.css

@@ -1 +1,727 @@
-a.t-menu__item{text-decoration:none;color:unset}a.t-menu__item:active,a.t-menu__item:hover{color:inherit}.t-head-menu{font:var(--td-font-body-medium);color:var(--td-text-color-primary);-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;position:relative;width:100%;background-color:var(--td-bg-color-container)}.t-head-menu__inner{display:-webkit-box;display:-ms-flexbox;display:flex;height:var(--td-comp-size-xxxl)}.t-head-menu__inner li+li{margin-left:var(--td-comp-margin-s)}.t-head-menu__inner .t-menu:first-child{margin-left:var(--td-comp-margin-xxl)}.t-head-menu .t-menu__logo:not(:empty){height:100%;margin-right:var(--td-comp-margin-xxxl)}.t-head-menu .t-menu{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.t-head-menu .t-menu__operations:not(:empty){position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:var(--td-comp-size-xxxl);line-height:64px;text-align:right;margin-right:var(--td-comp-margin-s);overflow:hidden}.t-head-menu .t-menu__operations-icon{width:var(--td-comp-size-m);height:var(--td-comp-size-m);padding:var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);line-height:var(--td-comp-size-m);-webkit-box-sizing:border-box;box-sizing:border-box}.t-head-menu .t-submenu>.t-menu__item{overflow:unset}.t-head-menu .t-submenu>.t-menu__item:before{content:"";display:block;position:absolute;bottom:-20px;left:0;right:0;height:20px}.t-head-menu .t-menu__item{height:var(--td-comp-size-m);line-height:var(--td-comp-size-m);padding:0 var(--td-comp-paddingLR-l);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:all .28s cubic-bezier(.645,.045,.355,1);transition:all .28s cubic-bezier(.645,.045,.355,1)}.t-head-menu__submenu{border-top:1px solid var(--td-component-stroke);padding-left:0}.t-head-menu .t-menu__popup{top:calc(var(--td-comp-size-m) + 12px);left:0;min-width:100%;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transform-origin:center top;transform-origin:center top;border:.5px solid var(--td-component-stroke)}.t-head-menu .t-menu__popup .t-menu__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;white-space:nowrap;padding-left:var(--td-comp-paddingLR-s);padding-right:var(--td-comp-paddingLR-s);min-width:100%;margin-left:0;color:var(--td-text-color-primary);-webkit-box-sizing:border-box;box-sizing:border-box}.t-head-menu .t-menu__popup .t-menu__item.t-is-active,.t-head-menu .t-menu__popup .t-menu__item.t-is-active .t-icon{color:var(--td-brand-color)}.t-head-menu .t-menu__popup li+li{margin-top:var(--td-comp-margin-xxs);margin-left:0}.t-head-menu .t-fake-arrow{margin-left:var(--td-comp-margin-m)}.t-head-menu .t-menu__popup-inner .t-menu__popup{top:-8px;left:calc(100% + 16px);-webkit-transform-origin:left top;transform-origin:left top}.t-head-menu .t-menu__popup-inner .t-menu__item{text-align:left;padding:0 16px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.t-head-menu .t-menu__popup-inner .t-submenu-icon{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.t-default-menu{font:var(--td-font-body-medium);color:var(--td-text-color-primary);-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;position:relative;width:232px;display:inline-block;background:var(--td-bg-color-container);-webkit-transition:width .28s cubic-bezier(.645,.045,.355,1);transition:width .28s cubic-bezier(.645,.045,.355,1);white-space:nowrap}.t-default-menu .t-menu__item{color:var(--td-text-color-secondary)}.t-default-menu.t-is-collapsed{width:64px}.t-default-menu.t-is-collapsed .t-menu .t-menu__item{padding:0 14px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.t-default-menu.t-is-collapsed .t-fake-arrow{display:none}.t-default-menu.t-is-collapsed .t-menu__item{text-overflow:clip}.t-default-menu.t-is-collapsed .t-menu__item.t-is-active.t-is-opened{color:var(--td-brand-color);background-color:var(--td-brand-color-light)}.t-default-menu.t-is-collapsed .t-menu__item.t-is-active.t-is-opened .t-icon{color:var(--td-brand-color)}.t-default-menu.t-is-collapsed .t-menu__item.t-menu__item--plain:after{content:""}.t-default-menu.t-is-collapsed .t-menu__item span{display:none}.t-default-menu.t-is-collapsed .t-menu__item .t-icon{margin-right:0}.t-default-menu.t-is-collapsed .t-menu__popup .t-menu__item{padding-left:var(--td-comp-paddingLR-s);padding-right:var(--td-comp-paddingLR-s);-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.t-default-menu.t-is-collapsed .t-menu__popup .t-menu__item span{display:inline}.t-default-menu.t-is-collapsed .t-menu__popup .t-menu__item.t-menu__item--plain:after{content:""}.t-default-menu.t-is-collapsed .t-menu__popup .t-fake-arrow{display:block}.t-default-menu.t-is-collapsed .t-submenu-icon{display:none}.t-default-menu.t-is-collapsed .t-submenu .t-menu__popup .t-submenu-icon{display:initial}.t-default-menu.t-is-collapsed .t-submenu>.t-menu__item{min-width:0}.t-default-menu.t-is-collapsed .t-submenu>.t-menu__item:after{content:"";display:block;position:absolute;right:-20px;top:0;bottom:0;width:20px}.t-default-menu.t-is-collapsed .t-menu-group__title{padding:0;font-size:0}.t-default-menu.t-is-collapsed .t-menu-group__title:after{content:"";display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);height:1px;width:20px;background:var(--td-component-stroke)}.t-default-menu.t-is-collapsed .t-menu__operations{text-align:center}.t-default-menu.t-is-collapsed .t-menu__operations-icon{display:block}.t-default-menu__inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.t-default-menu__inner .t-menu__logo:not(:empty){-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:var(--td-comp-size-xxxl);border-bottom:1px solid var(--td-component-stroke)}.t-default-menu__inner .t-menu{padding:var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-s);position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1}.t-default-menu__inner .t-menu--scroll{overflow-y:auto}.t-default-menu__inner .t-menu-group__title{position:relative;padding:var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l);color:var(--td-text-color-placeholder);font-size:var(--td-font-body-small);-webkit-box-sizing:border-box;box-sizing:border-box}.t-default-menu .t-submenu{margin-bottom:var(--td-comp-margin-xs);position:relative}.t-default-menu .t-menu__operations:not(:empty){width:100%;position:relative;padding:var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l);top:0;left:0;text-align:left;border-top:1px solid var(--td-component-stroke);-webkit-box-sizing:border-box;box-sizing:border-box}.t-default-menu .t-menu__operations-icon{width:32px;height:32px;padding:var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);cursor:pointer;color:var(--td-text-color-primary);-webkit-box-sizing:border-box;box-sizing:border-box}.t-default-menu .t-menu__item.t-is-opened{margin:var(--td-comp-margin-xs) 0;color:var(--td-text-color-primary);background-color:unset}.t-default-menu .t-menu__item.t-is-opened .t-icon{color:var(--td-text-color-primary)}.t-default-menu .t-menu__sub{padding:0;max-height:0;overflow:hidden;-webkit-transition:max-height .2s cubic-bezier(.38,0,.24,1);transition:max-height .2s cubic-bezier(.38,0,.24,1)}.t-default-menu .t-menu__sub.t-is-opened{max-height:calc(100vh - var(--td-comp-size-xxxl)*2)}.t-default-menu .t-menu__sub .t-menu__item{padding-left:var(--padding-left,32px)}.t-default-menu .t-menu__item{position:relative;margin:var(--td-comp-margin-xs) 0;padding:0 10px 0 16px;height:var(--td-comp-size-l);line-height:var(--td-comp-size-l);border-bottom:0;text-align:left;border-radius:var(--td-radius-default);-webkit-transition:background-color .28s cubic-bezier(.38,0,.24,1),padding .28s cubic-bezier(.38,0,.24,1);transition:background-color .28s cubic-bezier(.38,0,.24,1),padding .28s cubic-bezier(.38,0,.24,1);-webkit-box-sizing:border-box;box-sizing:border-box}.t-default-menu .t-menu__item:first-child{margin-top:0}.t-default-menu .t-menu__item:last-child{margin-bottom:0}.t-default-menu .t-menu__item .t-icon{width:20px;height:20px}.t-default-menu .t-menu__item .t-fake-arrow{margin-left:auto;min-width:16px}.t-default-menu .t-menu__item.t-is-active:not(.t-is-opened){color:var(--td-brand-color);background-color:var(--td-brand-color-light)}.t-default-menu .t-menu__item.t-is-active:not(.t-is-opened) .t-icon{color:var(--td-brand-color)}.t-default-menu .t-menu__item:hover:not(.t-is-active):not(.t-is-disabled){background:var(--td-bg-color-secondarycontainer-hover)}.t-default-menu .t-menu__popup{top:0;left:calc(100% + var(--td-pop-padding-m))}.t-default-menu .t-menu__popup .t-menu__item,.t-default-menu .t-menu__popup .t-submenu{margin:var(--td-comp-margin-xxs) 0 0 0}.t-default-menu .t-menu__popup .t-menu__item:first-child,.t-default-menu .t-menu__popup .t-submenu:first-child{margin-top:0}.t-default-menu.t-menu--dark{background:var(--td-gray-color-13)}.t-default-menu.t-menu--dark .t-menu__item{color:var(--td-font-white-2)}.t-default-menu.t-menu--dark .t-menu__logo:not(:empty){border-bottom-color:var(--td-gray-color-10)}.t-default-menu.t-menu--dark .t-menu__operations:not(:empty){border-top-color:var(--td-gray-color-10)}.t-default-menu.t-menu--dark .t-menu__item:hover:not(.t-is-active):not(.t-is-disabled){background-color:var(--td-gray-color-10)}.t-default-menu.t-menu--dark .t-menu__item.t-is-active:not(.t-is-opened){color:var(--td-text-color-anti);background-color:var(--td-brand-color)}.t-default-menu.t-menu--dark .t-menu__item.t-is-active:not(.t-is-opened) .t-icon{color:var(--td-text-color-anti)}.t-default-menu.t-menu--dark .t-menu__item.t-is-opened.t-is-active{background-color:transparent}.t-default-menu.t-menu--dark .t-menu__popup .t-menu__item.t-is-active{background-color:var(--td-brand-color)}.t-default-menu.t-menu--dark .t-menu__popup{background:var(--td-gray-color-13)}.t-default-menu.t-menu--dark .t-menu-group__title{color:var(--td-font-white-3)}.t-default-menu.t-menu--dark.t-is-collapsed .t-menu-group__title:after{background-color:var(--td-gray-color-10)}.t-default-menu.t-menu--dark.t-is-collapsed .t-menu__item.t-is-active.t-is-opened{background-color:var(--td-brand-color);color:var(--td-text-color-anti)}.t-default-menu.t-menu--dark.t-is-collapsed .t-menu__item.t-is-active.t-is-opened .t-icon{color:var(--td-text-color-anti)}.t-menu{color:var(--td-text-color-primary);font:var(--td-font-body-medium);list-style:none;padding:0;margin:0}.t-menu--dark{color:var(--td-font-white-2)}.t-menu__logo:not(:empty){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.t-menu .t-submenu{position:relative}.t-menu .t-submenu.t-is-active>.t-menu__item,.t-menu .t-submenu.t-is-active>.t-menu__item .t-icon{color:var(--td-gray-color-13)}.t-menu .t-submenu .t-submenu-icon{width:16px;height:16px}.t-menu .t-submenu.t-is-opened .t-submenu-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.t-menu::-webkit-scrollbar{display:none}.t-menu__spacer:before{content:"";display:block;position:absolute;z-index:1}.t-menu__spacer--left:before{left:-16px;width:16px;top:0;bottom:0}.t-menu__spacer--top:before{top:-20px;left:0;right:0;height:20px}.t-menu__item{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:40px;line-height:40px;text-align:center;color:var(--td-text-color-primary);cursor:pointer;text-overflow:ellipsis;border-radius:var(--td-radius-default);--ripple-color:var(--td-bg-color-container-active)}.t-menu__item ::-moz-selection{background:transparent}.t-menu__item ::selection{background:transparent}.t-menu__item-spacer{overflow:unset}.t-menu__item-spacer:before{content:"";display:block;position:absolute;z-index:1}.t-menu__item-spacer--right:before{right:-16px;width:16px;top:0;bottom:0}.t-menu__item-spacer--bottom:before{bottom:-20px;left:0;right:0;height:20px}.t-menu__item a{color:unset;text-decoration:none}.t-menu__item a.t-menu__item-link{color:unset}.t-menu__item.t-is-active{background-color:var(--td-brand-color-light)}.t-menu__item.t-is-active,.t-menu__item.t-is-opened{color:var(--td-brand-color)}.t-menu__item:hover:not(.t-is-active):not(.t-is-opened):not(.t-is-disabled){background-color:var(--td-bg-color-container-hover)}.t-menu__item.t-is-disabled{color:var(--td-text-color-disabled);cursor:not-allowed}.t-menu__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.t-icon+.t-menu__content,.t-icon+.t-menu__item-link{margin-left:var(--td-comp-margin-s)}.t-menu--dark.t-head-menu{background-color:var(--td-gray-color-13)}.t-menu--dark.t-head-menu .t-menu__popup{background-color:var(--td-gray-color-13);border:.5px solid var(--td-gray-color-10)}.t-menu--dark .t-menu__item{color:var(--td-text-color-anti);--ripple-color:var(--td-gray-color-11)}.t-menu--dark .t-menu__item.t-is-active{color:var(--td-text-color-anti);background-color:var(--td-brand-color)}.t-menu--dark .t-menu__item.t-is-opened,.t-menu--dark .t-menu__item.t-is-opened .t-icon{color:var(--td-text-color-anti)}.t-menu--dark .t-menu__item.t-is-disabled{color:var(--td-font-white-4)}.t-menu--dark .t-menu__item:hover:not(.t-is-active):not(.t-is-opened):not(.t-is-disabled){background-color:var(--td-gray-color-10)}.t-menu--dark .t-menu__popup{background:var(--td-gray-color-13)}.t-menu--dark .t-menu__popup .t-menu__item{color:var(--td-text-color-anti);border-radius:var(--td-radius-default)}.t-menu--dark .t-menu__popup .t-menu__item.t-is-active{color:var(--td-text-color-anti);background-color:var(--td-brand-color)}.t-menu--dark .t-menu__popup .t-menu__item:hover:not(.t-is-active){background-color:var(--td-gray-color-10)}.t-menu--dark .t-head-menu__submenu{border-top:1px solid transparent}.t-menu--dark .t-menu__operations-icon{color:var(--td-bg-color-container)}.t-menu--dark .t-menu__operations-icon:hover{background-color:var(--td-brand-color)}.t-menu__popup{max-height:0;overflow:hidden;-webkit-transition:max-height .24s cubic-bezier(.38,0,.24,1),width .24s cubic-bezier(.38,0,.24,1),opacity .2s linear;transition:max-height .24s cubic-bezier(.38,0,.24,1),width .24s cubic-bezier(.38,0,.24,1),opacity .2s linear;position:absolute;background:var(--td-bg-color-container);z-index:1000;border-radius:var(--td-radius-medium);opacity:0;list-style:none;padding:0;margin:0}.t-menu__popup .t-menu__popup{-webkit-transition:none;transition:none}.t-menu__popup-wrapper{padding:var(--td-pop-padding-m);height:100%;list-style:none;margin:0}.t-menu__popup .t-fake-arrow{margin-left:var(--td-comp-margin-s)}.t-menu__popup.t-is-vertical{max-height:unset;width:0}.t-menu__popup.t-is-vertical.t-is-opened{width:var(--popup-width,160px)}.t-menu__popup.t-is-horizontal .t-menu__item,.t-menu__popup.t-is-vertical .t-menu__item{padding-left:var(--td-comp-paddingLR-l);padding-right:var(--td-comp-paddingLR-l)}.t-menu__popup.t-is-horizontal .t-menu__item{white-space:nowrap}.t-menu__popup.t-is-horizontal li+li{margin-top:var(--td-comp-margin-xs)}.t-menu__popup.t-is-opened{max-height:calc(100vh - var(--td-comp-size-xxxl)*2);opacity:1;-webkit-box-shadow:0 5px 5px -3px rgba(0,0,0,.1),0 8px 10px 1px rgba(0,0,0,.06),0 3px 14px 6px rgba(0,0,0,.05);box-shadow:0 5px 5px -3px rgba(0,0,0,.1),0 8px 10px 1px rgba(0,0,0,.06),0 3px 14px 6px rgba(0,0,0,.05);overflow:visible}.t-menu__popup.t-is-opened .t-menu__popup{top:calc(0px - var(--td-pop-padding-m));left:100%;overflow-x:hidden;overflow-y:auto}.t-menu__popup.t-is-opened .t-menu__popup:before{content:"";display:block;position:absolute;left:-16px;width:16px;top:0;bottom:0}.t-menu__popup .t-menu__item{color:var(--td-text-color-primary);height:var(--td-comp-size-s);line-height:var(--td-comp-size-s)}.t-menu__popup .t-menu__item+.t-menu__item{margin-left:0}.t-menu__popup .t-menu__item:hover:not(.t-is-active){background-color:var(--td-bg-color-container-hover)}.t-menu__operations-icon{margin-right:var(--td-comp-margin-l);border-radius:var(--td-radius-default);color:var(--td-text-color-primary);-webkit-transition:background-color .24s cubic-bezier(.38,0,.24,1);transition:background-color .24s cubic-bezier(.38,0,.24,1)}.t-menu__operations-icon:hover{background-color:var(--td-brand-color-light)}.t-opacity-transition{-webkit-transition:opacity .28s cubic-bezier(.55,0,.1,1);transition:opacity .28s cubic-bezier(.55,0,.1,1)}.horizontal-collapse-transition .t-submenu__title .t-submenu__icon-arrow{-webkit-transition:.2s;transition:.2s;opacity:0}.t-menu__popup{top:0;left:calc(100% - var(--td-pop-padding-m))}.t-menu__popup .t-menu__item,.t-menu__popup .t-submenu{margin:var(--td-comp-margin-xxs) 0 0 0}.t-menu__popup .t-menu__item:first-child,.t-menu__popup .t-submenu:first-child{margin-top:0}
+a.t-menu__item {
+  text-decoration: none;
+  color: unset;
+}
+a.t-menu__item:hover,
+a.t-menu__item:active {
+  color: inherit;
+}
+.t-head-menu {
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-primary);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  width: 100%;
+  background-color: var(--td-bg-color-container);
+}
+.t-head-menu__inner {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--td-comp-size-xxxl);
+}
+.t-head-menu__inner li + li {
+  margin-left: var(--td-comp-margin-s);
+}
+.t-head-menu__inner .t-menu:first-child {
+  margin-left: var(--td-comp-margin-xxl);
+}
+.t-head-menu .t-menu__logo:not(:empty) {
+  height: 100%;
+  margin-right: var(--td-comp-margin-xxxl);
+}
+.t-head-menu .t-menu {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-head-menu .t-menu__operations:not(:empty) {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: var(--td-comp-size-xxxl);
+  line-height: 64px;
+  text-align: right;
+  margin-right: var(--td-comp-margin-s);
+  overflow: hidden;
+}
+.t-head-menu .t-menu__operations-icon {
+  width: var(--td-comp-size-m);
+  height: var(--td-comp-size-m);
+  padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
+  line-height: var(--td-comp-size-m);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.t-head-menu .t-submenu > .t-menu__item {
+  overflow: unset;
+}
+.t-head-menu .t-submenu > .t-menu__item::before {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: -20px;
+  left: 0;
+  right: 0;
+  height: 20px;
+}
+.t-head-menu .t-menu__item {
+  height: var(--td-comp-size-m);
+  line-height: var(--td-comp-size-m);
+  padding: 0 var(--td-comp-paddingLR-l);
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.t-head-menu__submenu {
+  border-top: 1px solid var(--td-component-stroke);
+  padding-left: 0;
+}
+.t-head-menu .t-menu__popup {
+  top: calc(var(--td-comp-size-m) + 12px);
+  left: 0;
+  min-width: 100%;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  -webkit-transform-origin: center top;
+          transform-origin: center top;
+  border: solid 0.5px var(--td-component-stroke);
+}
+.t-head-menu .t-menu__popup .t-menu__item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  white-space: nowrap;
+  padding-left: var(--td-comp-paddingLR-s);
+  padding-right: var(--td-comp-paddingLR-s);
+  min-width: 100%;
+  margin-left: 0;
+  color: var(--td-text-color-primary);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.t-head-menu .t-menu__popup .t-menu__item.t-is-active {
+  color: var(--td-brand-color);
+}
+.t-head-menu .t-menu__popup .t-menu__item.t-is-active .t-icon {
+  color: var(--td-brand-color);
+}
+.t-head-menu .t-menu__popup li + li {
+  margin-top: var(--td-comp-margin-xxs);
+  margin-left: 0;
+}
+.t-head-menu .t-fake-arrow {
+  margin-left: var(--td-comp-margin-m);
+}
+.t-head-menu .t-menu__popup-inner .t-menu__popup {
+  top: -8px;
+  left: calc(100% + 16px);
+  -webkit-transform-origin: left top;
+          transform-origin: left top;
+}
+.t-head-menu .t-menu__popup-inner .t-menu__item {
+  text-align: left;
+  padding: 0 16px;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.t-head-menu .t-menu__popup-inner .t-submenu-icon {
+  -webkit-transform: rotate(270deg);
+          transform: rotate(270deg);
+}
+.t-default-menu {
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-primary);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  width: 232px;
+  display: inline-block;
+  background: var(--td-bg-color-container);
+  -webkit-transition: width 0.28s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: width 0.28s cubic-bezier(0.645, 0.045, 0.355, 1);
+  white-space: nowrap;
+}
+.t-default-menu .t-menu__item {
+  color: var(--td-text-color-secondary);
+}
+.t-default-menu.t-is-collapsed {
+  width: 64px;
+}
+.t-default-menu.t-is-collapsed .t-menu .t-menu__item {
+  padding: 0 14px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.t-default-menu.t-is-collapsed .t-fake-arrow {
+  display: none;
+}
+.t-default-menu.t-is-collapsed .t-menu__item {
+  text-overflow: initial;
+}
+.t-default-menu.t-is-collapsed .t-menu__item.t-is-active.t-is-opened {
+  color: var(--td-brand-color);
+  background-color: var(--td-brand-color-light);
+}
+.t-default-menu.t-is-collapsed .t-menu__item.t-is-active.t-is-opened .t-icon {
+  color: var(--td-brand-color);
+}
+.t-default-menu.t-is-collapsed .t-menu__item.t-menu__item--plain::after {
+  content: "";
+}
+.t-default-menu.t-is-collapsed .t-menu__item span {
+  display: none;
+}
+.t-default-menu.t-is-collapsed .t-menu__item .t-icon {
+  margin-right: initial;
+}
+.t-default-menu.t-is-collapsed .t-menu__popup .t-menu__item {
+  padding-left: var(--td-comp-paddingLR-s);
+  padding-right: var(--td-comp-paddingLR-s);
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+}
+.t-default-menu.t-is-collapsed .t-menu__popup .t-menu__item span {
+  display: inline;
+}
+.t-default-menu.t-is-collapsed .t-menu__popup .t-menu__item.t-menu__item--plain::after {
+  content: "";
+}
+.t-default-menu.t-is-collapsed .t-menu__popup .t-fake-arrow {
+  display: block;
+}
+.t-default-menu.t-is-collapsed .t-submenu-icon {
+  display: none;
+}
+.t-default-menu.t-is-collapsed .t-submenu .t-menu__popup .t-submenu-icon {
+  display: initial;
+}
+.t-default-menu.t-is-collapsed .t-submenu > .t-menu__item {
+  min-width: initial;
+}
+.t-default-menu.t-is-collapsed .t-submenu > .t-menu__item::after {
+  content: "";
+  display: block;
+  position: absolute;
+  right: -20px;
+  top: 0;
+  bottom: 0;
+  width: 20px;
+}
+.t-default-menu.t-is-collapsed .t-menu-group__title {
+  padding: 0;
+  font-size: 0;
+}
+.t-default-menu.t-is-collapsed .t-menu-group__title::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  height: 1px;
+  width: 20px;
+  background: var(--td-component-stroke);
+}
+.t-default-menu.t-is-collapsed .t-menu__operations {
+  text-align: center;
+}
+.t-default-menu.t-is-collapsed .t-menu__operations-icon {
+  display: block;
+}
+.t-default-menu__inner {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  height: 100%;
+}
+.t-default-menu__inner .t-menu__logo:not(:empty) {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  height: var(--td-comp-size-xxxl);
+  border-bottom: 1px solid var(--td-component-stroke);
+}
+.t-default-menu__inner .t-menu {
+  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-s);
+  position: relative;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.t-default-menu__inner .t-menu--scroll {
+  overflow-y: auto;
+}
+.t-default-menu__inner .t-menu-group__title {
+  position: relative;
+  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l);
+  color: var(--td-text-color-placeholder);
+  font-size: var(--td-font-body-small);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.t-default-menu .t-submenu {
+  margin-bottom: var(--td-comp-margin-xs);
+  position: relative;
+}
+.t-default-menu .t-menu__operations:not(:empty) {
+  width: 100%;
+  position: relative;
+  padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l);
+  top: 0;
+  left: 0;
+  text-align: left;
+  border-top: solid 1px var(--td-component-stroke);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.t-default-menu .t-menu__operations-icon {
+  width: 32px;
+  height: 32px;
+  padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
+  cursor: pointer;
+  color: var(--td-text-color-primary);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.t-default-menu .t-menu__item.t-is-opened {
+  margin: var(--td-comp-margin-xs) 0;
+  color: var(--td-text-color-primary);
+  background-color: unset;
+}
+.t-default-menu .t-menu__item.t-is-opened .t-icon {
+  color: var(--td-text-color-primary);
+}
+.t-default-menu .t-menu__sub {
+  padding: 0;
+  max-height: 0;
+  overflow: hidden;
+  -webkit-transition: max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+}
+.t-default-menu .t-menu__sub.t-is-opened {
+  max-height: calc(100vh - var(--td-comp-size-xxxl) * 2);
+}
+.t-default-menu .t-menu__sub .t-menu__item {
+  padding-left: var(--padding-left, 32px);
+}
+.t-default-menu .t-menu__item {
+  position: relative;
+  margin: var(--td-comp-margin-xs) 0;
+  padding: 0 10px 0 16px;
+  height: var(--td-comp-size-l);
+  line-height: var(--td-comp-size-l);
+  border-bottom: 0;
+  text-align: left;
+  border-radius: var(--td-radius-default);
+  -webkit-transition: background-color 0.28s cubic-bezier(0.38, 0, 0.24, 1), padding 0.28s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: background-color 0.28s cubic-bezier(0.38, 0, 0.24, 1), padding 0.28s cubic-bezier(0.38, 0, 0.24, 1);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.t-default-menu .t-menu__item:first-child {
+  margin-top: 0;
+}
+.t-default-menu .t-menu__item:last-child {
+  margin-bottom: 0;
+}
+.t-default-menu .t-menu__item .t-icon {
+  width: 20px;
+  height: 20px;
+}
+.t-default-menu .t-menu__item .t-fake-arrow {
+  margin-left: auto;
+  min-width: 16px;
+}
+.t-default-menu .t-menu__item.t-is-active:not(.t-is-opened) {
+  color: var(--td-brand-color);
+  background-color: var(--td-brand-color-light);
+}
+.t-default-menu .t-menu__item.t-is-active:not(.t-is-opened) .t-icon {
+  color: var(--td-brand-color);
+}
+.t-default-menu .t-menu__item:hover:not(.t-is-active):not(.t-is-disabled) {
+  background: var(--td-bg-color-secondarycontainer-hover);
+}
+.t-default-menu .t-menu__popup {
+  top: 0;
+  left: calc(100% + var(--td-pop-padding-m));
+}
+.t-default-menu .t-menu__popup .t-menu__item,
+.t-default-menu .t-menu__popup .t-submenu {
+  margin: var(--td-comp-margin-xxs) 0 0 0;
+}
+.t-default-menu .t-menu__popup .t-menu__item:first-child,
+.t-default-menu .t-menu__popup .t-submenu:first-child {
+  margin-top: 0;
+}
+.t-default-menu.t-menu--dark {
+  background: var(--td-gray-color-13);
+}
+.t-default-menu.t-menu--dark .t-menu__item {
+  color: var(--td-font-white-2);
+}
+.t-default-menu.t-menu--dark .t-menu__logo:not(:empty) {
+  border-bottom-color: var(--td-gray-color-10);
+}
+.t-default-menu.t-menu--dark .t-menu__operations:not(:empty) {
+  border-top-color: var(--td-gray-color-10);
+}
+.t-default-menu.t-menu--dark .t-menu__item:hover:not(.t-is-active):not(.t-is-disabled) {
+  background-color: var(--td-gray-color-10);
+}
+.t-default-menu.t-menu--dark .t-menu__item.t-is-active:not(.t-is-opened) {
+  color: var(--td-text-color-anti);
+  background-color: var(--td-brand-color);
+}
+.t-default-menu.t-menu--dark .t-menu__item.t-is-active:not(.t-is-opened) .t-icon {
+  color: var(--td-text-color-anti);
+}
+.t-default-menu.t-menu--dark .t-menu__item.t-is-opened.t-is-active {
+  background-color: transparent;
+}
+.t-default-menu.t-menu--dark .t-menu__popup {
+  background: var(--td-gray-color-13);
+}
+.t-default-menu.t-menu--dark .t-menu__popup .t-menu__item.t-is-active {
+  background-color: var(--td-brand-color);
+}
+.t-default-menu.t-menu--dark .t-menu__popup {
+  background: var(--td-gray-color-13);
+}
+.t-default-menu.t-menu--dark .t-menu-group__title {
+  color: var(--td-font-white-3);
+}
+.t-default-menu.t-menu--dark.t-is-collapsed .t-menu-group__title:after {
+  background-color: var(--td-gray-color-10);
+}
+.t-default-menu.t-menu--dark.t-is-collapsed .t-menu__item.t-is-active.t-is-opened {
+  background-color: var(--td-brand-color);
+  color: var(--td-text-color-anti);
+}
+.t-default-menu.t-menu--dark.t-is-collapsed .t-menu__item.t-is-active.t-is-opened .t-icon {
+  color: var(--td-text-color-anti);
+}
+.t-menu {
+  color: var(--td-text-color-primary);
+  font: var(--td-font-body-medium);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.t-menu--dark {
+  color: var(--td-font-white-2);
+}
+.t-menu__logo:not(:empty) {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-menu .t-submenu {
+  position: relative;
+}
+.t-menu .t-submenu.t-is-active > .t-menu__item {
+  color: var(--td-gray-color-13);
+}
+.t-menu .t-submenu.t-is-active > .t-menu__item .t-icon {
+  color: var(--td-gray-color-13);
+}
+.t-menu .t-submenu .t-submenu-icon {
+  width: 16px;
+  height: 16px;
+}
+.t-menu .t-submenu.t-is-opened .t-submenu-icon {
+  -webkit-transform: scaleY(-1);
+          transform: scaleY(-1);
+}
+.t-menu::-webkit-scrollbar {
+  display: none;
+}
+.t-menu__spacer::before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 1;
+}
+.t-menu__spacer--left::before {
+  left: -16px;
+  width: 16px;
+  top: 0;
+  bottom: 0;
+}
+.t-menu__spacer--top::before {
+  top: -20px;
+  left: 0;
+  right: 0;
+  height: 20px;
+}
+.t-menu__item {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  color: var(--td-text-color-primary);
+  cursor: pointer;
+  text-overflow: ellipsis;
+  border-radius: var(--td-radius-default);
+  --ripple-color: var(--td-bg-color-container-active);
+}
+.t-menu__item ::-moz-selection {
+  background: transparent;
+}
+.t-menu__item ::selection {
+  background: transparent;
+}
+.t-menu__item-spacer {
+  overflow: unset;
+}
+.t-menu__item-spacer::before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 1;
+}
+.t-menu__item-spacer--right::before {
+  right: -16px;
+  width: 16px;
+  top: 0;
+  bottom: 0;
+}
+.t-menu__item-spacer--bottom::before {
+  bottom: -20px;
+  left: 0;
+  right: 0;
+  height: 20px;
+}
+.t-menu__item a {
+  color: unset;
+  text-decoration: none;
+}
+.t-menu__item a.t-menu__item-link {
+  color: unset;
+}
+.t-menu__item.t-is-active {
+  color: var(--td-brand-color);
+  background-color: var(--td-brand-color-light);
+}
+.t-menu__item.t-is-opened {
+  color: var(--td-brand-color);
+}
+.t-menu__item:hover:not(.t-is-active):not(.t-is-opened):not(.t-is-disabled) {
+  background-color: var(--td-bg-color-container-hover);
+}
+.t-menu__item.t-is-disabled {
+  color: var(--td-text-color-disabled);
+  cursor: not-allowed;
+}
+.t-menu__content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.t-icon + .t-menu__content,
+.t-icon + .t-menu__item-link {
+  margin-left: var(--td-comp-margin-s);
+}
+.t-menu--dark.t-head-menu {
+  background-color: var(--td-gray-color-13);
+}
+.t-menu--dark.t-head-menu .t-menu__popup {
+  background-color: var(--td-gray-color-13);
+  border: solid 0.5px var(--td-gray-color-10);
+}
+.t-menu--dark .t-menu__item {
+  color: var(--td-text-color-anti);
+  --ripple-color: var(--td-gray-color-11);
+}
+.t-menu--dark .t-menu__item.t-is-active {
+  color: var(--td-text-color-anti);
+  background-color: var(--td-brand-color);
+}
+.t-menu--dark .t-menu__item.t-is-opened {
+  color: var(--td-text-color-anti);
+}
+.t-menu--dark .t-menu__item.t-is-opened .t-icon {
+  color: var(--td-text-color-anti);
+}
+.t-menu--dark .t-menu__item.t-is-disabled {
+  color: var(--td-font-white-4);
+}
+.t-menu--dark .t-menu__item:hover:not(.t-is-active):not(.t-is-opened):not(.t-is-disabled) {
+  background-color: var(--td-gray-color-10);
+}
+.t-menu--dark .t-menu__popup {
+  background: var(--td-gray-color-13);
+}
+.t-menu--dark .t-menu__popup .t-menu__item {
+  color: var(--td-text-color-anti);
+  border-radius: var(--td-radius-default);
+}
+.t-menu--dark .t-menu__popup .t-menu__item.t-is-active {
+  color: var(--td-text-color-anti);
+  background-color: var(--td-brand-color);
+}
+.t-menu--dark .t-menu__popup .t-menu__item:hover:not(.t-is-active) {
+  background-color: var(--td-gray-color-10);
+}
+.t-menu--dark .t-head-menu__submenu {
+  border-top: 1px solid transparent;
+}
+.t-menu--dark .t-menu__operations-icon {
+  color: var(--td-bg-color-container);
+}
+.t-menu--dark .t-menu__operations-icon:hover {
+  background-color: var(--td-brand-color);
+}
+.t-menu__popup {
+  max-height: 0;
+  overflow: hidden;
+  -webkit-transition: max-height 0.24s cubic-bezier(0.38, 0, 0.24, 1), width 0.24s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear;
+  transition: max-height 0.24s cubic-bezier(0.38, 0, 0.24, 1), width 0.24s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear;
+  position: absolute;
+  background: var(--td-bg-color-container);
+  z-index: 1000;
+  border-radius: var(--td-radius-medium);
+  opacity: 0;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.t-menu__popup .t-menu__popup {
+  -webkit-transition: none;
+  transition: none;
+}
+.t-menu__popup-wrapper {
+  padding: var(--td-pop-padding-m);
+  height: 100%;
+  list-style: none;
+  margin: 0;
+}
+.t-menu__popup .t-fake-arrow {
+  margin-left: var(--td-comp-margin-s);
+}
+.t-menu__popup.t-is-vertical {
+  max-height: unset;
+  width: 0;
+}
+.t-menu__popup.t-is-vertical.t-is-opened {
+  width: var(--popup-width, 160px);
+}
+.t-menu__popup.t-is-vertical .t-menu__item {
+  padding-left: var(--td-comp-paddingLR-l);
+  padding-right: var(--td-comp-paddingLR-l);
+}
+.t-menu__popup.t-is-horizontal .t-menu__item {
+  padding-left: var(--td-comp-paddingLR-l);
+  padding-right: var(--td-comp-paddingLR-l);
+  white-space: nowrap;
+}
+.t-menu__popup.t-is-horizontal li + li {
+  margin-top: var(--td-comp-margin-xs);
+}
+.t-menu__popup.t-is-opened {
+  max-height: calc(100vh - var(--td-comp-size-xxxl) * 2);
+  opacity: 1;
+  -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 3px 14px 6px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 3px 14px 6px rgba(0, 0, 0, 0.05);
+  overflow: visible;
+}
+.t-menu__popup.t-is-opened .t-menu__popup {
+  top: calc(0px - var(--td-pop-padding-m));
+  left: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.t-menu__popup.t-is-opened .t-menu__popup::before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: -16px;
+  width: 16px;
+  top: 0;
+  bottom: 0;
+}
+.t-menu__popup .t-menu__item {
+  color: var(--td-text-color-primary);
+  height: var(--td-comp-size-s);
+  line-height: var(--td-comp-size-s);
+}
+.t-menu__popup .t-menu__item + .t-menu__item {
+  margin-left: 0;
+}
+.t-menu__popup .t-menu__item:hover:not(.t-is-active) {
+  background-color: var(--td-bg-color-container-hover);
+}
+.t-menu__operations-icon {
+  margin-right: var(--td-comp-margin-l);
+  border-radius: var(--td-radius-default);
+  color: var(--td-text-color-primary);
+  -webkit-transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1);
+}
+.t-menu__operations-icon:hover {
+  background-color: var(--td-brand-color-light);
+}
+.t-opacity-transition {
+  -webkit-transition: opacity 0.28s cubic-bezier(0.55, 0, 0.1, 1);
+  transition: opacity 0.28s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.horizontal-collapse-transition .t-submenu__title .t-submenu__icon-arrow {
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+  opacity: 0;
+}
+.t-menu__popup {
+  top: 0;
+  left: calc(100% - var(--td-pop-padding-m));
+}
+.t-menu__popup .t-menu__item,
+.t-menu__popup .t-submenu {
+  margin: var(--td-comp-margin-xxs) 0 0 0;
+}
+.t-menu__popup .t-menu__item:first-child,
+.t-menu__popup .t-submenu:first-child {
+  margin-top: 0;
+}