toolbar-button.pcss.css

/* cspell:ignore csvg cpath wght */
/**
 * @file
 * Toolbar button styles.
 */

@import "../../css/base/media-queries.pcss.css";

[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;
    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);

      @media (forced-colors: active) {
        position: relative;

        &::before {
          position: absolute;
          inset-block-start: 0;
          inset-inline-end: calc(100% + 5px);
          width: 0;
          height: 100%;
          content: "";
          border-inline-start: solid 4px canvasText;
        }
      }
    }

    .top-bar__actions 

    &[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber),
    &[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber) {
      .toolbar-button__icon {
        fill: transparent;
        background-image: url(../../assets/icons/throbber.svg);
      }

      & + .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);

      @media (forced-colors: active) {
        position: relative;

        &::before {
          position: absolute;
          inset-block-start: 0;
          inset-inline-end: calc(100% + 5px);
          width: 0;
          height: 100%;
          content: "";
          border-inline-start: solid 4px canvasText;
        }
      }
    }
  }

  /* 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__label {
        position: relative;
        clip: revert;
        width: auto;
        height: auto;
        white-space: wrap;
        clip-path: none;
        opacity: 1;
      }
    }

    [data-admin-toolbar-animating] 
    }
  }

  .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--expand--down 

    .toolbar-button--expand--down[aria-expanded="true"] 
  }

  .toolbar-button__icon {
    --icon-color: currentColor;

    fill: var(--icon-color);
    flex-shrink: 0;
    inline-size: var(--toolbar-button-icon-size);
    block-size: var(--toolbar-button-icon-size);

    @media (forced-colors: active) {
      --icon-color: canvasText;

      &,
      path {
        &[fill]:not([fill="none"]) {
          fill: var(--icon-color);
        }

        &[stroke]:not([stroke="none"]) {
          stroke: var(--icon-color);
        }
      }
    }
  }

  button.toolbar-button .toolbar-button__icon {
    @media (forced-colors: active) {
      --icon-color: buttonText;
    }
  }

  a.toolbar-button .toolbar-button__icon {
    @media (forced-colors: active) {
      --icon-color: linkText;
    }
  }
}