/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */

//
// APP-HEADER
//

@use "../mixins/interactive-dark-theme" as *;

// ----------------

.hds-app-header {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: var(--token-app-header-height);
  padding: 12px 16px 11px 16px; // bottom padding of 11px is to account for the bottom border
  color: var(--token-color-foreground-high-contrast);
  background: var(--token-color-palette-neutral-700);
  border-bottom: 1px solid var(--token-color-palette-neutral-500);

  // A11Y-REFOCUS "SKIP LINK"

  .ember-a11y-refocus-skip-link {
    top: 10px;
    left: 10px;
    z-index: 20;
    width: max-content;
    padding: 2px 10px 4px;
    color: var(--token-color-foreground-action);
    font-size: var(--token-typography-display-200-font-size);
    font-family: var(--token-typography-display-200-font-family);
    line-height: var(--token-typography-display-200-line-height);
    background-color: var(--token-color-surface-faint);
    border-radius: var(--token-border-radius-x-small);
    transform: translateY(-200%);
    transition: 0.6s ease-in-out;

    &:focus {
      transform: translateY(0);
    }
  }

  // RESPONSIVE VIEWS

  // Desktop (large) view:
  &.hds-app-header--is-desktop {
    // Global actions are aligned next to the logo in desktop view
    .hds-app-header__global-actions {
      margin-right: auto;
    }
  }

  // Mobile/tablet (small/medium) view:
  &.hds-app-header--is-mobile {
    // Actions content appears as a dropdown menu in mobile/tablet view
    .hds-app-header__actions {
      position: absolute;
      top: calc(100% + 1px); // We add 1px to account for the AppHeader bottom border
      right: 0;
      left: 0;
    }

    // Display as dropdown menu in mobile/tablet view
    .hds-app-header__actions {
      flex-wrap: wrap;
      align-content: flex-start;
      padding: 16px;
      overflow: auto; // allow users to scroll if the content is too long
      background: var(--token-color-palette-neutral-700);
    }

    &.hds-app-header--menu-is-closed {
      .hds-app-header__actions {
        display: none;
      }
    }

    &.hds-app-header--menu-is-open {
      .hds-app-header__actions {
        height: calc(100vh - var(--token-app-header-height));
      }
    }

    // Force the width of global actions to 100% in mobile/tablet view
    .hds-app-header__global-actions {
      &,
      .hds-dropdown,
      .hds-dropdown-toggle-button {
        width: 100%;
      }
    }
  }

  // CONTENT

  .hds-app-header__global-actions,
  .hds-app-header__utility-actions {
    display: flex;
    gap: inherit;
    align-items: center;
  }

  // Dropdown & Button color theming overrides
  // Note: We need to apply dark theme styles to .hds-dropdown-toggle-button & .hds-dropdown-toggle-icon
  // so we use a partial classname selector to cover both cases

  .hds-button,
  button[class*="hds-dropdown-toggle"] {
    // Apply dark theme to child interactive components not within a nested content container
    &:not(.hds-dropdown__content *, .ember-basic-dropdown-content *, .hds-dialog-primitive__wrapper *) {
      @include hds-interactive-dark-theme();

      // disabled state:
      &:disabled,
      &[disabled],
      &.mock-disabled,
      &:disabled:focus,
      &[disabled]:focus,
      &.mock-disabled:focus,
      &:disabled:hover,
      &[disabled]:hover,
      &.mock-disabled:hover {
        @include hds-interactive-dark-theme-state-disabled();
      }
    }
  }
}

// Prevent interaction with AppHeader when AppSideNav is open/expanded

// Logic: if the AppSideNav is "mobile" (operates in overlay mode) - AND - it is expanded (not minimized),
// we disable interactions in the AppHeader

.hds-app-frame:has(.hds-app-side-nav--is-mobile.hds-app-side-nav--is-not-minimized) {
  // visually disable all nested elements within the AppHeader when AppSideNav is open in mobile view
  .hds-app-header > * {
    filter: contrast(0.5) brightness(0.7);
    pointer-events: none;
  }
}

// Logo

.hds-app-header__home-link {
  @include hds-interactive-dark-theme($add-visible-border: false);
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 3px;
  text-decoration: none;

  // disabled state:
  &:disabled,
  &[disabled],
  &.mock-disabled,
  &:disabled:focus,
  &[disabled]:focus,
  &.mock-disabled:focus,
  &:disabled:hover,
  &[disabled]:hover,
  &.mock-disabled:hover {
    @include hds-interactive-dark-theme-state-disabled();
  }

  // Set SVG logo size:
  svg {
    width: var(--token-app-header-logo-size);
    height: var(--token-app-header-logo-size);
  }
}

.hds-app-header__actions-content,
.hds-app-header__actions {
  display: flex;
  flex: 1;
  gap: inherit;
}