@c8y/style/styles/layout/_bottom-drawer.less

Styles for Cumulocity IoT applications

@import "../mixins/_shadows-helper.less";

/**
 * 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);
    .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;
    }
  }
}

// for when there are two bottom drawers open
c8y-bottom-drawer + c8y-bottom-drawer {
  .bottom-drawer {
    margin-top: 40px;
  }
}
c8y-bottom-drawer + c8y-bottom-drawer + c8y-bottom-drawer {
  .bottom-drawer {
    margin-top: 80px;
  }
}