@cloud-ru/ds-uikit-product-header 1.0.1-preview-7665e9c3.0

package/dist/esm/style.css

@@ -0,0 +1,844 @@
+.tooltipTrigger{
+  display:inline-flex;
+}
+.header{
+  box-sizing:border-box;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+
+.top{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  box-sizing:border-box;
+  height:var(--sn-primitive-dimension-40, 40px);
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+}
+
+.bottom{
+  overflow:hidden;
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  height:var(--sn-primitive-dimension-24, 24px);
+  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+
+.left{
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  min-width:0;
+  height:100%;
+}
+
+.right{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  height:100%;
+}
+.logoImg{
+  width:auto;
+  min-height:var(--sn-primitive-dimension-24, 24px);
+  max-height:var(--sn-primitive-dimension-24, 24px);
+}
+
+.logoWrap{
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+}
+
+.iconStack{
+  position:relative;
+  display:flex;
+  flex-shrink:0;
+}
+
+.icon{
+  transform-origin:50% center;
+  transform-box:fill-box;
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  transition:opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.iconDefault{
+  opacity:1;
+}
+
+.iconHover{
+  position:absolute;
+  inset:0;
+  opacity:0;
+}
+
+.logo{
+  position:relative;
+  flex-shrink:0;
+}
+.logo:active:not([data-disabled]) .iconDefault{
+  opacity:0;
+}
+.logo:active:not([data-disabled]) .iconHover{
+  opacity:1;
+}
+@media (hover: hover){
+  .logo:hover:not([data-disabled]) .iconDefault{
+    opacity:0;
+  }
+  .logo:hover:not([data-disabled]) .iconHover{
+    opacity:1;
+  }
+}
+.closeButton{
+  position:absolute;
+  top:var(--sn-primitive-dimension-4, 4px);
+  right:var(--sn-primitive-dimension-4, 4px);
+}
+@media (hover: hover){
+  .closeButton{
+    visibility:hidden;
+  }
+}
+
+.root{
+  position:relative;
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+  min-width:0;
+  min-height:var(--sn-primitive-dimension-48, 48px);
+  padding:0 var(--sn-primitive-dimension-12, 12px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  font:inherit;
+  color:inherit;
+  text-align:left;
+  text-decoration:none;
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+.root:hover .closeButton, .root:focus-visible .closeButton, .root:focus-within .closeButton{
+  visibility:visible;
+}
+.root:focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+
+.titleWrapper{
+  display:flex;
+  flex:1 1 auto;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  min-width:0;
+}
+
+.title{
+  overflow:hidden;
+  flex-shrink:1;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.afterTitle{
+  display:flex;
+  flex-shrink:0;
+  flex-wrap:wrap;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  justify-content:flex-end;
+}
+.root{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:space-between;
+  min-width:0;
+  min-height:var(--sn-primitive-dimension-32, 32px);
+}
+
+.segmentControl{
+  flex-shrink:0;
+}
+
+.actions{
+  display:flex;
+  flex-shrink:0;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  margin-left:auto;
+}
+
+.settingsContent{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  width:100%;
+}
+.subcategoryTitleActions{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  min-width:0;
+  visibility:hidden;
+}
+
+.subcategory{
+  min-width:0;
+}
+.subcategory:has([data-subcategory-body]){
+  grid-column:1/-1;
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+
+.subcategoryAccordion{
+  min-width:0;
+}
+
+.subcategoryTitle{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  align-items:stretch;
+  justify-content:center;
+  min-width:0;
+  padding-left:var(--sn-primitive-dimension-4, 4px);
+}
+.subcategoryTitle:hover .subcategoryTitleActions, .subcategoryTitle:focus-within .subcategoryTitleActions{
+  visibility:visible;
+}
+
+.subcategoryTitleRow{
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  justify-content:space-between;
+  width:100%;
+  min-width:0;
+  min-height:var(--sn-primitive-dimension-32, 32px);
+}
+
+.subcategoryTitleClickable{
+  flex-shrink:1;
+  min-width:0;
+}
+
+.subcategoryDescription{
+  width:100%;
+  padding-bottom:var(--sn-primitive-dimension-4, 4px);
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.subcategoryTitleDraggable{
+  touch-action:none;
+  flex:1;
+  min-width:0;
+}
+
+.subcategoryCollapsedCard{
+  flex:1;
+  min-width:0;
+}
+.headerActions{
+  pointer-events:none;
+  display:flex;
+  flex-shrink:0;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  opacity:0;
+  outline:none;
+}
+.headerActions[data-always-visible]{
+  opacity:1;
+}
+
+.header{
+  display:flex;
+  flex:1 0 0;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  min-width:0;
+  min-height:var(--sn-primitive-dimension-40, 40px);
+  padding-inline:var(--sn-primitive-dimension-8, 8px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+}
+.header:focus-visible .headerActions, .header:has(:focus-visible) .headerActions{
+  pointer-events:auto;
+  opacity:1;
+}
+@media (hover: hover){
+  .header:hover{
+    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+  }
+  .header:hover .headerActions{
+    pointer-events:auto;
+    opacity:1;
+  }
+}
+
+.headerTitle{
+  flex:1 0 0;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.headerTitle:hover .headerActions, .headerTitle:focus-visible .headerActions, .headerTitle:has(:focus-visible) .headerActions{
+  pointer-events:auto;
+  opacity:1;
+}
+
+.group{
+  position:relative;
+  overflow-x:clip;
+  display:flex;
+  flex-direction:column;
+  min-width:0;
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-12, 12px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+.group[data-drag-preview]{
+  cursor:grabbing;
+}
+.group[data-drag-preview] .header{
+  cursor:grabbing;
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.group[data-drag-preview] .header .headerActions{
+  pointer-events:auto;
+  opacity:1;
+}
+
+.groupDragPreview{
+  cursor:grabbing;
+  container-type:inline-size;
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+}
+
+.dragHandle{
+  all:unset;
+  touch-action:none;
+  cursor:grab;
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:var(--sn-primitive-dimension-24, 24px);
+  height:var(--sn-primitive-dimension-24, 24px);
+  border:none;
+  border-radius:var(--sn-button-anatomy-size-s-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  background-color:transparent;
+  outline:none;
+}
+.dragHandle:active{
+  cursor:grabbing;
+}
+.dragHandle:focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+
+.groupBody{
+  display:grid;
+  grid-template-columns:repeat(3, minmax(auto, 1fr));
+  gap:var(--sn-primitive-dimension-4, 4px);
+}
+@container (width <= 728px){
+  .groupBody:not([data-mobile]){
+    grid-template-columns:repeat(2, minmax(auto, 1fr));
+  }
+}
+.groupBody[data-mobile]{
+  grid-template-columns:repeat(1, minmax(200px, 1fr));
+}
+
+.decoration{
+  --highlight-border-width:1px;
+  position:absolute;
+  top:0;
+  left:0;
+  overflow:hidden;
+  width:100%;
+  height:100%;
+  border-radius:inherit;
+}
+[data-drag-preview] .decoration{
+  z-index:-1;
+}
+.decoration[data-color-scheme=light]{
+  --highlight-border-color-from:hsl(155deg 48% 42% / 100%);
+  --highlight-border-color-to:hsl(155deg 48% 42% / 32%);
+  --highlight-background-color-from:hsl(0deg 0% 99% / 20%);
+  --highlight-background-color-to:hsl(152deg 39% 79% / 12%);
+  --highlight-background-color:hsl(0deg 0% 99% / 100%);
+}
+.decoration[data-color-scheme=dark]{
+  --highlight-border-color-from:hsl(153deg 30% 55% / 100%);
+  --highlight-border-color-to:hsl(157deg 51% 19% / 100%);
+  --highlight-background-color-from:hsl(240deg 14% 16% / 100%);
+  --highlight-background-color-to:hsl(157deg 51% 19% / 20%);
+  --highlight-background-color:hsl(240deg 14% 16% / 100%);
+}
+.decoration[data-is-highlighted]::before{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  opacity:0.64;
+  background-image:linear-gradient(90deg, var(--highlight-border-color-from) 0%, var(--highlight-border-color-to) 50%, var(--highlight-border-color-from) 100%);
+}
+
+.decorationBackground{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  inset:0;
+  overflow:hidden;
+  background-color:transparent;
+}
+[data-is-highlighted] .decorationBackground{
+  inset:var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width);
+  border-radius:calc(var(--sn-primitive-dimension-4, 4px) - var(--highlight-border-width));
+  background:linear-gradient(90deg, var(--highlight-background-color-from) 2.29%, var(--highlight-background-color-to) 97.84%), var(--highlight-background-color);
+}
+
+.colorMarker{
+  content:"";
+  position:absolute;
+  top:0;
+  bottom:0;
+  left:0;
+  width:var(--sn-primitive-dimension-4, 4px);
+  visibility:hidden;
+}
+.colorMarker[data-block-color=transparent]{
+  visibility:visible;
+  background-color:"transparent";
+}
+.colorMarker[data-block-color=neutral]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.colorMarker[data-block-color=primary]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
+}
+.colorMarker[data-block-color=red]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-red-decor, var(--sn-primitive-color-red-80, #fdd6cd));
+}
+.colorMarker[data-block-color=orange]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
+}
+.colorMarker[data-block-color=yellow]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-yellow-decor, var(--sn-primitive-color-yellow-80, #f0dfb1));
+}
+.colorMarker[data-block-color=green]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-green-decor, var(--sn-primitive-color-green-80, #d2ead0));
+}
+.colorMarker[data-block-color=blue]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-blue-decor, var(--sn-primitive-color-blue-80, #d6e2f4));
+}
+.colorMarker[data-block-color=violet]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-violet-decor, var(--sn-primitive-color-violet-80, #e6dcf3));
+}
+.colorMarker[data-block-color=pink]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-pink-decor, var(--sn-primitive-color-pink-80, #f5d9e1));
+}
+
+.skeletonTitle{
+  display:flex;
+  align-items:center;
+  height:var(--sn-primitive-dimension-40, 40px);
+  padding:0 var(--sn-primitive-dimension-8, 8px);
+  font-size:var(--sn-primitive-dimension-16, 16px);
+  line-height:var(--sn-primitive-dimension-40, 40px);
+}
+
+.skeletonBody{
+  padding-bottom:var(--sn-primitive-dimension-4, 4px);
+}
+
+.skeletonService{
+  padding:var(--sn-primitive-dimension-4, 4px);
+}
+.content[data-empty]{
+  align-items:center;
+  justify-content:center;
+  height:100%;
+}
+.content[data-empty][data-mobile]{
+  flex:1 1 auto;
+}
+.emptyIcon{
+  flex-shrink:0;
+  width:var(--sn-primitive-dimension-40, 40px);
+  height:var(--sn-primitive-dimension-40, 40px);
+}
+.emptyIcon[data-favorite]{
+  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+}
+
+.emptyState{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  padding:var(--sn-primitive-dimension-8, 8px);
+}
+
+.emptyText{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  text-align:center;
+  white-space:pre-line;
+}
+.root{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+  min-height:0;
+  padding:var(--sn-primitive-dimension-8, 8px) 0 0;
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+
+.header{
+  display:flex;
+  flex-shrink:0;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  width:100%;
+  padding-inline:var(--sn-primitive-dimension-8, 8px);
+}
+
+.segmentControl{
+  flex:1;
+  min-width:0;
+}
+
+.listScroll{
+  position:relative;
+  flex:1 1 auto;
+  width:100%;
+  min-height:0;
+}
+.listScroll[data-insert-new] [data-favorite]{
+  fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
+}
+
+.dropTarget{
+  pointer-events:none;
+  position:absolute;
+  inset:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px);
+}
+
+.listScrollInner{
+  height:100%;
+  max-height:calc((var(--sn-primitive-dimension-32, 32px) + var(--sn-primitive-dimension-4, 4px)) * 12 + var(--sn-primitive-dimension-4, 4px));
+}
+
+.list{
+  display:flex;
+  flex-direction:column;
+  align-items:stretch;
+  width:100%;
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px);
+}
+
+.listEnd{
+  flex-shrink:0;
+  width:100%;
+  height:0;
+}
+
+.card{
+  width:100%;
+  min-width:0;
+}
+
+.sortableCard{
+  cursor:grab;
+  min-width:0;
+}
+
+.skeleton{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:stretch;
+  width:100%;
+  padding:var(--sn-primitive-dimension-8, 8px);
+}
+
+.skeletonItem{
+  width:100%;
+  height:var(--sn-primitive-dimension-24, 24px);
+  border-radius:var(--sn-density-radius-3xs, var(--sn-primitive-dimension-2, 2px));
+}
+.drawer{
+  border-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0)) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0));
+}
+.drawer [data-test-id=drawer__close-button]{
+  display:none;
+}
+.drawer svg{
+  fill:currentcolor;
+}
+
+.scroll{
+  box-sizing:border-box;
+}
+
+.left{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-16, 16px);
+  justify-content:space-between;
+  box-sizing:border-box;
+  width:var(--snack-menu-left-width);
+  min-height:0;
+  padding:var(--sn-primitive-dimension-16, 16px);
+}
+.left:has(> :only-child){
+  justify-content:flex-end;
+}
+
+.drawerRoot{
+  width:100%;
+}
+.drawerRoot [data-test-id=header__drawer-menu][data-small][data-position][data-width]{
+  width:100%;
+  max-width:calc(264px + var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))));
+}
+.drawerRoot [data-test-id=header__drawer-menu][data-small][data-position][data-width] .left{
+  width:100%;
+  max-width:100%;
+}
+
+.leftTop{
+  display:flex;
+  flex:1 1 0;
+  flex-direction:column;
+  min-height:0;
+}
+
+.settingItems{
+  flex-shrink:0;
+  height:auto;
+}
+
+.right{
+  position:relative;
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  min-width:0;
+  height:100%;
+}
+
+.rightContent{
+  container-type:inline-size;
+  overflow-x:clip;
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  min-width:0;
+  padding:var(--sn-primitive-dimension-16, 16px);
+}
+
+.menu{
+  --snack-menu-header-height:40px;
+  --snack-menu-left-width:263px;
+  position:relative;
+  height:100vh;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+
+.menuBody{
+  display:flex;
+  box-sizing:border-box;
+  height:calc(100% - var(--snack-menu-header-height));
+}
+
+.menuHeader{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  height:var(--snack-menu-header-height);
+}
+
+.menuHeaderBrand{
+  width:var(--snack-menu-left-width);
+  height:var(--snack-menu-header-height);
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+}
+.container{
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  box-sizing:border-box;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+
+.closeButton{
+  flex-grow:1;
+  flex-shrink:1;
+  justify-content:flex-start;
+}
+.menuHeader{
+  height:var(--sn-primitive-dimension-40, 40px);
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+  border-bottom:1px solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+
+.rightContent{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  min-width:0;
+}
+
+.drawerMobile{
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3))) !important;
+}
+
+.scrollMobile{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  min-height:100%;
+  margin-top:var(--sn-primitive-dimension-40, 40px);
+  padding:var(--sn-primitive-dimension-16, 16px);
+}
+.wrapper{
+  will-change:transform, opacity;
+  animation-duration:0.24s;
+  animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
+  animation-fill-mode:forwards;
+}
+.wrapper[data-animation-type=fade-slide-up-right]{
+  transform:translate(-12px, 4px);
+  opacity:0;
+  animation-name:fade-slide-up-right;
+}
+.wrapper[data-animation-type=fade-slide-up]{
+  transform:translate(0, 4px);
+  opacity:0;
+  animation-name:fade-slide-up;
+}
+.wrapper[data-animation-type=slide-right]{
+  transform:translate(-12px, 0);
+  animation-name:slide-right;
+}
+.wrapper[data-animation-type=fade-in]{
+  animation-name:fade-in;
+}
+
+@keyframes fade-in{
+  0%{
+    opacity:0;
+  }
+  100%{
+    opacity:1;
+  }
+}
+@keyframes fade-slide-up{
+  0%{
+    transform:translate(0, 4px);
+    opacity:0;
+  }
+  100%{
+    transform:translate(0, 0);
+    opacity:1;
+  }
+}
+@keyframes fade-slide-up-right{
+  0%{
+    transform:translate(-12px, 4px);
+    opacity:0;
+  }
+  100%{
+    transform:translate(0, 0);
+    opacity:1;
+  }
+}
+@keyframes slide-right{
+  0%{
+    transform:translate(-12px, 0);
+  }
+  100%{
+    transform:translate(0, 0);
+  }
+}
+.container{
+  position:relative;
+  height:100%;
+}
+.container :global .os-scrollbar-vertical{
+  top:var(--snack-autohide-panel-height, 0) !important;
+}
+
+.panel{
+  position:absolute;
+  width:100%;
+}
+.searchWrap:not([data-mobile]){
+  flex:1 1 auto;
+  padding:var(--sn-primitive-dimension-2, 2px) var(--sn-primitive-dimension-10, 10px);
+}
+
+.search{
+  width:100%;
+}
+.card{
+  min-width:0;
+}
+
+.dragCardPreview{
+  cursor:grabbing;
+  border-radius:var(--sn-density-radius-3xs, var(--sn-primitive-dimension-2, 2px));
+}
+
+.draggableCard{
+  min-width:0;
+}
+.breadcrumbs{
+  min-width:0;
+  padding:0 var(--sn-primitive-dimension-8, 8px) !important;
+}
+.container{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:var(--sn-primitive-dimension-24, 24px);
+  height:var(--sn-primitive-dimension-24, 24px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  background:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.userMenuDroplist{
+  width:272px;
+}
+
+.userMenuTrigger{
+  display:block;
+}