/* cspell:ignore wght */
/**
 * @file
 * Toolbar block styles.
 */

.toolbar-block {
  display: grid;
  gap: var(--admin-toolbar-space-4);

  .admin-toolbar__content & {
    &:nth-last-child(n + 2) {
      &::after {
        margin-top: var(--admin-toolbar-space-8);
        content: "";
        border-top: 1px solid var(--admin-toolbar-color-gray-200);
      }
    }
  }
}

.toolbar-block__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style-type: none;
  word-wrap: break-word;
  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"]) &,
  html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] & {
    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));

    &::before {
      position: absolute;
      display: block;
      width: var(--admin-toolbar-space-4);
      height: var(--admin-toolbar-space-4);
      content: "";
      border-radius: 50%;
      background-color: currentColor;
    }
  }
}