toolbar-menu.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
/* cspell:ignore csvg cpath wght */
/**
 * @file
 * Admin Toolbar menus styles.
 */
.toolbar-menu {
  display: grid;
  margin: 0;
  padding: 0;
  list-style-type: none;
  gap: var(--admin-toolbar-space-4);
}
[class*="toolbar-menu--level-"] {
  display: none;
}
[data-toolbar-menu-trigger][aria-expanded="true"] + [class*="toolbar-menu--level-"] {
  display: grid;
}
.toolbar-menu__item {
  display: grid;
}
.toolbar-menu__item--level-1 {
  border-radius: var(--admin-toolbar-space-8);
}
.toolbar-menu__item--level-1:has(> [data-toolbar-menu-trigger][aria-expanded="true"]) {
  background: var(--admin-toolbar-color-gray-050);
}
.toolbar-menu--level-2 {
  padding-block-end: var(--admin-toolbar-space-12);
  box-shadow: inset var(--admin-toolbar-space-4) 0 0 0 var(--admin-toolbar-color-gray-100);
}
[dir="rtl"] .toolbar-menu--level-2 {
  box-shadow: inset calc(-1 * var(--admin-toolbar-space-4)) 0 0 0 var(--admin-toolbar-color-gray-100);
}
.toolbar-menu__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding-inline: var(--admin-toolbar-space-20) var(--admin-toolbar-space-12);
  padding-block: var(--admin-toolbar-space-8);
  cursor: pointer;
  text-align: start;
  -webkit-text-decoration: none;
  text-decoration: none;
  letter-spacing: var(--admin-toolbar-letter-spacing-0-06);
  word-break: break-word;
  color: var(--admin-toolbar-color-gray-800);
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-size: var(--admin-toolbar-font-size-info-xs);
  line-height: var(--admin-toolbar-line-height-info-xs);
  font-variation-settings: "wght" 600;
  inline-size: 100%;
  gap: var(--admin-toolbar-space-8);
}
.toolbar-menu__link:has(+ .toolbar-menu .is-active) {
  color: var(--admin-toolbar-color-gray-950);
}
.toolbar-menu__link.current {
  color: var(--admin-toolbar-color-gray-990);
}
.toolbar-menu__link.current::after {
  position: absolute;
  z-index: 1;
  inset-block-start: calc(50% - var(--admin-toolbar-space-8) / 2);
  inset-inline-start: calc(var(--admin-toolbar-space-4) * -0.5);
  content: "";
  border-radius: 50%;
  background-color: currentColor;
  inline-size: var(--admin-toolbar-space-8);
  block-size: var(--admin-toolbar-space-8);
}
.toolbar-menu__link:focus {
  color: var(--admin-toolbar-color-gray-990);
  outline-offset: -2px;
  background-color: transparent;
}
.toolbar-menu__link:hover {
  color: var(--admin-toolbar-color-blue-700);
  background-color: transparent;
}
.toolbar-menu__link:hover::before {
  position: absolute;
  z-index: 1;
  inset-block-start: 0;
  inset-inline-start: 0;
  content: "";
  background-color: currentColor;
  inline-size: var(--admin-toolbar-space-8);
  block-size: 100%;
}
.toolbar-menu__link[aria-expanded]::after {
  flex-shrink: 0;
  margin-inline-start: auto;
  content: "";
  transition: transform var(--admin-toolbar-transition);
  transform: rotate(90deg);
  background-color: currentColor;
  block-size: var(--admin-toolbar-space-16);
  inline-size: var(--admin-toolbar-space-16);
  mask-size: var(--admin-toolbar-space-16);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");
}
[dir="rtl"] .toolbar-menu__link[aria-expanded]::after {
  transform: rotate(90deg);
}
@media (forced-colors: active) {
  .toolbar-menu__link[aria-expanded]::after {
    background: canvastext;
  }
}
.toolbar-menu__link[aria-expanded="true"]::after {
  transform: rotate(-90deg);
}
[dir="rtl"] .toolbar-menu__link[aria-expanded="true"]::after {
  transform: rotate(-90deg);
}
.toolbar-menu__link--3 {
  padding-inline-start: var(--admin-toolbar-space-32);
  font-size: var(--admin-toolbar-font-size-info-xs);
  line-height: var(--admin-toolbar-line-height-info-xs);
  font-variation-settings: "wght" 500;
}
.toolbar-menu__link--3::after {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-start: 0;
  content: "";
  background-color: var(--admin-toolbar-color-gray-100);
  inline-size: var(--admin-toolbar-space-20);
  block-size: 1px;
}
.toolbar-menu__link--3:hover::after {
  background-color: currentColor;
}