toolbar-button.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
 * Toolbar button styles.
 */
[data-drupal-admin-styles] {
  --toolbar-button-outline-offset: 0;
  --toolbar-button-bg: transparent;
  --toolbar-button-color: var(--admin-toolbar-color-gray-800);
  /* Hover styles. */
  --toolbar-button-hover-bg: var(--admin-toolbar-color-gray-050);
  --toolbar-button-hover-color: var(--admin-toolbar-color-gray-990);
  /* Focus variables. */
  --toolbar-button-focus-color: var(--admin-toolbar-color-blue-700);
  /* Current variables */
  --toolbar-button-current-bg: var(--admin-toolbar-color-gray-050);
  --toolbar-button-current-color: var(--admin-toolbar-color-blue-700);
  /* Active child variables. */
  --toolbar-button-has-active-child-bg: var(--admin-toolbar-color-gray-050);
  --toolbar-button-has-active-child-color: var(--admin-toolbar-color-gray-950);
  /* Icon */
  --toolbar-button-icon-size: var(--admin-toolbar-space-20);
}
.toolbar-button {
  z-index: 1;
  flex-grow: 0;
  align-items: center;
  min-height: var(--admin-toolbar-space-40);
  cursor: pointer;
  text-align: start;
  -webkit-text-decoration: none;
  text-decoration: none;
  overflow-wrap: break-word;
  color: var(--toolbar-button-color);
  border: 0;
  border-radius: var(--admin-toolbar-space-8);
  background-color: var(--toolbar-button-bg);
  font-size: var(--admin-toolbar-font-size-info-sm);
  line-height: var(--admin-toolbar-line-height-info-sm);
  padding-inline: var(--admin-toolbar-space-16);
  padding-block: var(--admin-toolbar-space-10);
  font-variation-settings: "wght" 700;
  gap: calc(0.5 * var(--admin-toolbar-rem));
}
.toolbar-button:has(+ .toolbar-popover__wrapper .is-active) {
  color: var(--toolbar-button-has-active-child-color);
  background-color: var(--toolbar-button-has-active-child-bg);
}
:is(.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber), .toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber)) .toolbar-button__icon {
  fill: transparent;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e  %3cstyle%3e    %40keyframes spinner%7bto%7btransform:rotate(360deg)%7d%7d  %3c/style%3e  %3cpath d='M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1Zm0 19a8 8 0 1 1 8-8 8 8 0 0 1-8 8Z' opacity='.25'/%3e  %3cpath d='M10.14 1.16a11 11 0 0 0-9 8.92A1.59 1.59 0 0 0 2.46 12a1.52 1.52 0 0 0 1.65-1.3 8 8 0 0 1 6.66-6.61A1.42 1.42 0 0 0 12 2.69a1.57 1.57 0 0 0-1.86-1.53Z' style='animation:spinner .75s infinite linear' transform-origin='center'/%3e%3c/svg%3e");
}
:is(.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber), .toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber)) + .ajax-progress--throbber,
:is(.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber), .toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber)) + .ajax-progress-throbber {
  display: none;
}
.toolbar-button:hover {
  z-index: 20;
  color: var(--toolbar-button-hover-color);
  outline: 2px solid var(--admin-toolbar-color-blue-200);
  outline-offset: var(--toolbar-button-outline-offset);
  background-color: var(--toolbar-button-hover-bg);
}
.toolbar-button:focus {
  z-index: 10;
  color: var(--toolbar-button-focus-color);
  outline: 2px solid var(--admin-toolbar-color-focus);
  outline-offset: var(--toolbar-button-outline-offset);
}
.toolbar-button.current {
  color: var(--toolbar-button-current-color);
  background-color: var(--toolbar-button-current-bg);
}
/* Dark color modifier for submenus title */
.toolbar-button--dark {
  color: var(--admin-toolbar-color-gray-990);
}
.toolbar-button--large {
  padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);
  font-size: var(--admin-toolbar-font-size-info-lg);
  line-height: var(--admin-toolbar-line-height-info-lg);
}
.toolbar-button--non-interactive:hover,
.toolbar-button--non-interactive:focus,
.toolbar-button--non-interactive:hover:focus {
  z-index: 1;
  cursor: auto;
  color: var(--toolbar-button-color);
  outline: 0;
  background-color: var(--toolbar-button-bg);
}
.toolbar-button--small-offset {
  --toolbar-button-outline-offset: calc(-1 * var(--admin-toolbar-space-4));
}
/* Class starts with `toolbar-button--icon`  */
[class*="toolbar-button--icon"] {
  padding-inline: var(--admin-toolbar-space-10);
}
[class*="toolbar-button--icon"]:not(:has(.toolbar-button__icon))::before {
  flex-shrink: 0;
  content: attr(data-icon-text) / "";
  text-align: center;
  color: currentColor;
  font-size: calc(0.75 * var(--admin-toolbar-rem));
  inline-size: var(--toolbar-button-icon-size);
}
.toolbar-button--primary {
  --toolbar-button-color: var(--admin-toolbar-color-white);
  --toolbar-button-bg: var(--admin-toolbar-color-blue-450);
  --toolbar-button-hover-color: var(--admin-toolbar-color-white);
  --toolbar-button-hover-bg: var(--admin-toolbar-color-blue-600);
  --toolbar-button-focus-color: var(--admin-toolbar-color-white);
}
.toolbar-button--weight--400 {
  font-variation-settings: "wght" 400;
}
/* Set 0 specificity */
:where(.toolbar-button) {
  display: flex;
  flex-grow: 1;
}
.toolbar-button--expand--down[aria-expanded="true"]:focus,
.toolbar-button--expand--down[aria-expanded="true"]:hover {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
[dir="ltr"] .toolbar-button--icon--announcements-feed-announcement .toolbar-button__icon {
  scale: -1 1;
}
.toolbar-button--collapsible .toolbar-button__chevron {
  display: none;
}
.toolbar-button--collapsible .toolbar-button__label {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  white-space: nowrap;
  clip-path: inset(50%);
  opacity: 0;
}
:is([data-admin-toolbar="expanded"] .toolbar-button--collapsible) .toolbar-button__chevron {
  display: block;
}
:is([data-admin-toolbar="expanded"] .toolbar-button--collapsible) .toolbar-button__label {
  position: relative;
  clip: revert;
  width: auto;
  height: auto;
  white-space: wrap;
  clip-path: none;
  opacity: 1;
}
:is([data-admin-toolbar-animating] .toolbar-button--collapsible) .toolbar-button__label {
  display: none;
}
.toolbar-button__chevron {
  flex-shrink: 0;
  margin-inline-start: auto;
  transition: rotate var(--admin-toolbar-transition);
  fill: currentColor;
  block-size: var(--admin-toolbar-space-16);
  inline-size: var(--admin-toolbar-space-16);
}
:where([dir="rtl"]) .toolbar-button__chevron {
  rotate: 180deg;
}
.toolbar-button--expand--down .toolbar-button__chevron {
  rotate: 90deg;
}
.toolbar-button--expand--down[aria-expanded="true"] .toolbar-button__chevron {
  rotate: -90deg;
}
.toolbar-button__icon {
  fill: currentColor;
  flex-shrink: 0;
  inline-size: var(--toolbar-button-icon-size);
  block-size: var(--toolbar-button-icon-size);
}