// Lightning Design System 2.8.0
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

@import "../mixins/index";

/**
 * @summary Navigation bar wrapper
 *
 * @name navigation-bar
 * @selector .slds-context-bar
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-context-bar {
  display: flex;
  height: $height-context-bar;
  background-color: $color-background-context-bar;
  border-bottom: 3px solid $brand-primary;
  color: $color-text-default;
  position: relative;
  padding: 0 0 0 $spacing-large;

  /**
   * Primary zone
   *
   * @selector .slds-context-bar__primary
   * @restrict .slds-context-bar div
   */
  &__primary,
  &__secondary,
  &__tertiary {
    display: flex;
    flex-shrink: 0;
  }


  /**
   * Secondary zone
   *
   * @selector .slds-context-bar__secondary
   * @restrict .slds-context-bar nav, .slds-context-bar div
   */
  // Context nav items go in the secondary region
  // and secondary region needs to respect the width
  // of the context bar parent for JavaScript to work
  // This is how to do that in CSS
  &__secondary {
    flex: 1 1 0%;
    min-width: 0;
  }

  /**
   * Manually add a vertical divider between elements
   *
   * @selector .slds-context-bar__vertical-divider
   * @restrict .slds-context-bar div
   */
  &__vertical-divider {
    width: 0;
    overflow: hidden;
    border-left: $border-width-thin solid $color-border;
  }

  /** Any item on the horizontal axis of the context nav bar
   *
   * Interactions such as hovers + active are defaults, bottom of the
   * file deals with light / dark theme thresholds
   *
   * @selector .slds-context-bar__item
   * @restrict .slds-context-bar div, .slds-context-bar li
   */
  &__item {
    display: flex;
    align-content: center;
    align-items: stretch;
    white-space: nowrap;
    position: relative;
    max-width: $size-small;
    transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);

    /**
     * Active state of an item
     *
     * @selector .slds-is-active
     * @restrict .slds-context-bar__item:not(.slds-no-hover)
     * @modifier
     */
    &:not(.slds-no-hover):hover,
    &.slds-is-active {
      outline: 0;
      border-radius: 0;
      background-color: $brand-primary-transparent-10;
      text-decoration: none;
      cursor: pointer;
    }

    &:not(.slds-no-hover):hover:after {
      content: '';
      width: 100%;
      height: 3px;
      display: block;
      background: rgba(0, 0, 0, 0.25);
      position: absolute;
      bottom: -3px;
      left: 0;
      right: 0;

      @supports (mix-blend-mode: soft-light) {
        background: rgba(0, 0, 0, 0.75);
        mix-blend-mode: soft-light;
      }
    }

    &:before {
      background: #fff;
      bottom: 0;
      content: '';
      height: auto;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      transition-property: top, background-color;
    }

    &.slds-is-active {
      animation: bkAnim 0.135s cubic-bezier(0.39, 0.575, 0.565, 1) both;

      @keyframes bkAnim {

        50% {
          background-color: $color-background-context-bar;
        }

        100% {
          background-color: $brand-primary-transparent-10;
        }
      }

      &:before {
        content: '';
        height: $globalnavigation-item-height-accent-active;
        display: block;
        background: $brand-primary;
        position: absolute;
        top: 0;
        left: -1px;
        right: -1px;
        animation: navBounceIn 0.15s cubic-bezier(0.39, 0.575, 0.565, 1) both;
      }

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

      &:hover {
        border-bottom-color: $brand-primary-transparent-10;
      }
    }

    /**
     * Toggled focused class applied via JavaScript
     *
     * @selector .slds-has-focus
     * @restrict .slds-context-bar__item
     * @modifier
     */
    &.slds-has-focus,
    &.slds-has-focus:hover {

      &:before,
      &:after {
        height: $globalnavigation-item-height-accent-focus;
      }
    }

    // Enforce background on items that have a notification
    &.slds-has-notification {
      background: $brand-primary-transparent-10;
    }

    @include tab-notification-pulsing-animation;

    /**
     * @summary Success notification on a tab
     *
     * @selector .slds-has-success
     * @restrict .slds-context-bar__item
     */
    &.slds-has-success {
      @include tab-notification-before($color-background-success-dark, $color-background-success-darker);

      &:before {
        animation-name: success-pulse;
      }
    }

    /**
     * @summary Error notification on a tab
     *
     * @selector .slds-has-error
     * @restrict .slds-context-bar__item
     */
    &.slds-has-error {
      @include tab-notification-before($color-background-destructive, $color-background-destructive-active);

      &:before {
        animation-name: error-pulse;
      }
    }

    &.slds-has-success,
    &.slds-has-error {

      .slds-context-bar__label-action {
        color: $color-gray-1;
      }

      .slds-indicator_unread {
        background-color: $color-gray-1;
      }

      .slds-indicator_unsaved {
        color: $color-gray-1;
      }
    }

    /**
     * @summary Warning notification on a tab
     *
     * @selector .slds-has-warning
     * @restrict .slds-context-bar__item
     */
    &.slds-has-warning {
      @include tab-notification-before($color-background-warning, $color-background-warning-dark);

      &:before {
        animation-name: warning-pulse;
      }

      .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: $color-gray-11;
        position: absolute;
        height: $globalnavigation-item-height-accent-active;
        opacity: 0.4;
        top: 0;
        right: 0;
        left: 0;
      }
    }

    &.slds-has-success.slds-has-focus,
    &.slds-has-warning.slds-has-focus,
    &.slds-has-error.slds-has-focus {

      &:after {
        height: $globalnavigation-item-height-accent-focus;
      }
    }



    /**
     * Add a left border to a context bar item
     *
     * @selector .slds-context-bar__item_divider-left
     * @restrict .slds-context-bar div, .slds-context-bar li
     */
    &_divider-left,
    &--divider-left {
      border-left: $border-width-thin solid $color-border;
    }

    /**
     * Add a right border to a context bar item
     *
     * @selector .slds-context-bar__item_divider-right
     * @restrict .slds-context-bar div, .slds-context-bar li
     */
    &_divider-right,
    &--divider-right {
      border-right: $border-width-thin solid $color-border;
    }
  }

  /**
   * Actionable Text Links
   *
   * @selector .slds-context-bar__label-action
   * @restrict .slds-context-bar__item a, .slds-context-bar__item span, .slds-context-bar__item button
   */
  &__label-action {
    display: flex;
    align-content: center;
    align-items: center;
    flex-grow: 1;
    padding: 0 $spacing-small;
    border-radius: 0;
    min-width: 0%;
    color: inherit;
    font-size: $font-size-medium;
    z-index: 1;

    &:focus,
    &:focus:hover {
      outline: 0;
      text-decoration: underline;
    }

    &:hover {
      text-decoration: none;
    }

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

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

  /**
   * Actionable Icons
   *
   * @selector .slds-context-bar__icon-action
   * @restrict .slds-context-bar div
   */
  &__icon-action {
    display: flex;
    align-items: center;
    align-content: center;
    margin-left: ($spacing-xx-small * -1);
    padding: 0 $spacing-x-small;
    color: $color-text-context-bar;
    border-radius: 0;
    flex-shrink: 0;

    &:focus {
      outline: 0;

      .slds-context-bar__button {
        @include focus-button;
      }

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

    &:hover,
    &:focus {
      color: $color-text-context-bar;
    }

    &:active {
      color: $color-text-context-bar;
    }

    .slds-icon-waffle_container {
      @include square($square-icon-large-content);
      margin: {
        right: $spacing-xx-small;
        left: ($spacing-x-small * -1);
      }
    }

    .slds-icon-waffle {
      margin: {
        right: auto;
        left: auto;
      }
    }
  }

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

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


  /**
   *
   * #### Accessibility
   *
   * **Communicating Status to Screen Readers**
   *
   * When communitcatin tab status updates to the user, unread, warning, error and success notifications should  all employ the same technique to communicate that update to users of assistive technology, who would be otherwise unaware of that status change.
   *
   * You should use a single hidden ARIA live region for the entire sub tabs block, the contents of which gets updated each time a sub tab changes its status. The contents should contain a description of the status level and the name of the tab the status change event occured in. The markup would look something like:
   *
   * `<div className="slds-assistive-text" aria-live="polite">...</div>`
   *
   * Upon clearing the status on a given tab, you should clear the message from the live region.

   * **Unread status**
   *
   * In order to inform screen readers of new activity in a tab, 2 things should occur.
   *
   * 1. The `title` attribute and `aria-label` on the element that displays the red dot should read **"New Activity"**. This will update the text content of the tab to include the "New Activity" text: "New Activity Chat - Customer".
   *
   * 2. The hidden live region as described above, should have its content updated to **"New Activity in Tab: [Tab Name Here]"** to alert the user of new activity in that particular sub tab.
   *
   * `<span aria-label="New Activity" className="slds-indicator_unread" title="New Activity"></span>`
   *
   * `<div className="slds-assistive-text" aria-live="polite">New activity in Tab: Chat - Customer</div>`
   *
   * **Warning, Error and Success Tabs**
   *
   * When you wish to draw attention to a particular tab because something has occurred in that tab that corresponds to an alert level, you can use the `slds-has-warning`, `slds-has-error` or `slds-has-success` class to change the background color and introduce a short pulsing animation to draw attention from the user.
   *
   * The icon is updated to match the corresponding alert level, to give an extra way to communicate the level of the status without relying on the use of color alone.
   *
   * In this example we show that something inside the tab is about to break a service level agreement in 30 seconds, and we wish to draw the users attention to it to take action.
   *
   * Update the hidden live region with a message that informs the user of the status level, the message and the offending sub tab **[level]: [message] in tab: [tab_name]**.
   *
   * `<div className="slds-assistive-text" aria-live="polite">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</div>`
   *
   * @summary Tab modifier when using a tabset
   *
   * @name navigation-tab-bar
   * @selector .slds-context-bar_tabs
   * @restrict .slds-context-bar
   * @support dev-ready
   * @variant
   */
  &_tabs,
  &--tabs {
    border-top: $border-width-thin solid $color-border;
  }

  /**
   * @summary Context bar tab items
   *
   * @selector .slds-context-bar__item_tab
   * @restrict .slds-context-bar_tabs .slds-context-bar__item
   * @notes Only use on tabset version
   * @required
   *
   */
  &__item_tab,
  &__item--tab {
    width: $size-x-small;
    border-right: $border-width-thin solid $color-border;

    .slds-context-bar__label-action {
      padding: 0 $spacing-x-small;
    }

    /**
     * @summary Pinned state - toggles visibility of elements inside of tab
     *
     * @selector .slds-is-pinned
     * @restrict .slds-context-bar__item_tab
     * @modifier
     */
    &.slds-is-pinned {
      width: auto;
      padding-right: $spacing-x-small;

      .slds-context-bar__label-action {
        padding: 0 $spacing-x-small;
      }
    }
  }

  /**
   * @summary Dirty state for a nav item
   * @selector .slds-is-unsaved
   * @restrict .slds-context-bar__item, .slds-dropdown__item
   */
  .slds-is-unsaved {

    .slds-context-bar__label-action {
      position: relative;
      font-style: italic;
      line-height: normal;
    }

    .slds-indicator_unread {
      margin-left: -0.35rem; // Random but matches spec
    }
  }

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

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

/**
 * @summary Modifier that notifies a parent component that it has sub tabs inside of it
 * @selector .slds-has-sub-tabs
 * @restrict .slds-context-bar__item_tab
 */
.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;

  &:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 3px;
    width: 100%;
    background-color: $color-background-context-bar;
    border: 0;
    mix-blend-mode: unset;
  }
}

