.wrapper{
  box-sizing:border-box;
  width:256px;
}
.wrapper[data-collapsed]{
  width:0;
}
.wrapper .body{
  position:absolute;
  display:flex;
  width:256px;
  height:100%;
  transition:left 0.15s 0.35s ease-in-out;
}
.wrapper .body[data-hover-off]{
  pointer-events:none;
  transition:left 0.15s ease-in-out;
}
.wrapper .body[data-collapsed]{
  left:-256px;
}
.wrapper .body[data-collapsed]::before{
  content:" ";
  position:absolute;
  right:calc(-1 * var(--sn-primitive-dimension-4, 4px));
  width:var(--sn-primitive-dimension-4, 4px);
  height:100%;
}
.wrapper .body[data-collapsed]:hover{
  left:0;
  transition:left 0.15s ease-in-out;
}
.wrapper .body[data-collapsed]:hover::before{
  right:calc(-4 * var(--sn-primitive-dimension-4, 4px));
  width:calc(4 * var(--sn-primitive-dimension-4, 4px));
}
.wrapper .content{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  flex-grow:1;
  box-sizing:border-box;
  padding:var(--sn-primitive-dimension-4, 4px) 0;
  border-right:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
}
.wrapper .content[data-collapsed]{
  flex-shrink:0;
  width:256px;
  margin:var(--sn-primitive-dimension-4, 4px) 0 var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-4, 4px);
  border-right:none;
  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
  box-shadow:var(--sn-boxShadow-elevation-level3, var(--sn-theme-effect-shadow-level3-layer1-positionX, 0) var(--sn-theme-effect-shadow-level3-layer1-positionY, 0) var(--sn-theme-effect-shadow-level3-layer1-blur, 8px) var(--sn-theme-effect-shadow-level3-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level3-layer2-positionX, 0) var(--sn-theme-effect-shadow-level3-layer2-positionY, 8px) var(--sn-theme-effect-shadow-level3-layer2-blur, 16px) var(--sn-theme-effect-shadow-level3-layer2-spread, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
}
.wrapper .list{
  position:relative;
  overflow-y:auto;
  display:flex;
  flex-direction:column-reverse;
  flex-grow:1;
  flex-shrink:1;
}
.wrapper .toggler{
  display:flex;
  flex-grow:0;
  flex-shrink:0;
  justify-content:end;
  padding:0 var(--sn-primitive-dimension-4, 4px);
}
.wrapper .expandButton{
  position:fixed;
  bottom:var(--sn-primitive-dimension-8, 8px);
  left:var(--sn-primitive-dimension-8, 8px);
}

.button{
  background-color:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
}

.pinnedHeaderSlot{
  display:flex;
  flex-direction:row;
  gap:var(--sn-primitive-dimension-8, 8px);
  align-items:center;
  min-height:calc(var(--sn-primitive-dimension-44, 44px) - var(--sn-primitive-strokeWeight-strokeRegular, 1px));
  padding-inline:var(--sn-primitive-dimension-4, 4px);
}

.pinnedHeaderContent{
  display:flex;
  flex-grow:1;
  min-width:0;
}