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