/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/**
 * @summary Navigation bar wrapper
 */
.slds-context-bar {
  display: flex;
  height: var(--slds-s-navigation-sizing-height, 2.5rem);
  background-color: var(--slds-g-color-surface-container-1);
  border-bottom: var(--_slds-c-globalnavigation-sizing-border, 3px) solid var(--slds-g-color-accent-2);
  color: var(--slds-g-color-on-surface-3);
  position: relative;
  padding-block-start: var(--_slds-c-globalnavigation-spacing-block, 0);
  padding-block-end: var(--_slds-c-globalnavigation-spacing-block, 0);

  /* Button inside of actionable container */
  .slds-context-bar__button {
    color: inherit;
  }

  /* Need to reset styles from default */
  .slds-context-bar__icon-action {
    margin-inline-start: auto;
  }

  /**
   * @summary Dirty state for a nav item
   */
  .slds-is-unsaved {
    .slds-context-bar__label-action {
      position: relative;
      font-style: italic;
      line-height: normal;
    }

    .slds-indicator_unread {
      margin-inline-start: -0.35rem;
    }
  }

  /**
  * @summary Notifications style - Styling a tab or overflow item to indicate the tab has unread activity
  */
  .slds-has-notification {
    /**
      * @summary Unread notification icon
      */
    .slds-indicator_unread {
      display: inline-block;
      flex-shrink: 0;
      height: 6px;
      width: 6px;
      inset-inline-start: auto;
      position: relative;
      top: auto;
    }

    .slds-indicator_unsaved {
      top: rem(-4px);
    }
  }
}

/**
  * Primary zone
  */
.slds-context-bar__primary,
.slds-context-bar__secondary,
.slds-context-bar__tertiary {
  display: flex;
  flex-shrink: 0;
}

.slds-context-bar__primary {
  padding-inline-start: var(--slds-g-spacing-4);
}

/**
  * Secondary zone
  */
.slds-context-bar__secondary {
  flex: 1 1 0%;
  min-width: 0;
  gap: var(--_slds-c-globalnavigation-spacing-gap, 0);

  .slds-grid {
    gap: inherit;
  }
}

/**
  * Manually add a vertical divider between elements
  */
.slds-context-bar__vertical-divider {
  width: 0;
  overflow: hidden;
  border-inline-start: 1px solid var(--slds-g-color-border-1);
}

/**
 * Any item on the horizontal axis of the context nav bar
 */
