.db-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: var(--db-toolbar-height, 4rem);
  padding: 0.5rem;
}

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

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

@container toolbar (max-width: 950px) {
  .db-toolbar {
    height: 100%;
    max-height: 14rem;
    gap: 1rem;
  }

  .db-toolbar__middle {
    display: flex;
    flex-basis: 100%;
    justify-content: center;
    order: 3;
  }
}

@container toolbar (max-width: 400px) {
  .db-toolbar {
    max-height: 17rem;
  }

  .db-toolbar__middle .shoelace-tabs {
    max-width: 320px;
  }

  .db-toolbar__middle {
    sl-tab::part(base) {
      padding: 0 0.5rem;
    }
  }
}

.db-toolbar--sticky {
  position: sticky;
  z-index: var(--db-z-index, 1);
}

.db-toolbar__end > *:not(:first-child, dialog) {
  margin-left: 6px;
}

/* Compatibility with core admin toolbar. */
.db-toolbar {
  top: var(--drupal-displace-offset-top, 0);
}

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