:root,
.display-builder.sl-theme-dark {
  --toolbar-color: var(--db-text-color);
  --toolbar-color-border: var(--sl-color-neutral-200);
  --toolbar-color-background: var(--sl-color-neutral-0);
  --toolbar-z-index: calc(var(--db-z-index, 501) - 1);
  --toolbar-z-index-fullscreen: calc(var(--db-z-index-fullscreen, 1251) + 1);
  /* Module core navigation compatibility */
  --toolbar-height: var(--admin-toolbar-top-bar-height, 64px);
}

.db-toolbar {
  z-index: var(--toolbar-z-index);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--toolbar-height);
  border: 1px solid var(--admin-toolbar-color-gray-100, var(--toolbar-color-border));
  background-color: var(--toolbar-color-background);

  &.db-toolbar-is-sticky {
    position: fixed;
    left: var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width, 0));
    width: 100%;
    padding-right: var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width, 0));
    border: 0 none;
  }

  sl-tooltip::part(body) {
    color: var(--toolbar-color);
    border: 1px solid var(--toolbar-color-border);
    background-color: var(--toolbar-color-background);
  }
}

/* If second drawer is open when sticky, keep toolbar buttons visible */
.display-builder:has(.db-toolbar-is-sticky) {
  #db-second-drawer {
    &::part(panel) {
      padding-top: calc(var(--drupal-displace-offset-top, 0.01rem) + var(--toolbar-height, 0)) !important;
    }
    &::part(base) {
      z-index: var(--toolbar-z-index);
    }
  }
}
.db-toolbar-sentinel {
  height: 1px;
  margin-top: -1px; /* Optional: ensures it sits exactly where the content starts */
  background: transparent;
}

.display-builder {
  container-type: inline-size;
  container-name: toolbar;
}

.db-toolbar__middle .shoelace-tabs {
  max-width: 100%;
}

.db-toolbar--sticky {
  position: sticky;
  top: 0;
}

.db-toolbar__middle {
  height: var(--admin-toolbar-top-bar-height, 64px);
  padding: 0;
}

.db-toolbar__start,
.db-toolbar__end {
  box-sizing: border-box;
  height: var(--admin-toolbar-top-bar-height, 64px);
  padding: var(--sl-spacing-small) var(--sl-spacing-small);
}

.db-toolbar {
  /* --drupal-displace-offset-top is used by toolbar, admin_toolbar & navigation */
  top: var(--drupal-displace-offset-top, 0);
  .db-keyboard-help {
    padding-left: 0;
    list-style: none;
    code {
      margin-right: 0.2rem;
    }
  }
}

.display-builder--fullscreen .db-toolbar {
  z-index: var(--toolbar-z-index-fullscreen);
  top: 0;
  &.db-toolbar-is-sticky {
    left: 0;
    padding-right: 1rem;
  }
}

.db-toolbar sl-tab-group {
  /* Tabs must not be taller than the available space */
  max-height: calc(var(--admin-toolbar-top-bar-height, 64px) - var(--admin-toolbar-space-12, 12px) * 2);
}

.db-toolbar sl-tab::part(base) {
  height: var(--admin-toolbar-top-bar-height, 64px);
  padding: var(--sl-spacing-small) var(--admin-toolbar-space-12, 12px);
}
@media (max-width: 1280px) {
  .db-toolbar sl-tab::part(base) {
    padding: var(--sl-spacing-small) var(--admin-toolbar-space-8, 8px);
  }
}

.db-toolbar__end > .db-island:not(:first-child, dialog, :empty) {
  display: inline-block;
  margin-left: var(--admin-toolbar-space-4, 4px);
}
@media (max-width: 1280px) {
  .db-toolbar__end > .db-island:not(:first-child, dialog, :empty) {
    margin-left: var(--admin-toolbar-space-4, 4px);
  }
}
