core/modules/navigation/css/components/admin-toolbar.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 */
/**
 * @file
 * Admin Toolbar styles.
 */
/**
 * Sidebar width is attached to the <body> element because it's used as a
 * fallback value to the margin-inline-start property of the layout container.
 */
body {
  --admin-toolbar-sidebar-width: calc(4.5 * var(--admin-toolbar-rem));
  --admin-toolbar-sidebar-header: calc(3.5 * var(--admin-toolbar-rem));
}
[data-admin-toolbar="expanded"] body {
  --admin-toolbar-sidebar-width: 80vw;
}
@media (min-width: 35rem) {
  [data-admin-toolbar="expanded"] body {
    --admin-toolbar-sidebar-width: calc(16.5 * var(--admin-toolbar-rem));
  }
}
/* We apply transitions after page load to avoid shifts. */
[data-admin-toolbar-transitions] .admin-toolbar {
  transition: transform var(--admin-toolbar-transition);
}
@media (min-width: 64rem) {
  [data-admin-toolbar-transitions] .admin-toolbar {
    transition: width var(--admin-toolbar-transition);
  }

  :is([data-admin-toolbar-transitions] .admin-toolbar) ~ .dialog-off-canvas-main-canvas {
    transition: margin-inline-start var(--admin-toolbar-transition);
  }
}
/**
 * This zero height div has the [data-offset-left] attribute for
 * Drupal.displace() to measure. It purposefully does not have any transitions
 * because we want Drupal.displace() to measure the width immediately
 */
.admin-toolbar__displace-placeholder {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}
@media (min-width: 64rem) {
  .admin-toolbar__displace-placeholder {
    width: var(--admin-toolbar-sidebar-width);
  }
}
/**
 * The Admin toolbar component.
 */
.admin-toolbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--admin-toolbar-z-index);
  display: flex;
  flex-direction: column;
  block-size: 100vh;
  transform: translateX(-100%);
  background-color: var(--admin-toolbar-color-white);
  font-family: var(--admin-toolbar-font-family);
  inline-size: calc(var(--admin-toolbar-sidebar-width) + 1px);
}
[dir="rtl"] .admin-toolbar {
  right: 0;
  transform: translateX(100%);
}
@media (min-width: 64rem) {
  [dir="rtl"] .admin-toolbar {
    transform: none;
  }
}
@media (min-width: 64rem) {
  .admin-toolbar ~ .dialog-off-canvas-main-canvas {
    margin-inline-start: var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width));
  }

  [dir="rtl"] :is(.admin-toolbar ~ .dialog-off-canvas-main-canvas) {
    margin-inline-start: var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width));
  }
}
[data-admin-toolbar="expanded"] .admin-toolbar {
  transform: none;
}
@media (min-width: 64rem) {
  .admin-toolbar {
    block-size: calc(100vh - var(--drupal-displace-offset-top, 0px));
    transform: none;
    inset-block-start: 0;
  }
}
@media only screen and (max-height: 18.75rem) {
  .admin-toolbar {
    min-height: 20rem;
  }
}
.admin-toolbar__back-button {
  display: none;
  flex-grow: 0;
}
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__back-button {
  display: flex;
}
@media (min-width: 64rem) {
  .admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__back-button {
    display: none;
  }
}
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__logo {
  display: none;
}
@media (min-width: 64rem) {
  .admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__logo {
    display: inline-flex;
  }
}
.admin-toolbar__close-button {
  flex-grow: 0;
  justify-self: end;
  margin-inline-start: auto;
}
@media (min-width: 64rem) {
  .admin-toolbar__close-button {
    display: none;
  }
}
.admin-toolbar__expand-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: calc(2.25 * var(--admin-toolbar-rem));
  height: calc(2.25 * var(--admin-toolbar-rem));
  margin-inline-start: calc(0.125 * var(--admin-toolbar-rem));
  cursor: pointer;
  color: var(--admin-toolbar-color-gray-800);
  border: 1px solid var(--admin-toolbar-color-gray-300);
  border-radius: 50%;
  background-color: transparent;
}
.admin-toolbar__expand-button:hover {
  color: var(--admin-toolbar-color-gray-990);
}
@media (min-width: 64rem) {
  .admin-toolbar__expand-button {
    display: flex;
  }
}
.admin-toolbar__expand-button-chevron {
  flex-shrink: 0;
  fill: currentColor;
  width: calc(1 * var(--admin-toolbar-rem));
  height: calc(1 * var(--admin-toolbar-rem));
  transition:
    opacity var(--admin-toolbar-transition),
    rotate var(--admin-toolbar-transition);
  opacity: 0;
}
[data-admin-toolbar-transitions] .admin-toolbar__expand-button-chevron {
  opacity: 1;
}
[dir="rtl"] .admin-toolbar__expand-button-chevron {
  rotate: 180deg;
}
.admin-toolbar__expand-button[aria-expanded="true"] .admin-toolbar__expand-button-chevron {
  rotate: 180deg;
}
[dir="rtl"] :is(.admin-toolbar__expand-button[aria-expanded="true"] .admin-toolbar__expand-button-chevron) {
  rotate: 0deg;
}
.admin-toolbar__header {
  position: sticky;
  z-index: var(--admin-toolbar-z-index-header);
  inset-block-start: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: calc(var(--admin-toolbar-sidebar-header) * -1);
  padding-block-start: var(--admin-toolbar-space-16);
  background-color: var(--admin-toolbar-color-white);
}
.admin-toolbar__header + .toolbar-block {
  margin-block-start: calc(var(--admin-toolbar-space-10) * -1);
}
@media (min-width: 64rem) {
  .admin-toolbar__header + .toolbar-block {
    margin-block-start: 0;
  }
}
@media (min-width: 64rem) {
  .admin-toolbar__header:not(:has(.admin-toolbar__logo)) {
    display: none;
  }
}
@media (min-width: 64rem) {
  .admin-toolbar__header {
    position: static;
    align-items: start;
    margin-block-start: revert;
    padding-block-start: revert;
    padding-block-end: 0;
  }
}
.admin-toolbar__item {
  flex: 1 0 100%;
}
.admin-toolbar__logo {
  display: inline-flex;
  overflow: hidden;
  border-radius: var(--admin-toolbar-space-8);
}
.admin-toolbar__logo:hover {
  background-color: transparent;
}
.admin-toolbar__logo img {
  display: block;
  max-width: var(--admin-toolbar-space-40);
}
/**
 * Scroll wrapper for Mobile.
 */
