/*
 * 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;
  height: 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 {
    transform: none;
  }
}
@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-500);
  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-blue-700);
}
.admin-toolbar__expand-button::before {
  display: block;
  flex-shrink: 0;
  width: calc(1 * var(--admin-toolbar-rem));
  height: calc(1 * var(--admin-toolbar-rem));
  content: "";
  transition:
    opacity var(--admin-toolbar-transition),
    transform var(--admin-toolbar-transition);
  opacity: 0;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: 100% auto;
  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");
}
[data-admin-toolbar-transitions] .admin-toolbar__expand-button::before {
  opacity: 1;
}
[dir="rtl"] .admin-toolbar__expand-button::before {
  transform: rotate(180deg);
}
@media (forced-colors: active) {
  .admin-toolbar__expand-button::before {
    background: canvastext;
  }
}
.admin-toolbar__expand-button[aria-expanded="true"]::before {
  transform: rotate(180deg);
}
[dir="rtl"] .admin-toolbar__expand-button[aria-expanded="true"]::before {
  transform: none;
}
@media (min-width: 64rem) {
  .admin-toolbar__expand-button {
    display: flex;
  }
}
.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;
}
/**
 * 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-16);
  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);
}
@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-admin-toolbar="expanded"] :is([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: rgba(0, 0, 0, 0.14);
}
:where([data-admin-toolbar="expanded"]) .admin-toolbar-overlay {
  display: block;
}
@media (min-width: 64rem) {
  .admin-toolbar-overlay {
    display: none;
  }
}