.slds-context-bar__item {
  display: flex;
  align-content: center;
  align-items: stretch;
  white-space: nowrap;
  position: relative;
  border-radius: var(--_slds-c-globalnavigation-item-radius-border, 0);
  max-width: var(--_slds-c-globalnavigation-item-sizing-width-max, var(--slds-g-sizing-14));
  transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);

  &:not(.slds-no-hover):has(:focus-visible):not(:has(.slds-button:focus-visible)) {
    outline: var(--slds-g-sizing-border-2) solid var(--slds-s-link-outline-color);
    outline-offset: -6px;
  }

  .slds-button__icon,
  .slds-icon {
    fill: var(--slds-g-color-on-surface-1);
  }

  /**
    * Active state of an item
    */
  &:not(.slds-no-hover):hover {
    outline: 0;
    background-color: var(
      --_slds-c-globalnavigation-item-color-background-hover,
      var(--slds-g-color-accent-light-1)
    ) !important;
    text-decoration: none;
    cursor: pointer;
  }

  &:not(.slds-no-hover):hover::after {
    opacity: 1;
  }

  &::before {
    bottom: 0;
    content: '';
    height: auto;
    inset-inline-start: 0;
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    transition-property: top, background-color;
  }

  &::after {
    content: '';
    width: 100%;
    height: var(--_slds-c-globalnavigation-item-sizing-border-hover, 3px);
    display: block;
    background: var(
      --_slds-c-globalnavigation-item-color-border-hover,
      color-mix(in oklab, var(--slds-g-color-accent-2) 80%, black)
    );
    position: absolute;
    bottom: calc(var(--_slds-c-globalnavigation-item-sizing-border-hover, 3px) * -1);
    border-radius: var(--_slds-c-globalnavigation-item-radius-border, 0);
    inset-inline-start: 0;
    inset-inline-end: 0;
    opacity: 0;
  }

  &.slds-is-active {
    background-color: var(
      --_slds-c-globalnavigation-item-color-background-active,
      var(--slds-g-color-accent-light-1)
    ) !important;
    color: var(--_slds-c-globalnavigation-item-color-active, var(--slds-g-color-on-surface-3));
    text-decoration: none;
    cursor: pointer;
    animation: bkAnim 0.135s cubic-bezier(0.39, 0.575, 0.565, 1) both;

    &::before {
      content: '';
      height: var(--_slds-c-globalnavigation-item-sizing-border-active, 3px);
      display: block;
      background: var(--slds-g-color-accent-2);
      position: absolute;
      top: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
      animation: navBounceIn 0.15s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    }

    &::after {
      opacity: 1;
      background: var(--_slds-c-globalnavigation-item-color-border-active, var(--slds-g-color-accent-2));
    }

    .slds-button__icon,
    .slds-icon {
      fill: var(--_slds-c-globalnavigation-item-color-active, var(--slds-g-color-on-surface-1));
    }
  }

  /* Enforce background on items that have a notification */
  &.slds-has-notification {
    background: var(--slds-g-color-accent-container-1);
  }

  @keyframes error-pulse {
    0% {
      background-color: var(--slds-g-color-error-container-1);
    }

    40% {
      background-color: var(--slds-g-color-error-container-2);
    }

    100% {
      background-color: var(--slds-g-color-error-container-1);
    }
  }

  @keyframes success-pulse {
    0% {
      background-color: var(--slds-g-color-success-container-1);
    }

    40% {
      background-color: var(--slds-g-color-success-container-2);
    }

    100% {
      background-color: var(--slds-g-color-success-container-1);
    }
  }

  @keyframes warning-pulse {
    0% {
      background-color: var(--slds-g-color-warning-container-1);
    }

    40% {
      background-color: var(--slds-g-color-warning-base-80);
    }

    100% {
      background-color: var(--slds-g-color-warning-container-1);
    }
  }

  /**
    * @summary Success notification on a tab
    */
  &.slds-has-success {
    .slds-context-bar__label-action {
      color: var(--slds-g-color-on-success-1);
    }

    .slds-button__icon,
    .slds-icon {
      fill: var(--slds-g-color-on-success-1, var(--slds-g-color-on-surface-1));
    }

    &::before {
      animation: none;
      animation-duration: 1s;
      animation-iteration-count: 3;
      animation-delay: 150ms;
      animation-timing-function: cubic-bezier(0.07, 0.49, 0.5, 1);
      background-color: var(--slds-g-color-success-container-1);
      bottom: 0;
      content: '';
      height: auto;
      inset-inline-start: 0;
      position: absolute;
      inset-inline-end: 0;
      top: 0;
      transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
      animation-name: success-pulse;
    }

    &:hover {
      &::before {
        background-color: var(--slds-g-color-success-container-2);
        height: auto;
      }
    }

    &::after {
      background-color: var(--_slds-c-globalnavigation-item-color-border-success);
    }

    .slds-indicator_unread {
      background-color: var(--slds-g-color-neutral-base-100);
    }

    .slds-indicator_unsaved {
      color: var(--slds-g-color-neutral-base-100);
    }
  }

  /**
    * @summary Error notification on a tab
    */
  &.slds-has-error {
    .slds-context-bar__label-action {
      color: var(--slds-g-color-on-error-1);
    }

    .slds-button__icon,
    .slds-icon {
      fill: var(--slds-g-color-on-error-1, var(--slds-g-color-on-surface-1));
    }

    &::before {
      animation: none;
      animation-duration: 1s;
      animation-iteration-count: 3;
      animation-delay: 150ms;
      animation-timing-function: cubic-bezier(0.07, 0.49, 0.5, 1);
      background-color: var(--slds-g-color-error-container-1);
      bottom: 0;
      content: '';
      height: auto;
      inset-inline-start: 0;
      position: absolute;
      inset-inline-end: 0;
      top: 0;
      transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
      animation-name: error-pulse;
    }

    &:hover {
      &::before {
        background-color: var(--slds-g-color-error-container-2);
        height: auto;
      }
    }

    &::after {
      background-color: var(--_slds-c-globalnavigation-item-color-border-error);
    }

    .slds-indicator_unread {
      background-color: var(--slds-g-color-neutral-base-100);
    }

    .slds-indicator_unsaved {
      color: var(--slds-g-color-neutral-base-100);
    }
  }

  /**
    * @summary Warning notification on a tab
    */
  &.slds-has-warning {
    .slds-context-bar__label-action {
      color: var(--slds-g-color-on-warning-1);
    }

    .slds-button__icon,
    .slds-icon {
      fill: var(--slds-g-color-on-warning-1);
    }

    &::before {
      animation: none;
      animation-duration: 1s;
      animation-iteration-count: 3;
      animation-delay: 150ms;
      animation-timing-function: cubic-bezier(0.07, 0.49, 0.5, 1);
      background-color: var(--slds-g-color-warning-container-1);
      bottom: 0;
      content: '';
      height: auto;
      inset-inline-start: 0;
      position: absolute;
      inset-inline-end: 0;
      top: 0;
      transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
      animation-name: warning-pulse;
    }

    &:hover {
      &::before {
        background-color: var(--slds-g-color-warning-base-80);
        height: auto;
      }
    }

    &::after {
      background-color: var(--_slds-c-globalnavigation-item-color-border-warning);
    }

    .slds-indicator_unread {
      background-color: currentColor;
    }

    .slds-indicator_unsaved {
      color: currentColor;
    }
  }

  &.slds-has-success.slds-is-active,
  &.slds-has-warning.slds-is-active,
  &.slds-has-error.slds-is-active {
    &::after {
      content: '';
      background: var(--slds-g-color-neutral-base-30);
      position: absolute;
      height: 4px;
      opacity: 0.4;
      top: 0;
      inset-inline-end: 0;
      inset-inline-start: 0;
    }
  }

  &.slds-has-success.slds-has-focus,
  &.slds-has-warning.slds-has-focus,
  &.slds-has-error.slds-has-focus {
    &::after {
      height: 4px;
    }
  }

  &.slds-has-success,
  &.slds-has-warning,
  &.slds-has-error {
    &:not(.slds-no-hover):has(:focus-visible):not(:has(.slds-button:focus-visible))::before {
      box-shadow: var(--slds-g-shadow-inset-focus-1);
    }
  }
}

