:host { display: block; pointer-events: none; position: fixed; top: 0; bottom: 0; left: 0; width: 0; height: 100dvh; overflow: visible; z-index: var(--fds-z-index-sidebar, 11000); --site-navigation-tabs-background: var(--fds-sidebar-navigation-background, var(--fds-alternate-surface-nav)); }
:host([position="right"]) { left: auto; right: 0; }
.fds-sidebar-container { background: var(--fds-surface); box-shadow: var(--fds-elevation-2); top: 0px; bottom: 0px; position: fixed; z-index: var(--fds-z-index-sidebar, 11000); pointer-events: auto; will-change: auto; transition: none !important; animation: none !important; height: 100dvh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.fds-sidebar-container::-webkit-scrollbar { display: none; }
.fds-sidebar-container:not([is-visible]), .overlay:not([is-visible]) { visibility: hidden; }
:host([position]) .fds-sidebar-container { height: 100%; min-width: 68px; width: auto; opacity: 0.6; }
:host([position="left"]) .fds-sidebar-container { left: 0px; transform: translateX(-100%); }
:host([position="left"]) .fds-sidebar-container[is-visible] { transform: translateX(0px) !important; opacity: 1 !important; visibility: visible !important; }
:host([position="right"]) .fds-sidebar-container { right: 0px; transform: translateX(100%); }
:host([position="right"]) .fds-sidebar-container[is-visible] { transform: translateX(0px) !important; opacity: 1 !important; visibility: visible !important; }
:host([position="top"]) .fds-sidebar-container { top: 0px; left: 0px; right: 0px; height: auto; min-height: 305px; max-height: 400px; width: 100%; transform: translateY(-100%); opacity: 0.6; }
:host([position="top"]) .fds-sidebar-container[is-visible] { transform: translateY(0px); opacity: 1; }
:host([position="bottom"]) .fds-sidebar-container { inset: auto 0px 0px; height: auto; min-height: 305px; max-height: 400px; width: 100%; transform: translateY(100%); opacity: 0.6; visibility: hidden; }
:host([position="bottom"]) .fds-sidebar-container[is-visible] { transform: translateY(0px); opacity: 1; visibility: visible; }
.fds-sidebar-container[is-animating] { animation: none !important; }
:host([position="left"]) .fds-sidebar-container[is-animating][is-visible] { animation-name: slideInFromLeft; }
:host([position="right"]) .fds-sidebar-container[is-animating][is-visible] { animation-name: slideInFromRight; }
:host([position="top"]) .fds-sidebar-container[is-animating][is-visible] { animation-name: slideInFromTop; }
:host([position="bottom"]) .fds-sidebar-container[is-animating][is-visible] { animation-name: slideInFromBottom; }
:host([position="left"]) .fds-sidebar-container[is-animating]:not([is-visible]) { animation-name: slideOutToLeft; }
:host([position="right"]) .fds-sidebar-container[is-animating]:not([is-visible]) { animation-name: slideOutToRight; }
:host([position="top"]) .fds-sidebar-container[is-animating]:not([is-visible]) { animation-name: slideOutToTop; }
:host([position="bottom"]) .fds-sidebar-container[is-animating]:not([is-visible]) { animation-name: slideOutToBottom; }
@media (max-width: 1023px) {
  :host([type="offcanvas"]) .fds-sidebar-container { width: clamp(270px, 80vw, 400px); }
  :host([type="offcanvas"][full-width]) .fds-sidebar-container { width: 100%; max-width: 100%; }
}
@keyframes slideInFromLeft { 
  0% { transform: translateX(-100%); opacity: 0.6; }
  100% { transform: translateX(0px); opacity: 1; visibility: visible; }
}
@keyframes slideOutToLeft { 
  0% { transform: translateX(0px); opacity: 1; visibility: visible; }
  100% { transform: translateX(-100%); opacity: 0.6; }
}
@keyframes slideInFromRight { 
  0% { transform: translateX(100%); opacity: 0.6; }
  100% { transform: translateX(0px); opacity: 1; visibility: visible; }
}
@keyframes slideOutToRight { 
  0% { transform: translateX(0px); opacity: 1; visibility: visible; }
  100% { transform: translateX(100%); opacity: 0.6; }
}
@keyframes slideInFromTop { 
  0% { transform: translateY(-100%); opacity: 0.6; }
  100% { transform: translateY(0px); opacity: 1; visibility: visible; }
}
@keyframes slideOutToTop { 
  0% { transform: translateY(0px); opacity: 1; visibility: visible; }
  100% { transform: translateY(-100%); opacity: 0.6; }
}
@keyframes slideInFromBottom { 
  0% { transform: translateY(100%); opacity: 0.6; }
  100% { transform: translateY(0px); opacity: 1; visibility: visible; }
}
@keyframes slideOutToBottom { 
  0% { transform: translateY(0px); opacity: 1; visibility: visible; }
  100% { transform: translateY(100%); opacity: 0.6; }
}
.overlay { position: fixed; inset: 0px; width: 100%; height: 100%; background-color: var(--fds-overlay-background, rgba(0, 0, 0, 0.583)); z-index: calc(var(--fds-z-index-sidebar, 1000) - 1); opacity: 0; visibility: hidden; transition: opacity 0.35s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.35s cubic-bezier(0.19, 1, 0.22, 1); pointer-events: none; }
.overlay[is-visible] { opacity: 1; visibility: visible; pointer-events: auto; }
:host([type="static"]) { pointer-events: auto; z-index: var(--fds-z-index-sidebar-static, 10); position: fixed; top: 0px; }
:host([type="static"]) .fds-sidebar-container { background: var(--fds-surface); height: 100%; transform: none; opacity: 1; visibility: visible; transition: none; will-change: auto; box-shadow: none; position: relative; inset: unset; }
:host([type="static"]) .overlay { display: none; }
:host([type="static"][position="left"]) { left: 0px; }
:host([type="static"][position="left"]) .fds-sidebar-container { transform: none; }
:host([type="static"][position="right"]) { right: 0px; }
:host([type="static"][position="right"]) .fds-sidebar-container { transform: none; }
:host([type="static"][position="top"]) { top: 0px; left: 0px; right: 0px; height: auto; }
:host([type="static"][position="bottom"]) { inset: auto 0px 0px; height: auto; }
:host([background="surface"]) .fds-sidebar-container { background: var(--fds-surface); }
:host([background="alternate-surface"]) .fds-sidebar-container { background: var(--fds-alternate-surface); }
:host([background="surface-variant"]) .fds-sidebar-container { background: var(--fds-surface-variant); }
:host([padded]) .fds-sidebar-container { padding: var(--fds-spacing-200); }
@media (hover: none) and (pointer: coarse) {
  @supports (-webkit-touch-callout: none) {
  .safari-status-bar-shim, .safari-bottom-bar-shim { position: fixed; left: 0px; right: 0px; height: 11px; background: var(--fds-header); z-index: calc(var(--fds-z-index-sidebar, 1000) + 1); pointer-events: none; mask-image: linear-gradient(to right, transparent, transparent); }
  .safari-status-bar-shim { top: 0px; }
  .safari-bottom-bar-shim { bottom: 0px; }
}
}