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

/**
 * Container that fixes the global header to the top of the viewport,
 * contains global header element
 */
.slds-global-header_container {
  /* stylelint-disable */
  --_slds-c-globalheader-logo: var(--lwc-brandLogoImage);
  --_slds-c-globalheader-color-background: var(--slds-g-color-surface-container-1, #ffffff);
  --_slds-c-globalheader-buttonicon-color-active: var(--slds-g-color-on-surface-2, #2e2e2e);
  --_slds-c-globalheader-task-color-background-active: var(--slds-g-color-on-surface-2, #2e2e2e);
  --_slds-c-globalheader-favorites-color-border-hover: var(--slds-g-color-on-surface-2, #2e2e2e);
  --_slds-c-globalheader-buttonicon-color: var(--slds-g-color-on-surface-1, #5c5c5c);
  --_slds-c-globalheader-task-color-background: var(--slds-g-color-on-surface-1, #5c5c5c);
  --_slds-c-globalheader-favorites-color-border: var(--slds-g-color-on-surface-1, #5c5c5c);
  --_slds-c-globalheader-buttonicon-color-hover: var(--slds-g-color-on-surface-2, #2e2e2e);
  --_slds-c-globalheader-task-color-background-hover: var(--slds-g-color-on-surface-2, #2e2e2e);
  --_slds-c-globalheader-notificationbadge-color-background: var(--slds-g-color-palette-red-50, #ea001e);
  --_slds-c-globalheader-favorites-color-background-selected: var(--slds-g-color-accent-container-2, #014486);
  --_slds-c-globalheader-favorites-color-border-selected: var(--slds-g-color-border-accent-2, #014486);
  --_slds-c-globalheader-favorites-color-background-selected-hover: var(
    --slds-g-color-accent-container-3,
    #014486
  );
  --_slds-c-globalheader-favorites-color-border-selected-hover: var(--slds-g-color-border-accent-3, #014486);
  --_slds-c-globalheader-favorites-color-text-disabled: var(--slds-g-color-on-disabled-1, #c9c9c9);
  --_slds-c-globalheader-favorites-color-border-disabled: var(--slds-g-color-border-disabled-1, #c9c9c9);
  /* stylelint-enable */

  position: fixed;
  width: 100%;
  top: 0;
  inset-inline-start: 0;
  z-index: 100;

  /* Position for when assistive text becomes into focus */
  .slds-assistive-text_focus {
    top: 0;
    color: var(--slds-g-color-on-surface-1);
    background: var(--_slds-c-globalheader-color-background);
  }
}

.slds-global-header {
  background: var(--_slds-c-globalheader-color-background);
  box-shadow: var(--slds-g-shadow-1);
  padding: var(--slds-g-spacing-2) 0;
  height: var(--slds-s-header-sizing-height, 3.125rem);
  align-items: center;
}

/**
  * A region within the global header
  */
.slds-global-header__item {
  padding: 0 var(--slds-g-spacing-4);
}

/**
  * Region that contains the search input, handles sizing
  */
.slds-global-header__item_search {
  flex: 0 1 33.5rem;
  min-width: 27.5rem;
  padding: 0;

  .slds-global-header_search-button {
    width: 100%;
    cursor: text;
    justify-content: flex-start;
    border-radius: var(--slds-g-radius-border-2);

    --slds-c-button-color-background-hover: var(--slds-g-color-surface-container-1);
    --slds-c-button-color-background-active: var(--slds-g-color-surface-container-1);
    --slds-c-button-text-color: var(--slds-g-color-neutral-base-60);
    --slds-c-button-text-color-hover: var(--slds-g-color-neutral-base-60);
    --slds-c-button-text-color-active: var(--slds-g-color-neutral-base-60);
  }
}

/**
  * Container of the global header logo
  */
.slds-global-header__logo {
  width: 12.5rem;
  height: 2.5rem;
  background-image: var(--_slds-c-globalheader-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

/**
 * Handles styling for notification item interactions
 */
.slds-global-header__notification {
  border-block-end: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  padding: var(--slds-g-spacing-1);
}

.slds-global-header__notification:hover {
  background-color: var(--slds-g-color-surface-container-2);
}

.slds-global-header__notification:last-child {
  border-block-end: 0;
}

.slds-global-header__notification_unread {
  background-color: var(--slds-g-color-surface-container-2);
}

/**
 * Global actions component wrapper
 */
.slds-global-actions {
  display: flex;
  align-items: center;
}

/**
 * List item for each global action
 */
.slds-global-actions__item {
  margin-inline-start: var(--slds-g-spacing-2);
  margin-inline-end: var(--slds-g-spacing-2);

  .slds-button__icon {
    fill: var(--_slds-c-globalheader-buttonicon-color);
    color: var(--_slds-c-globalheader-buttonicon-color);
    width: var(--slds-g-sizing-6);
    height: var(--slds-g-sizing-6);
  }
}

/**
 * The actionable button inside of a global actions list item
 */
.slds-global-actions__item-action {
  transition: color 200ms linear;

  & .slds-icon {
    fill: var(--_slds-c-globalheader-buttonicon-color);
    width: var(--slds-g-sizing-6);
    height: var(--slds-g-sizing-6);
  }

  &:hover:not(:disabled) .slds-icon,
  &:focus .slds-icon {
    fill: var(--_slds-c-globalheader-buttonicon-color-hover);
  }

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

  &:active {
    box-shadow: none;
  }

  &:active .slds-icon {
    animation: click-icon 120ms cubic-bezier(1, 1.9, 0.94, 0.98);
  }

  &:active:not(:disabled) .slds-icon {
    fill: var(--_slds-c-globalheader-buttonicon-color-active);
  }
}

/* Adjustments to global action spacing for these particular items */
.slds-global-actions__item_help,
.slds-global-actions__item_notification {
  margin-inline: var(--slds-g-spacing-1);
}

.slds-global-actions__item_notification .slds-icon {
  width: var(--slds-g-sizing-6);
  height: var(--slds-g-sizing-6);
}

@keyframes click-icon {
  25% {
    transform: scale(0.94, 0.94);
  }

  100% {
    transform: scale(0.98, 0.98);
  }
}

/**
 * User profile action icon
 */
.slds-global-actions__avatar {
  box-shadow: var(--_slds-c-globalheader-buttonicon-color) 0 0 0 0;
  border-radius: var(--slds-g-radius-border-circle);
  border: 0;
  margin-inline-start: var(--slds-g-spacing-2);
  padding: 0;
  overflow: hidden;
  transition:
    transform 80ms ease-out,
    box-shadow 0.1s linear;

  &:hover,
  &:focus {
    box-shadow: var(--_slds-c-globalheader-buttonicon-color) 0 0 0 2px;
  }

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

/**
 * Favorites action button group
 */
.slds-global-actions__favorites {
  display: inline-flex;
}

/**
 * Star icon inside of favorites button group
 */
.slds-global-actions__favorites-action {
  border-color: var(--_slds-c-globalheader-favorites-color-border);
  width: auto;
  padding-inline-end: var(--slds-g-spacing-1);
  padding-inline-start: var(--slds-g-spacing-1);

  &:hover {
    border-color: var(--_slds-c-globalheader-favorites-color-border-hover);
  }

  .slds-button__icon {
    width: var(--slds-g-sizing-5);
    height: var(--slds-g-sizing-5);
    transition: transform 200ms ease-out;
  }

  &:hover:not(:disabled) .slds-button__icon {
    transform: scale(1.1, 1.1);
    transform-origin: 60% 40%;
  }

  /**
   * Selected/clicked state on favorites button
   */
  &.slds-is-selected {
    background-color: var(--_slds-c-globalheader-favorites-color-background-selected);
    border-color: var(--_slds-c-globalheader-favorites-color-border-selected);

    &:hover,
    &:focus {
      background-color: var(--_slds-c-globalheader-favorites-color-background-selected-hover);
      border-color: var(--_slds-c-globalheader-favorites-color-border-selected-hover);
    }

    .slds-button__icon {
      animation: click-favorites-icon 600ms cubic-bezier(0.46, 0.32, 0, 0.98);
    }
  }

  /**
   * Disabled state on favorites button
   */
  &:disabled,
  &.slds-is-disabled {
    color: var(--_slds-c-globalheader-favorites-color-text-disabled);
    border-color: var(--_slds-c-globalheader-favorites-color-border-disabled);
  }
}

/**
 * More dropdown icon inside of favorites button group
 */
.slds-global-actions__favorites-more {
  width: auto;
  padding-inline-start: var(--slds-g-spacing-1);
  padding-inline-end: var(--slds-g-spacing-1);
  border-color: var(--_slds-c-globalheader-favorites-color-border);

  .slds-icon {
    width: var(--slds-g-sizing-4);
    height: var(--slds-g-sizing-4);
  }

  &:hover {
    border-color: var(--_slds-c-globalheader-favorites-color-border-hover);
  }
}

/* Animation for favorites action icon */
@keyframes click-favorites-icon {
  25% {
    transform: scale(0.85, 0.85) rotate(15deg);
  }

  75% {
    transform: scale(1.2, 1.2) rotate(0deg);
  }

  100% {
    transform: scale(1, 1) rotate(0deg);
  }
}

/**
 * Task action icon
 */
.slds-global-actions__task {
  width: var(--slds-g-sizing-6);
  height: var(--slds-g-sizing-6);
  background: var(--_slds-c-globalheader-task-color-background);
  position: relative;
  top: -1px;

  &:hover {
    background: var(--_slds-c-globalheader-task-color-background-hover);
  }

  &:active {
    background: var(--_slds-c-globalheader-task-color-background-active);
  }

  &:not(:disabled) .slds-icon,
  &:not(:disabled):hover .slds-icon,
  &:not(:disabled):active .slds-icon {
    fill: var(--_slds-c-globalheader-color-background);
  }

  .slds-button__icon,
  .slds-icon {
    width: var(--slds-g-sizing-5);
    height: var(--slds-g-sizing-5);
  }
}

/**
 * Notification action icon
 */
.slds-global-actions__notifications {
  position: relative;

  &.slds-incoming-notification {
    animation: bell 0.8s ease-in-out;
  }
}

/**
 * Notification counter badge
 */
.slds-notification-badge {
  display: inline-flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  position: absolute;
  top: calc(6px * -1);
  inset-inline-end: calc(4px * -1);
  background: var(--_slds-c-globalheader-notificationbadge-color-background);
  color: var(--slds-g-color-neutral-base-100);
  border-radius: var(--slds-g-radius-border-circle);
  min-width: var(--slds-g-sizing-5);
  min-height: var(--slds-g-sizing-5);
  text-align: center;
  font-size: var(--slds-g-font-scale-neg-2);
  padding: 0 0.125rem;
  opacity: 0;
  pointer-events: none;

  &.slds-show-notification {
    animation: ding 0.8s ease-out;
    opacity: 1;
    transition-delay: 0.5s;
    transform-origin: 1.1875rem 0;
  }
}

/* Badge Animation */
@keyframes ding {
  75% {
    transform: scale(0.5, 0.5);
  }

  85% {
    transform: scale(1.5, 1.5);
  }

  100% {
    transform: scale(1, 1);
  }
}

/* Notification Bell Animation */
@keyframes bell {
  45% {
    transform: rotate(15deg);
  }

  57% {
    transform: rotate(-15deg);
  }

  70% {
    transform: rotate(7deg);
  }

  77% {
    transform: rotate(-5deg);
  }
}