@keyframes bkAnim {
  50% {
    background-color: var(--slds-g-color-neutral-base-100);
  }

  100% {
    background-color: var(
      --_slds-c-globalnavigation-item-color-background-active,
      var(--slds-g-color-accent-light-1)
    );
  }
}

@keyframes navBounceIn {
  0% {
    transform: translate3d(0, 20px, 0);
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  90% {
    transform: translate3d(0, 1px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

/**
  * Add a left border to a context bar item
  */
.slds-context-bar__item_divider-left {
  border-inline-start: 1px solid var(--slds-g-color-border-1);
}

/**
  * Add a right border to a context bar item
  */
.slds-context-bar__item_divider-right {
  border-inline-end: 1px solid var(--slds-g-color-border-1);
}

/**
  * Actionable Text Links
  */
.slds-context-bar__label-action {
  display: flex;
  align-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 0 var(--slds-g-spacing-3);
  min-width: 0%;
  color: inherit;
  font-weight: var(--_slds-c-globalnavigation-font-weight, normal);
  z-index: 1;

  &:focus-visible,
  &:focus-visible:hover {
    outline: 0;
    text-decoration: var(--_slds-c-globalnavigation-font-decoration-focus, underline);
  }

  &:hover {
    text-decoration: none;
  }

  &:hover,
  &:focus {
    color: inherit;
  }

  &:active {
    color: inherit;
    text-decoration: none;
  }
}

/**
  * Actionable Icons
  */
.slds-context-bar__icon-action {
  display: flex;
  align-items: center;
  align-content: center;
  margin-inline-start: calc(var(--slds-g-spacing-1) * -1);
  padding: 0 var(--slds-g-spacing-2);
  color: var(--slds-g-color-on-surface-1);
  border-radius: 0;
  flex-shrink: 0;

  &:focus-visible {
    outline: 0;

    .slds-context-bar__button {
      outline: 0;
      box-shadow: var(--slds-g-shadow-outline-focus-1);
    }

    ~ .slds-dropdown {
      visibility: visible;
      opacity: 1;
    }
  }

  &:hover,
  &:focus {
    color: var(--slds-g-color-on-surface-1);
  }

  &:active {
    color: var(--slds-g-color-on-surface-1);
  }

  .slds-icon-waffle_container {
    width: 2rem;
    height: 2rem;
    margin-inline-end: var(--slds-g-spacing-1);
    margin-inline-start: calc(var(--slds-g-spacing-2) * -1);
  }

  .slds-icon-waffle {
    margin-inline-end: auto;
    margin-inline-start: auto;
  }
}

/* Context Bar dropdown trigger specifics */
.slds-context-bar__dropdown-trigger {
  .slds-dropdown {
    margin-top: 3px;

    /* Add a hoverable zone below the action so that the dropdown doesn't
    disappear when the mouse is between the action and the dropdown */
    &::before {
      content: '';
      position: absolute;
      bottom: 100%;
      width: 100%;
      height: 3px;
    }
  }
}

/**
 * Styles for application name region
 */
.slds-context-bar__app-name {
  padding-block: 0;
  padding-inline: 0 var(--slds-g-spacing-5);
  font-size: var(--slds-g-font-scale-3);
  font-weight: var(--_slds-c-globalnavigation-app-font-weight, normal);
  line-height: var(--slds-g-font-lineheight-2);
}

/**
 * Styles for object switcher region
 */
.slds-context-bar__object-switcher {
  min-width: 9rem;
  max-width: var(--slds-g-sizing-14);
  border-inline-start: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  border-inline-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  border-radius: 0;
}

/**
  * @summary Tab modifier when using a tabset
  */
.slds-context-bar_tabs {
  border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
}

.slds-context-bar_tabs .slds-context-bar__secondary {
  gap: 0;
}

/**
  * @summary Context bar tab items
  */
.slds-context-bar__item_tab {
  width: 12.5rem;
  border-inline-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  border-radius: 0;

  .slds-context-bar__label-action {
    padding: 0 var(--slds-g-spacing-2);
  }

  .slds-icon_container {
    --slds-c-icon-color-background: transparent;
    --slds-c-icon-color-foreground: var(--slds-g-color-on-surface-1);
  }

  /**
    * @summary Pinned state - toggles visibility of elements inside of tab
    */
  &.slds-is-pinned {
    width: auto;
    padding-inline-end: var(--slds-g-spacing-2);

    .slds-context-bar__label-action {
      padding: 0 var(--slds-g-spacing-2);
    }
  }
}

/**
 * @summary Modifier that notifies a parent component that it has subtabs inside of it
 */
.slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active,
.slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active:hover {
  animation: none;
  background-color: transparent !important;

  .slds-context-bar__label-action::after {
    content: '';
    display: block;
    position: absolute;
    inset-inline-start: 0;
    bottom: calc(var(--_slds-c-globalnavigation-item-sizing-border-active, 3px) * -1);
    height: var(--_slds-c-globalnavigation-item-sizing-border-active, 3px);
    width: 100%;
    background-color: var(--slds-g-color-surface-container-1);
    border: 0;
    mix-blend-mode: unset;
  }
}

/**
 * Unsaved indicator - This can probably be used in other locations as well
 */
.slds-indicator_unsaved {
  color: var(--slds-g-color-accent-2);
  align-self: center;
  position: relative;
}

/**
 * Used to reserve spacing for tab indicators
 */
.slds-indicator-container {
  display: inline;
  margin-inline-end: var(--slds-g-spacing-1);
}

.slds-indicator-container:empty {
  margin-inline-end: 0;
}

/* App Switcher */
.slds-icon-waffle_container {
  border: 0;
  outline: 0;
  padding: 0;
}
.slds-icon-waffle_container:hover .slds-r1,
.slds-icon-waffle_container:hover .slds-r2,
.slds-icon-waffle_container:hover .slds-r3,
.slds-icon-waffle_container:hover .slds-r4,
.slds-icon-waffle_container:hover .slds-r5,
.slds-icon-waffle_container:hover .slds-r6,
.slds-icon-waffle_container:hover .slds-r7,
.slds-icon-waffle_container:hover .slds-r8,
.slds-icon-waffle_container:hover .slds-r9,
.slds-icon-waffle_container:focus .slds-r1,
.slds-icon-waffle_container:focus .slds-r2,
.slds-icon-waffle_container:focus .slds-r3,
.slds-icon-waffle_container:focus .slds-r4,
.slds-icon-waffle_container:focus .slds-r5,
.slds-icon-waffle_container:focus .slds-r6,
.slds-icon-waffle_container:focus .slds-r7,
.slds-icon-waffle_container:focus .slds-r8,
.slds-icon-waffle_container:focus .slds-r9 {
  animation: slds-icon-waffle-throb 2 200ms alternate;
}
.slds-icon-waffle_container:hover .slds-r1,
.slds-icon-waffle_container:hover .slds-r2,
.slds-icon-waffle_container:hover .slds-r3,
.slds-icon-waffle_container:focus .slds-r1,
.slds-icon-waffle_container:focus .slds-r2,
.slds-icon-waffle_container:focus .slds-r3 {
  background-color: var(--slds-g-color-brand-base-50, #418fde);
}
.slds-icon-waffle_container:hover .slds-r4,
.slds-icon-waffle_container:hover .slds-r5,
.slds-icon-waffle_container:hover .slds-r7,
.slds-icon-waffle_container:focus .slds-r4,
.slds-icon-waffle_container:focus .slds-r5,
.slds-icon-waffle_container:focus .slds-r7 {
  background-color: var(--slds-g-color-warning-base-70, #ed8b00);
}
.slds-icon-waffle_container:hover .slds-r6,
.slds-icon-waffle_container:hover .slds-r8,
.slds-icon-waffle_container:hover .slds-r9,
.slds-icon-waffle_container:focus .slds-r6,
.slds-icon-waffle_container:focus .slds-r8,
.slds-icon-waffle_container:focus .slds-r9 {
  background-color: var(--slds-g-color-palette-yellow-80, #ffb60f);
}
.slds-icon-waffle_container:hover .slds-r2,
.slds-icon-waffle_container:hover .slds-r4,
.slds-icon-waffle_container:focus .slds-r2,
.slds-icon-waffle_container:focus .slds-r4 {
  transition-delay: 50ms;
  animation-delay: 50ms;
}
.slds-icon-waffle_container:hover .slds-r3,
.slds-icon-waffle_container:hover .slds-r5,
.slds-icon-waffle_container:hover .slds-r7,
.slds-icon-waffle_container:focus .slds-r3,
.slds-icon-waffle_container:focus .slds-r5,
.slds-icon-waffle_container:focus .slds-r7 {
  transition-delay: 100ms;
  animation-delay: 100ms;
}
.slds-icon-waffle_container:hover .slds-r6,
.slds-icon-waffle_container:hover .slds-r8,
.slds-icon-waffle_container:focus .slds-r6,
.slds-icon-waffle_container:focus .slds-r8 {
  transition-delay: 150ms;
  animation-delay: 150ms;
}
.slds-icon-waffle_container:hover .slds-r9,
.slds-icon-waffle_container:focus .slds-r9 {
  transition-delay: 200ms;
  animation-delay: 200ms;
}
.slds-icon-waffle {
  width: 1.3125rem;
  height: 1.3125rem;
  position: relative;
  display: block;
  cursor: pointer;
}
.slds-icon-waffle .slds-r1,
.slds-icon-waffle .slds-r2,
.slds-icon-waffle .slds-r3,
.slds-icon-waffle .slds-r4,
.slds-icon-waffle .slds-r5,
.slds-icon-waffle .slds-r6,
.slds-icon-waffle .slds-r7,
.slds-icon-waffle .slds-r8,
.slds-icon-waffle .slds-r9 {
  width: 0.3125rem;
  height: 0.3125rem;
  background-color: var(--slds-g-color-neutral-base-50, #747474);
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  transition: background-color 100ms;
  transform-origin: 50% 50%;
  will-change: scale, background-color;
}
.slds-icon-waffle .slds-r1 {
  top: 0;
  inset-inline-start: 0;
  transition-delay: 200ms;
}
.slds-icon-waffle .slds-r2 {
  top: 0;
  inset-inline-start: 0.5rem;
}
.slds-icon-waffle .slds-r3 {
  top: 0;
  inset-inline-end: 0;
}
.slds-icon-waffle .slds-r4 {
  top: 0.5rem;
  inset-inline-start: 0;
}
.slds-icon-waffle .slds-r5 {
  top: 0.5rem;
  inset-inline-start: 0.5rem;
}
.slds-icon-waffle .slds-r6 {
  top: 0.5rem;
  inset-inline-end: 0;
}
.slds-icon-waffle .slds-r7 {
  bottom: 0;
  inset-inline-start: 0;
}
.slds-icon-waffle .slds-r8 {
  bottom: 0;
  inset-inline-start: 0.5rem;
}
.slds-icon-waffle .slds-r9 {
  bottom: 0;
  inset-inline-end: 0;
}
.slds-icon-waffle .slds-r2,
.slds-icon-waffle .slds-r4 {
  transition-delay: 150ms;
}
.slds-icon-waffle .slds-r3,
.slds-icon-waffle .slds-r5,
.slds-icon-waffle .slds-r7 {
  transition-delay: 100ms;
}
.slds-icon-waffle .slds-r6,
.slds-icon-waffle .slds-r8 {
  transition-delay: 50ms;
}

@keyframes slds-icon-waffle-throb {
  to {
    transform: scale(1.5);
  }
}