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

.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);
  }

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

/* 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 {
  fill: currentColor;
  flex-shrink: 0;
  inline-size: var(--toolbar-button-icon-size);
  block-size: var(--toolbar-button-icon-size);
}