// ┌──────────────────────────┐
// │ Calicte Panel - Position │
// └──────────────────────────┘
//
// Top and bottom positions - top right on desktop, bottom full width on mobile

.calcite-panels {
  position: absolute;
  top: $panels_position_top;
  width: $panels_width;
  // z-index: 50;
}

.calcite-panels-right {
  left: auto;
  right: $panels_position_right;
}

.calcite-panels-left {
  left: $panels_position_right;
  right: auto;
}

// Navbar - Top 

.calcite-nav-top,
.calcite-nav-top-fixed {
  .calcite-panels {
    top: $panels_position_top + $navbar_height;
  }
}

.calcite-nav-top.calcite-margin-top, 
.calcite-nav-top.calcite-margin-all {
  .calcite-panels {
    top: $panels_position_top + $navbar_height + $base_ui_margin;
  }
}

// Navbar - Top + Hidden

.calcite-nav-top,
.calcite-nav-top-fixed,
.calcite-nav-top.calcite-margin-top, 
.calcite-nav-top.calcite-margin-all {
  &.calcite-nav-hidden {
    .calcite-panels {
      top: $base_ui_margin;
    }
  }
}

// Navbar - Bottom

.calcite-nav-bottom,
.calcite-nav-bottom-fixed,
.calcite-nav-bottom.calcite-margin-bottom,
.calcite-nav-bottom.calcite-margin-all {
  .calcite-panels {
    top: $base_ui_margin + $map_attribution_height;
  }
}

// Navbar - Top + Hidden (does not apply)


// Mobile screens

@media (max-width: $panels_breakpoint_width_mobile) {

  // Panel

  .calcite-panels {
    width: $panels_width_mobile;
  }

  .calcite-panels-left,
  .calcite-panels-right {
    right: 0;
    left: 0;
  }

  // Navbar - Top

  .calcite-nav-top,
  .calcite-nav-top-fixed,
  .calcite-nav-top.calcite-margin-top, 
  .calcite-nav-top.calcite-margin-all {
    .calcite-panels {
      top: auto;
      bottom: 0;
    }
  }

  // Navbar - Bottom

  .calcite-nav-bottom,
  .calcite-nav-bottom-fixed, 
  .calcite-nav-bottom.calcite-margin-bottom,
  .calcite-nav-bottom.calcite-margin-all {
    .calcite-panels {
      top: auto;
      bottom: $navbar_height;
    }
  }

  // Navbar - Top/bottom + margin all

  .calcite-nav-top.calcite-margin-all,
  .calcite-nav-bottom.calcite-margin-all {
    .calcite-panels {
      margin: auto $base_ui_margin ($base_ui_margin * 2) $base_ui_margin;
      width: auto;
    }
  }

  // Navbar Hidden (all)
  
  body.calcite-nav-top,
  body.calcite-nav-top-fixed,
  body.calcite-nav-bottom,
  body.calcite-nav-bottom-fixed {
    &.calcite-nav-hidden {
      .calcite-panels {
        top: auto;
      }
    }
  }  
}

