/*
 * 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);
}
:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  .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));

    &:has(+ .toolbar-popover__wrapper .is-active) {
      color: var(--toolbar-button-has-active-child-color);
      background-color: var(--toolbar-button-has-active-child-bg);
    }

    &[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber),
    &[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");
      }

      & + .ajax-progress--throbber,
      & + .ajax-progress-throbber {
        display: none;
      }
    }

    &: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);
    }

    &: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);
    }

    &.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,
    &:focus,
    &: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,
      &: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__label {
      position: absolute;
      overflow: hidden;
      clip: rect(0 0 0 0);
      width: 1px;
      height: 1px;
      white-space: nowrap;
      clip-path: inset(50%);
      opacity: 0;
    }

    [data-admin-toolbar="expanded"] & {
      & .toolbar-button__chevron {
        display: block;
      }

      & .toolbar-button__label {
        position: relative;
        clip: revert;
        width: auto;
        height: auto;
        white-space: wrap;
        clip-path: none;
        opacity: 1;
      }
    }

    [data-admin-toolbar-animating] & {
      & .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"]) & {
      rotate: 180deg;
    }

    .toolbar-button--expand--down & {
      rotate: 90deg;
    }

    .toolbar-button--expand--down[aria-expanded="true"] & {
      rotate: -90deg;
    }
  }

  .toolbar-button__icon {
    fill: currentColor;
    flex-shrink: 0;
    inline-size: var(--toolbar-button-icon-size);
    block-size: var(--toolbar-button-icon-size);
  }
}