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);
  overflow-wrap: 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--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;
}
.toolbar-menu__chevron {
  flex-shrink: 0;
  margin-inline-start: auto;
  transition: rotate var(--admin-toolbar-transition);
  rotate: 90deg;
  fill: currentColor;
  block-size: var(--admin-toolbar-space-16);
  inline-size: var(--admin-toolbar-space-16);
}
[dir="rtl"] .toolbar-menu__chevron {
  rotate: 90deg;
}
[aria-expanded="true"] .toolbar-menu__chevron {
  rotate: -90deg;
}
[dir="rtl"] :is([aria-expanded="true"] .toolbar-menu__chevron) {
  rotate: none;
}