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

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

/**
 * Help Drawer - Fixed help panel overlay
 *
 * Note: Uses design tokens for spacing ($size-*, $component-padding) and colors.
 *
 * Intentionally hardcoded values:
 * - Layout calc expressions (28px, 140px, etc.): Height calculations
 * - Column widths (130ch, 55ch): Character-based column sizing
 * - 84px padding: Specific footer alignment
 * - 600px height breakpoint: Media query
 * - Orphans/widows: Typography print control
 * - Transition durations (0.5s, 0.35s): Animation timing
 * - Z-index calculations: Stacking order
 * - 1px borders: Standard border widths
 * - 10000px, 2000px: Large clip values
 */

.c8y-help-drawer {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: ($zindex-action-bar - 1);
  margin: 0;
  padding-top: $size-48;
  min-height: calc($size-base * 4);
  max-width: 100vw;
  max-height: calc(100vh - 140px);
  background-color: var(--c8y-helpdrawer-background-default, $component-background-default);
  color: $component-color-default;
  overflow: auto;
  @include c8y-scrollbar.c8y-scrollbar();
  @include shadows-helper.boxShadowHelper(md, bottom);

  .help-content {
    padding-bottom: $component-padding;
    max-width: 130ch;
    columns: auto 55ch;
    orphans: 5;
    widows: 2;
    gap: $size-32;
    text-wrap: balance;
    p + p {
      margin-top: $size-base;
    }
  }

  @media (min-height: 600px) {
    &-block {
      height: 100%;
    }
  }

  @media (max-width: $screen-xs-max) {
    transition: top 0.5s ease;
    .head-open & {
      top: calc($headerHeight + 28);
    }
    .has-tabs & {
      top: 0;
      transition: top 0.35s ease;
    }
    .has-tabs .head-open & {
      top: calc($headerHeight * 2 + calc($size-base * 1.5));
    }
  }
  @media (min-width: $screen-sm-min) {
    top: $headerHeight;
    clip: rect(0, 10000px, 2000px, 0);
    .horizontal-tabs.has-tabs & {
      top: calc($headerHeight * 2);
      border-top: 1px solid $action-bar-border-color;
    }
  }
  @media (min-width: $grid-float-breakpoint) {
    transition: left $open-menu-time-type;
    .open & {
      left: $navigatorWidth;
    }
    .horizontal-tabs.has-tabs & {
      top: calc($headerHeight * 2 - $size-16);
    }
  }
  &-block {
    padding: calc($component-padding * 1.5) calc($component-padding * 2) 0
      calc($component-padding * 1.5);
  }
  &-footer {
    position: sticky;
    bottom: 0;
    background: inherit;
    padding: $component-padding calc($component-padding * 2) calc($component-padding * 1.5) 84px;
  }
  &:not(:has(.c8y-help-drawer-footer)) {
    .c8y-help-drawer-block {
      padding-bottom: calc($component-padding * 1.5);
    }
  }
}