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

/**
 * Fixed bar at the bottom of viewport, that contains items.
 *
 * If the utility bar item is active and its panel is popped open in a new window, use `.slds-utility-bar__item_pop-out` on the
 * `.slds-utility-bar__item`. This will add a visual indicator to communicate that the panel is opened in a new window.
 *
 * @summary Fixed bar at the bottom of viewport, that contains items
 * @name base
 * @selector .slds-utility-bar_container
 * @restrict footer
 * @support dev-ready
 * @variant
 */
.slds-utility-bar_container {
  position: relative;
}

/**
 * Fixed bar at the bottom of viewport, contains items
 *
 * @selector .slds-utility-bar
 * @restrict .slds-utility-bar_container ul
 */
.slds-utility-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: $height-docked-bar;
  background: var(--slds-g-color-neutral-base-100, #{$color-background-docked-panel});
  box-shadow: $shadow-docked;
  z-index: $z-index-docked;

  /**
   * Notification indicator
   *
   * @selector .slds-indicator_unread
   * @restrict .slds-utility-bar abbr
   */
  .slds-indicator_unread,
  .slds-indicator--unread {
    background: var(--slds-g-color-error-base-40, #{$utility-bar-color-background-notification-badge});
    top: $spacing-x-small;
    border: $border-width-thin solid var(--slds-g-color-neutral-base-95);
  }
}

/**
 * Items that invoke specific utility bar panel
 *
 * @selector .slds-utility-bar__item
 * @restrict .slds-utility-bar li
 */
.slds-utility-bar__item {
  display: flex;
  margin-right: $border-width-thin;
}

/**
 * @name pop-out
 * @summary Modifier to add pop out element
 * @selector .slds-utility-bar__item_pop-out
 * @restrict .slds-utility-bar__item
 * @modifier
 * @group feedback
 */
.slds-utility-bar__item_pop-out {
  position: relative;

  &:before {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    height: 4px;
    width: 4px;
    border-top: $border-width-thin solid var(--slds-g-color-neutral-base-10, #{$color-text-default});
    border-right: $border-width-thin solid var(--slds-g-color-neutral-base-10, #{$color-text-default});

    // Lots of 'noflip' going on here so we handle RTL within SLDS only, not Omakase
    //   - Omakase doesn't pick up on 'transform' which creates a visual regression in this scenario
    //   - Icon doesn't get flipped in standard SLDS because its a pseudo element
    @include rtl() {
      /*! @noflip */
      right: auto;

      /*! @noflip */
      left: 4px;

      /*! @noflip */
      border-right-width: 0;

      /*! @noflip */
      border-left: $border-width-thin solid var(--slds-g-color-neutral-base-10, #{$color-text-default});
    }
  }

  &:after {
    content: '';
    position: absolute;
    top: 2px;
    right: 6px;
    height: 7px;
    width: 7px;
    border-right: $border-width-thin solid var(--slds-g-color-neutral-base-10, #{$color-text-default});
    transform: rotate(45deg);

    @include rtl() {
      /*! @noflip */
      right: auto;

      /*! @noflip */
      left: 6px;

      /*! @noflip */
      border-right-width: 0;

      /*! @noflip */
      border-left: $border-width-thin solid var(--slds-g-color-neutral-base-10, #{$color-text-default});
      transform: rotate(-45deg);
    }
  }
}

/**
 * Button that invokes utility panel
 *
 * @selector .slds-utility-bar__action
 * @restrict .slds-utility-bar button
 */
.slds-utility-bar__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 $spacing-small;
  border-radius: 0;
  border: 0;
  color: var(--slds-g-color-neutral-base-10, #{$color-text-default});

  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
  }

  &:focus-visible,
  &:hover {
    box-shadow: none;
    outline: none;
  }

  &:focus {
    box-shadow: var(--slds-g-shadow-inset-focus-1);
    outline: 0;
  }

  &:hover,
  &:focus {
    background: $brand-primary-transparent-10;
    color: inherit;
  }

  /**
   * @selector .slds-is-active
   * @restrict .slds-utility-bar__action
   * @modifier
   */
  &.slds-is-active {
    background: $brand-primary-transparent-10;
    color: inherit;

    &:after {
      background: $brand-primary;
    }
  }
}

/**
 * Container for utility bar item text, allows for multi-line text output
 *
 * @selector .slds-utility-bar__text
 * @restrict .slds-utility-bar__action > span
 */
.slds-utility-bar__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-align: left;
}

/**
 * Creates styles for a utility bar item when it has a notification within its panel
 *
 * @selector .slds-has-notification
 * @restrict .slds-utility-bar__item
 */
.slds-has-notification {

  .slds-utility-bar__action {
    background: var(--slds-g-color-neutral-base-50, #{$color-background-info});
    color: var(--slds-g-color-neutral-base-100, #{$color-text-inverse});

    &:hover,
    &:focus {
      background: var(--slds-g-color-brand-base-20, #{$color-background-alt-inverse});
    }

    &:focus:after {
      background: var(--slds-g-color-neutral-base-80, #{$utility-bar-color-background-notification-focus});
    }
  }
}