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

/**
 * 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.
 */
.slds-utility-bar_container {
  position: relative;
}

/**
 * Fixed bar at the bottom of viewport, contains items
 */
.slds-utility-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2.5rem;
  background: var(--slds-g-color-surface-1);
  box-shadow: var(--slds-g-shadow-blockstart-2);
  z-index: 4;

  /**
   * Notification indicator
   */
  .slds-indicator_unread {
    width: 8px;
    height: 8px;
    top: var(--slds-g-spacing-2);
    position: absolute;
    inset-inline-start: var(--slds-g-spacing-2);
    display: block;
    border-radius: var(--slds-g-radius-border-circle);
    background: var(--slds-g-color-error-1);
    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-surface-1);
  }
}

/**
 * Items that invoke specific utility bar panel
 */
.slds-utility-bar__item {
  display: flex;
  margin-inline-end: 1px;
}

/**
 * Modifier to add pop out element
 */
.slds-utility-bar__item_pop-out {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    height: 4px;
    width: 4px;
    border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-surface-3);
    border-inline-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-surface-3);
    z-index: 1;
  }

  &::after {
    content: '';
    position: absolute;
    top: 2px;
    inset-inline-end: 6px;
    height: 7px;
    width: 7px;
    border-inline-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-on-surface-3);
    transform: rotate(45deg);
  }

  [dir='rtl'] &::after {
    transform: rotate(-45deg);
  }
}
/**
 * Button that invokes utility panel
 */
.slds-utility-bar__action {
  position: relative;
  display: inline-flex;
  gap: var(--slds-g-spacing-1);
  align-items: center;
  padding: 0 var(--slds-g-spacing-3);
  border-radius: 0;
  border: 0;
  color: var(--_slds-c-utilitybar-color, var(--slds-g-color-on-surface-3));
  font-weight: var(--_slds-c-utilitybar-font-weight);

  .slds-icon {
    fill: currentColor;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 0;
    background: transparent;
  }

  &:focus,
  &:hover {
    box-shadow: none;
    background: var(--_slds-c-utilitybar-color-background-hover);
    color: var(--_slds-c-utilitybar-color-hover, inherit);
  }

  &:hover::after {
    background: var(--_slds-c-utilitybar-color-border-hover);
    height: var(--_slds-c-utilitybar-sizing-border-hover);
  }

  &:focus::after {
    background: var(--_slds-c-utilitybar-color-border-hover);
    /* Height changes to active height when focused in SLDS, repurposing here */
    height: var(--_slds-c-utilitybar-sizing-border-active);
  }

  &.slds-is-active {
    background: var(--_slds-c-globalnavigation-item-color-background-active);
    color: var(--_slds-c-utilitybar-color-active, inherit);
  }

  &.slds-is-active::after {
    background: var(--_slds-c-utilitybar-color-border-active);
    height: var(--_slds-c-utilitybar-sizing-border-active);
  }

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

/**
 * Container for utility bar item text, allows for multi-line text output
 */
.slds-utility-bar__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-align: start;
}

/**
 * Creates styles for a utility bar item when it has a notification within its panel
 */
.slds-utility-bar__item.slds-has-notification .slds-utility-bar__action {
  background: var(--slds-g-color-info-container-1);
  color: var(--slds-g-color-on-info-1);

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

  &:hover,
  &:focus {
    background: var(--slds-g-color-surface-container-inverse-2);
    color: var(--slds-g-color-on-surface-inverse-1);

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

/**
 * Container of the utility panel
 */
.slds-utility-panel {
  position: fixed;
  bottom: 1.875rem;
  width: 21.25rem;
  height: 30rem;
  border-radius: var(--slds-s-container-radius-border) var(--slds-s-container-radius-border) 0 0;
  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  border-bottom: none;
  background: var(--slds-g-color-surface-container-1);
  transform: translateY(100%);

  &.slds-is-open {
    box-shadow: var(--slds-g-shadow-3);
    transform: translateY(0);
  }
}

/**
  * Header that contains an icon, title and panel actions such as minimizing the panel
  */
.slds-utility-panel__header {
  background: var(--slds-g-color-surface-container-1);
  border-bottom: var(--slds-g-sizing-border-2) solid var(--slds-g-color-accent-1);
  border-radius: var(--slds-s-container-radius-border) var(--slds-s-container-radius-border) 0 0;
  padding: var(--slds-g-spacing-2) var(--slds-g-spacing-3);
  font-size: var(--slds-s-container-heading-font-size, var(--slds-g-font-scale-1));
  font-weight: var(--slds-s-container-heading-font-weight);
  color: var(--slds-g-color-on-surface-3);

  .slds-icon {
    fill: currentColor;
  }

  .slds-button_icon:focus-visible {
    box-shadow: var(--slds-g-shadow-outline-focus-1);
  }
}

/**
  * Area that contains the utility panel feature
  */
.slds-utility-panel__body {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  overflow: auto;
}