.tdx-menu-icon { position: relative; display: block; width: 22px; height: 16px; flex: 0 0 auto; pointer-events: none; } .tdx-menu-icon__bar { position: absolute; left: 0; display: block; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(0deg); transform-origin: center; transition: top 200ms cubic-bezier(0.4, 0, 0.2, 1) 170ms, transform 240ms cubic-bezier(0.68, -0.25, 0.27, 1.25), opacity 160ms ease 170ms, width 260ms cubic-bezier(0.22, 1, 0.36, 1); } .tdx-menu-icon__bar--top { top: 0; } .tdx-menu-icon__bar--mid { top: 7px; } .tdx-menu-icon__bar--btm { top: 14px; } .sidebar-toggle:hover .tdx-menu-icon__bar--mid, .sidebar-toggle:focus-visible .tdx-menu-icon__bar--mid { width: 65%; } .sidebar-toggle.is-open .tdx-menu-icon__bar { transition: top 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 240ms cubic-bezier(0.68, -0.25, 0.27, 1.25) 170ms, opacity 160ms ease, width 260ms cubic-bezier(0.22, 1, 0.36, 1); } .sidebar-toggle.is-open .tdx-menu-icon__bar--top { top: 7px; transform: rotate(45deg); } .sidebar-toggle.is-open .tdx-menu-icon__bar--mid { width: 55%; opacity: 0; transform: translateX(14px); } .sidebar-toggle.is-open .tdx-menu-icon__bar--btm { top: 7px; transform: rotate(-45deg); } .sidebar-nav { z-index: 17; padding-top: 64px; } .mobile-shadow.in { z-index: 16; } .sidebar-nav .sidebar-close-wrap { display: none; } .bars .sidebar-toggle, .sidebar-close-wrap .sidebar-toggle { border-radius: 999px; transition: background 160ms ease; } .bars .sidebar-toggle:focus-visible, .sidebar-close-wrap .sidebar-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; } @media (prefers-reduced-motion: reduce) { .tdx-menu-icon__bar, .sidebar-toggle.is-open .tdx-menu-icon__bar { transition-duration: 1ms; transition-delay: 0ms; } }