:host { display: block; overflow: hidden; z-index: 1001; left: 0px; top: 0px; width: 100dvw; height: 100%; container-type: inline-size; }
:host(.showing-regulatory-bar) { top: 32px; }
:host(.decrease-z-index) { z-index: 100; }
:host, .container { position: fixed; right: 0px; }
.container { z-index: 102; top: 0px; height: 100%; width: var(--site-drawer-container-width-standard-size-mobile, 80dvw); min-width: var(--site-drawer-container-min-width-standard-size-mobile, 80dvw); background-color: var(--site-drawer-background-color, var(--fds-surface-variant)); overflow-y: auto; }
.mobile-full-screen { width: 100dvw; min-width: 100dvw; }
@container (min-width: 475px) {
  .mobile-full-screen, .container { width: var(--site-drawer-container-width-standard-size, 375px); min-width: var(--site-drawer-container-min-width-standard-size, 375px); }
}
.container.bottom-to-top { border-radius: var(--fds-spacing-200) var(--fds-spacing-200) 0 0; bottom: 0px; top: var(--site-drawer-container-top, var(--fds-spacing-500)); width: 100%; height: auto; }
.container.bottom-to-top.bottom-to-top-expanded { top: 0px; border-radius: 0px; }
.container.left-to-right { left: 0px; width: calc(100% - 16px); height: 100%; border-radius: 0 var(--fds-spacing-200) var(--fds-spacing-200) 0; }
@media (orientation: landscape) {
  .container.left-to-right { inset: initial; width: 100cqw; height: 100%; border-radius: var(--fds-spacing-200) var(--fds-spacing-200) 0 0; }
  .container.left-to-right.regulatory-spacing { top: 38px; }
}
.container.centre { width: 100dvw; background: none; top: var(--site-drawer-container-top, var(--fds-spacing-500)); }
.overlay { z-index: 10; background-color: var(--site-drawer-overlay-background-color, rgba(0, 0, 0, 0.583)); width: 100%; height: 100%; position: relative; }
main { height: calc(-32px + 100dvh); }