.admin-toolbar__scroll-wrapper {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0));
  background-color: var(--admin-toolbar-color-white);
  background-repeat: no-repeat;
  background-attachment: local, scroll;
  background-position-y: 3rem;
  background-size:
    100% 2.5rem,
    100% 1rem;
}
@media (min-width: 64rem) {
  .admin-toolbar__scroll-wrapper {
    display: contents;
    overflow-y: unset;
    background: none;
  }
}
/**
 * Content region.
 * Region where most of the content will be printed.
 */
.admin-toolbar__content {
  display: grid;
  gap: var(--admin-toolbar-space-12);
  padding-block: var(--admin-toolbar-sidebar-header) var(--admin-toolbar-space-16);
  padding-inline: var(--admin-toolbar-space-16);
  border-inline-end: 1px solid var(--admin-toolbar-color-gray-100);
}
@media (min-width: 64rem) {
  .admin-toolbar__content {
    display: flex;
    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column;
    flex-grow: 1;
    padding-block-start: var(--admin-toolbar-space-16);
    background:
      linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)),
      linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%,
      radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)),
      radial-gradient(farthest-side at 50% 100%, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)) 0 100%;
    background-color: var(--admin-toolbar-color-white);
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
    background-size:
      100% 2.5rem,
      100% 2.5rem,
      100% 1rem,
      100% 1rem;
  }
}
/**
 * Sticky bottom region.
 * Region with less used items and button for collapse.
 */
.admin-toolbar__footer {
  z-index: var(--admin-toolbar-z-index-footer);
  display: grid;
  gap: var(--admin-toolbar-space-4);
  margin-block-start: auto;
  padding: var(--admin-toolbar-space-16);
  border-block-start: 1px solid var(--admin-toolbar-color-gray-200);
  border-inline-end: 1px solid var(--admin-toolbar-color-gray-100);
}
:is(.admin-toolbar__footer > .toolbar-block):last-of-type {
  margin-block-end: var(--admin-toolbar-space-12);
}
@media (min-width: 64rem) {
  .admin-toolbar__footer {
    --admin-toolbar-z-index-footer: -1;

    position: sticky;
    bottom: 0;
    background-color: var(--admin-toolbar-color-white);
  }
}
/**
 * Sidebar toggle.
 */
.admin-toolbar__toggle {
  display: none;
}
@media (min-width: 64rem) {
  .admin-toolbar__toggle {
    display: flex;
  }
}
[data-admin-toolbar="expanded"] :is([data-drupal-tooltip]:hover + .admin-toolbar__tooltip, [data-drupal-tooltip]:focus + .admin-toolbar__tooltip) {
  display: none;
}
/**
 * Element is used to overlay the content when Toolbar is expanded in smaller devices.
 * It is created in the template templates/navigation.html.twig.
 */
.admin-toolbar-overlay {
  position: fixed;
  z-index: var(--admin-toolbar-z-index-overlay);
  inset-block-start: 0;
  inset-inline-start: 0;
  display: none;
  width: 100vw;
  height: 100vh;
  background-color: rgb(0, 0, 0, 0.14);
}
:where([data-admin-toolbar="expanded"]) .admin-toolbar-overlay {
  display: block;
}
@media (min-width: 64rem) {
  .admin-toolbar-overlay {
    display: none;
  }
}
