import{q as i,ao as o,ap as t,al as r,a1 as e}from"./index-BbBXKozi.js";import{T as n}from"./Typography-D_A1O53W.js";const d=e(60),s=e(336),l=i.div`
  width: ${({isExpanded:a})=>a?s:d};
  background-color: ${o.canvas95};
  transition: width ${t}ms ease-in-out;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;

  & ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  & ::-webkit-scrollbar-track {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 99px;
  }

  & ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 99px;
  }

  @media (max-width: ${r.tablet}px) and (orientation: portrait) {
    width: 100%;
  }

  .fade-enter {
    opacity: 0;
  }

  .fade-enter-active {
    opacity: 1;
    transition: all ${t}ms ease-in-out;
  }

  .fade-enter-done {
    opacity: 1;
  }

  .fade-exit {
    opacity: 1;
  }

  .fade-exit-active {
    opacity: 0;
    transition: all ${t}ms ease-in-out;
  }

  .fade-exit-done {
    opacity: 0;
  }
`,m=i(n)`
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  padding-right: 1.25rem;
  padding-bottom: 0.5rem;
  width: fit-content;
  opacity: ${({hidden:a})=>a?0:1};
  transition: opacity ${t}ms ease-in-out;
`;export{l as L,m as S};
//# sourceMappingURL=styled-BQDb5yi-.js.map