@use "../../variables/index" as *;

@use "../mixins/shadows-helper";

/**
 * Bottom Drawer - Fixed bottom panel
 *
 * Note: Uses design tokens for spacing ($size-*) and layout vars.
 *
 * Intentionally hardcoded values:
 * - 6px: Off-grid positioning offset
 * - 100vh: Full viewport height for transform
 * - Z-index calculations: Stacking order
 */

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

  transform: translate(0, 100vh);

  .drawerOpen & {
    transform: translate(0, 0);
    @include shadows-helper.boxShadowHelper(md, top);
  }

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

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

.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;
    }
  }
}