toolbar-block.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
/* cspell:ignore wght */
/**
 * @file
 * Toolbar block styles.
 */
.toolbar-block {
  display: grid;
  gap: var(--admin-toolbar-space-4);
}
.admin-toolbar__content .toolbar-block:nth-last-child(n + 2)::after {
  margin-top: var(--admin-toolbar-space-8);
  content: "";
  /* TODO: rework color to palette */
  border-top: 1px solid #cfd4dd;
}
.toolbar-block__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style-type: none;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  gap: var(--admin-toolbar-space-4);
}
.toolbar-block__list-item {
  display: grid;
}
.toolbar-block__title {
  position: relative;
  margin: 0;
  padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-8);
  letter-spacing: var(--admin-toolbar-letter-spacing-0-8);
  text-transform: uppercase;
  color: var(--admin-toolbar-color-gray-600);
  font-family: inherit;
  font-size: var(--admin-toolbar-font-size-label-xs);
  line-height: var(--admin-toolbar-line-height-label-xs);
  font-variation-settings: "wght" 500;
}
html:not([data-admin-toolbar="expanded"]) .toolbar-block__title,
html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-block__title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--admin-toolbar-color-gray-600);
  font-size: 0;
  block-size: calc(2.5 * var(--admin-toolbar-rem));
  inline-size: calc(2.5 * var(--admin-toolbar-rem));
}
:is(html:not([data-admin-toolbar="expanded"]) .toolbar-block__title, html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-block__title)::before {
  position: absolute;
  display: block;
  width: var(--admin-toolbar-space-4);
  height: var(--admin-toolbar-space-4);
  content: "";
  border-radius: 50%;
  background-color: currentColor;
}