/**
 * Unsaved indicator - This can probably be used in other locations as well
 *
 * @selector .slds-indicator_unsaved
 * @restrict .slds-context-bar__item span, abbr
 */
.slds-indicator_unsaved,
.slds-indicator--unsaved {
  color: $color-text-brand;
  align-self: center;
  position: relative;
}

// 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
 *
 * @selector .slds-context-bar__app-name
 * @restrict .slds-context-bar__label-action
 */
.slds-context-bar__app-name {
  padding: 0 $spacing-large 0 0;
  font-size: $font-size-6;
  line-height: $line-height-heading;
}

/**
 * Styles for object switcher region
 *
 * @selector .slds-context-bar__object-switcher
 * @restrict .slds-context-bar__item
 * @required
 */
.slds-context-bar__object-switcher {
  min-width: rem(144px); // @todo tokenize
  max-width: $size-x-small;
  border-left: $border-width-thin solid $color-border;
  border-right: $border-width-thin solid $color-border;
}

// Themes - Pre-defined themes
// Using mixin to determine text color and interactive states
//
// Marketing - temp
.slds-context-bar_theme-marketing,
.slds-context-bar--theme-marketing {
  border-bottom-color: #f59331;

  .slds-context-bar__item:not(.slds-no-hover):hover {
    border-bottom-color: #f59331;
  }

  .slds-context-bar__item.slds-is-active {

    &:before {
      background: #f59331;
    }
  }
}

/**
 * @summary Used to reserve spacing for tab indicators
 *
 * @selector .slds-indicator-container
 * @restrict .slds-context-bar__item span, .slds-sub-tabs__item span
 */
.slds-indicator-container {
  display: inline;
  margin-right: $spacing-xx-small;

  &:empty {
    margin-right: 0;
  }
}