:root {
  --drawer-z-index: calc(var(--db-z-index, 501) + 2);
  --drawer-z-index-fullscreen: calc(var(--db-z-index-fullscreen, 1251) + 2);
}

/* Normal display. */
.display-builder {
  .shoelace-drawer {
    color: var(--db-text-color);
    &::part(panel) {
      /* --drupal-displace-offset-top is used by toolbar, admin_toolbar & navigation */
      padding-top: var(--drupal-displace-offset-top, 0);
    }
    &::part(base) {
      z-index: var(--drawer-z-index);
    }
    &::part(title) {
      overflow: hidden;
      height: var(--admin-toolbar-top-bar-height, 64px);
      /* Vertical alignment with the toolbar */
      padding: var(--admin-toolbar-space-12, 12px);
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: calc(var(--admin-toolbar-top-bar-height, 64px) - var(--admin-toolbar-space-12, 12px) * 2);
    }
  }

  /* Hide contextual panes when loading, can be on drag, onInstanceClick... */
  &.db-htmx-before-request .shoelace-drawer::part(body) {
    opacity: var(--db-loading-opacity);
  }
}

/* Admin toolbar vertical, we pass hover, admin toolbar z-index is 501. */
.toolbar-tray-open.toolbar-vertical .display-builder .shoelace-drawer,
.gin--navigation .display-builder .shoelace-drawer,
.gin--vertical-toolbar .display-builder .shoelace-drawer {
  &::part(panel) {
    /* --drupal-displace-offset-top is used by toolbar, admin_toolbar & navigation */
    padding-top: var(--drupal-displace-offset-top, 64px);
  }
}

/* Fullscreen display */
.display-builder.display-builder--fullscreen .shoelace-drawer {
  &::part(panel) {
    z-index: calc(var(--db-z-index-fullscreen) + 1);
    /* Ignore the top toolbar, only check the Display Builder toolbar. */
    padding-top: var(--db-toolbar-height, 64px);
  }
}

.toolbar-loading .display-builder.display-builder--fullscreen {
  z-index: calc(var(--db-z-index-fullscreen) + 1);
}
