.bottom-drawer {
  position: fixed;
  top: calc(@header-bar-height + 6px);
  right: 10px;
  bottom: 0;
  z-index: @zindex-navbar-fixed + 5;
  overflow-y: auto;
  width: calc(100vw - 20px);
  background-color: @component-background-default;
  transition:
    transform @open-menu-time-type,
    width @open-menu-time-type;

  .translate(0, 100vh);

  .drawerOpen & {
    .translate(0, 0);
    .boxShadowHelper(md, top);
  }

  @media (min-width: @grid-float-breakpoint) {
    right: 24px;
    width: calc(100vw - 48px);

    .open & {
      width: calc(100vw - @navigatorWidth - 48px);
    }
  }
}

.drawerOpen {
  &:has(.bottom-drawer.has-backdrop) {
    &:before {
      content: '';
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: @zindex-navbar-fixed + 4;
      cursor: not-allowed;
    }
  }
}