//
// Copyright IBM Corp. 2020, 2025
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/reset' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/utilities' as *;
@use '@carbon/styles/scss/components/button/tokens' as *;
@use '@carbon/styles/scss/components/tooltip/tooltip' as *;
@use '@carbon/styles/scss/components/ui-shell/header' as *;
@use '@carbon/styles/scss/components/ui-shell/side-nav' as *;
@use '@carbon/ibmdotcom-styles/scss/components/masthead' as *;
@use '@carbon/ibmdotcom-styles/scss/components/search-with-typeahead/' as *;
@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
@use '@carbon/web-components/scss/components/tooltip/tooltip' as *;
@use '@carbon/web-components/scss/components/ui-shell/header' as *;
@use '@carbon/web-components/scss/components/ui-shell/side-nav' as *;
@use '../cta/cta.scss' as *;

// Magic Number: 799px matches masthead-composite's `layoutBreakpoint`.
$breakpoint--desktop-nav: 799px;

// Calculations for left nav overlay clip mask
$btn-dimension: $spacing-09;
$pos-btn-top: calc(
  var(--#{$c4d-prefix}-masthead-l0-bottom-edge, #{$btn-dimension}) - #{$btn-dimension}
);
$pos-btn-bottom: calc(
  var(--#{$c4d-prefix}-masthead-l0-bottom-edge, #{$btn-dimension}) + 1px
);

:host(#{$c4d-prefix}-masthead-container),
#{$c4d-prefix}-masthead-container {
  position: relative;
}

:host(#{$c4d-prefix}-masthead-menu-button) {
  // @extend :host(#{$prefix}-header-menu-button);
  position: relative;
  block-size: $spacing-09;
  inline-size: $spacing-09;

  &[hide-menu-button] {
    @include breakpoint-down(md) {
      display: none;
    }
  }

  .#{$c4d-prefix}-ce--header__menu-trigger__container {
    display: contents;
  }

  .#{$c4d-prefix}-ce--header__menu-trigger__container--has-search-active {
    @include breakpoint-down(md) {
      display: none;
    }
  }
}

:host(#{$c4d-prefix}-masthead-logo) {
  @extend :host(#{$prefix}-header-name);
  @include masthead-logo;

  &[hasTooltip] {
    @include tooltip--trigger('definition', top);
    @include tooltip--placement('definition', 'bottom', 'start');
  }

  a ::slotted(svg) {
    block-size: 23px;
    inline-size: 58px;
  }

  [part='link']:has(img.custom-logo-override) {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    block-size: 48px;
    inline-size: 142px;

    @include breakpoint-between(lg, max) {
      inline-size: 126px;
    }

    @include breakpoint-between(sm, lg) {
      inline-size: 94px;
    }
  }

  [part='link'] img.custom-logo-override {
    display: block;
    block-size: auto;
    inline-size: auto;
    max-block-size: 100%;
    max-inline-size: 100%;
    object-fit: contain;
  }

  .#{$c4d-prefix}-ce--header__logo--has-search-active {
    @include breakpoint-down(md) {
      display: none;
    }
  }

  &:active,
  &:focus {
    border: none;
    outline: none;
  }
}

:host(#{$c4d-prefix}-top-nav-name) {
  position: relative;
  z-index: 1;
  background: $background;
  outline: none;

  a.#{$prefix}--header__name {
    @include masthead-top-nav-name;

    margin-inline-start: 0;

    @include breakpoint-down($breakpoint--desktop-nav) {
      position: absolute;
      display: flex;
      inset-block-start: 0;
      inset-inline-start: 0;
    }

    @include breakpoint-up('lg') {
      margin-inline-start: 0;
    }

    @include breakpoint-up('xlg') {
      position: relative;
      margin-inline-start: $spacing-05;
    }
  }
}

:host(#{$c4d-prefix}-masthead-search) {
  outline: none;

  .#{$c4d-prefix}-ce--masthead__search__list {
    overflow: hidden;
    block-size: 0;
  }

  &[open] .#{$c4d-prefix}-ce--masthead__search__list {
    block-size: auto;
  }
}

:host(#{$c4d-prefix}-masthead-search-item) {
  @extend .react-autosuggest__suggestion;

  font-size: $spacing-05;
}

:host(#{$c4d-prefix}-masthead-global-bar) {
  @extend .#{$prefix}--header__global;

  z-index: 0;
  display: flex;
  flex: none;

  background-color: $background;
  block-size: 100%;

  ::slotted(#{$c4d-prefix}-button-cta) {
    @include breakpoint-down('md') {
      display: none;
    }
  }

  ::slotted(div.earth-language-icon) {
    display: flex;
    align-items: center;
    /* stylelint-disable-next-line declaration-no-important */
    padding: 1rem !important;
    cursor: pointer;
  }

  ::slotted(div.earth-language-icon:hover) {
    background-color: $background-hover;
  }

  &[has-search-active] {
    @include breakpoint-down(md) {
      display: none;
    }
  }

  .#{$c4d-prefix}-ce--header__global__container {
    display: contents;
  }

  .#{$c4d-prefix}-ce--header__global__container--has-search-active {
    @include breakpoint-down(md) {
      display: none;
    }
  }
}

:host(#{$c4d-prefix}-masthead-profile),
:host(#{$c4d-prefix}-masthead-contact),
:host(#{$c4d-prefix}-masthead-cart) {
  background-color: $background;
  inline-size: $spacing-09;

  a.#{$prefix}--header__menu-item {
    @include masthead-top-nav-link;

    justify-content: center;
    padding: 0;

    color: $icon-primary;
  }

  .#{$prefix}--header__menu-title[aria-expanded='true'] {
    + .#{$prefix}--header__menu {
      inline-size: $spacing-13;
      inset-inline: auto 0;
    }
  }
}

:host(#{$c4d-prefix}-top-nav),
:host(#{$c4d-prefix}-top-nav-l1) {
  display: none;
  background-color: $background;

  @include breakpoint-up($breakpoint--desktop-nav) {
    display: flex;
    flex: 1;
    align-items: stretch;
  }

  .#{$prefix}--header__nav {
    @include breakpoint-up($breakpoint--desktop-nav) {
      position: absolute;
      display: block;
    }
  }

  &[hide-divider] .#{$prefix}--header__nav {
    padding-inline-start: 0;
  }

  .#{$c4d-prefix}-ce--header__nav-content-container {
    position: relative;
    flex: 1;
  }

  .#{$prefix}--header__nav-caret-left-container,
  .#{$prefix}--header__nav-caret-right-container {
    position: relative;
    z-index: 1;
    background-color: $background;
    inset-block-end: 0;
  }

  .#{$prefix}--header__nav-caret-right-container {
    inset-inline-end: 0;
    /* stylelint-disable-next-line comment-whitespace-inside */
    /* !rtl:raw:
    position: absolute !important;
    */
  }

  .#{$prefix}--header__nav-caret-left-container {
    inset-inline-start: 0;
    /* stylelint-disable-next-line comment-whitespace-inside */
    /* !rtl:raw:
    right: initial;
    position: absolute !important;
    */
  }

  .#{$prefix}--header__nav-caret-left,
  .#{$prefix}--header__nav-caret-right {
    position: relative;
    // 40px caret width & 8px gradient
    block-size: $spacing-09;
  }

  .#{$c4d-prefix}-ce--header__nav-caret-container--hidden {
    position: absolute;
    visibility: hidden;
  }
}

:host(#{$c4d-prefix}-top-nav-l1) {
  overflow: visible;
}

:host(#{$c4d-prefix}-top-nav-menu),
:host(#{$c4d-prefix}-megamenu-top-nav-menu),
:host(#{$c4d-prefix}-masthead-profile),
:host(#{$c4d-prefix}-masthead-contact) {
  // @extend :host(#{$prefix}-header-menu);
  position: relative;

  .#{$prefix}--header__menu-title[aria-expanded='true'] {
    z-index: 0;
    background-color: $layer-01;
  }
}

:host(#{$c4d-prefix}-top-nav-menu),
:host(#{$c4d-prefix}-masthead-profile),
:host(#{$c4d-prefix}-masthead-contact) {
  .#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu {
    background-color: $background;
    box-shadow: 0 $spacing-01 6px 0 rgba(0, 0, 0, 0.3);
    inset-block-end: -1px;

    @include breakpoint-down('md') {
      inline-size: 100vw;
    }
  }
}

:host(#{$c4d-prefix}-top-nav-menu-item),
:host(#{$c4d-prefix}-masthead-profile-item) {
  // @extend :host(#{$prefix}-header-menu-item);
  @include masthead-top-nav-menu-item;

  a.#{$prefix}--header__menu-item {
    background-color: transparent;
    block-size: 100%;
  }
}

:host(#{$c4d-prefix}-masthead-cart) {
  position: relative;

  &::after {
    position: absolute;
    display: block;
    border-radius: 50%;
    background-color: $button-primary-hover;
    block-size: 10px;
    content: '';
    inline-size: 10px;
    inset-block-start: 12px;
    inset-inline-end: 10px;
  }
}

:host(#{$c4d-prefix}-top-nav-item),
:host(#{$c4d-prefix}-top-nav-menu),
:host(#{$c4d-prefix}-megamenu-top-nav-menu),
:host(#{$c4d-prefix}-top-nav-menu-item),
:host(#{$c4d-prefix}-masthead-profile-item) {
  .#{$prefix}--header__menu-arrow {
    block-size: 20px;
    inline-size: 20px;
  }

  a.#{$prefix}--header__menu-item {
    @include masthead-top-nav-link;

    svg {
      fill: $icon-secondary;
    }

    &:hover {
      color: $text-primary;
    }
  }
}

:host(#{$c4d-prefix}-megamenu-top-nav-menu) {
  .#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu {
    block-size: auto;
    inset-block-end: auto;
    min-block-size: 0;
  }
}

:host(#{$c4d-prefix}-left-nav) {
  @extend .#{$prefix}--side-nav;

  display: block;
  overflow: hidden;
  block-size: calc(100% - #{$spacing-09} - 1px);
  inline-size: 16rem;
  margin-block-start: calc(
    var(--#{$c4d-prefix}-masthead-l0-bottom-edge, #{$spacing-09}) + 1px
  );

  @include breakpoint-down(md) {
    inline-size: 100vw;
    max-inline-size: 100vw;
  }

  &[usage-mode='header-nav'],
  &[collapse-mode][usage-mode='header-nav'] {
    inset-inline-start: -100vw;
    /* stylelint-disable-next-line  time-min-milliseconds */
    transition: visibility 1ms motion(exit, productive) $duration-fast-02,
      left $duration-fast-02 motion(exit, productive) 1ms;
    visibility: hidden;

    @media screen and (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  &[expanded][usage-mode='header-nav'],
  &[collapse-mode][expanded][usage-mode='header-nav'] {
    overflow: hidden auto;
    inset-inline-start: 0;
    /* stylelint-disable-next-line time-min-milliseconds */
    transition: visibility 1ms motion(exit, productive) 0ms,
      inset-inline-start $duration-fast-02 motion(exit, productive) 1ms;
    visibility: visible;

    @media screen and (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .#{$prefix}--side-nav__wrapper {
    display: flex;
    flex-direction: column;
    block-size: 100%;
  }

  .#{$prefix}--side-nav__platform-name {
    flex-grow: 0;
    flex-shrink: 0;
  }

  .#{$prefix}--side-nav__menu-sections {
    position: relative;
    flex-basis: 100%;
    flex-shrink: 1;
  }

  ::slotted(#{$c4d-prefix}-left-nav-menu-section) {
    overflow: hidden;
    block-size: auto;
  }
}

:host(#{$c4d-prefix}-masthead-menu-button),
:host(#{$c4d-prefix}-left-nav) {
  @include breakpoint(md) {
    display: block;
  }
}

:host(#{$c4d-prefix}-left-nav-name) {
  .#{$prefix}--side-nav__submenu-platform {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 $spacing-05;
    block-size: $spacing-09;
    border-block-end: 1px solid $border-strong-01;
    color: $text-primary;
    text-decoration: none;

    &::after {
      content: none;
    }

    @include type-style(heading-02, true);
  }
}

:host(#{$c4d-prefix}-left-nav-item) {
  @extend :host(#{$prefix}-side-nav-link);

  a.#{$prefix}--side-nav__link .#{$prefix}--side-nav__link-text {
    color: $text-secondary;

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

  &:last-child {
    a.#{$prefix}--side-nav__link .#{$prefix}--side-nav__link-text {
      color: $link-primary;

      &:hover,
      &:focus {
        color: $link-secondary;
      }
    }
  }
}

:host(#{$c4d-prefix}-left-nav-menu-item) {
  @extend :host(#{$prefix}-side-nav-menu-item);
}

:host(#{$c4d-prefix}-left-nav-item-highlighted) a.#{$prefix}--side-nav__link,
:host(#{$c4d-prefix}-left-nav-menu-item-highlighted)
  a.#{$prefix}--side-nav__link,
:host(#{$c4d-prefix}-left-nav-item) a.#{$prefix}--side-nav__link,
:host(#{$c4d-prefix}-left-nav-menu-item) a.#{$prefix}--side-nav__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  block-size: $spacing-09;
  inline-size: 100%;
  padding-inline-start: $spacing-05;
}

:host(#{$c4d-prefix}-left-nav-item),
:host(#{$c4d-prefix}-left-nav-menu),
:host(#{$c4d-prefix}-left-nav-menu-item) {
  .#{$prefix}--side-nav__link:hover {
    background-color: $background-hover;
    color: $text-primary;
  }
}

:host(#{$c4d-prefix}-left-nav-menu),
:host(#{$c4d-prefix}-left-nav-menu-item),
:host(#{$c4d-prefix}-left-nav-menu-section) {
  .#{$prefix}--side-nav__link,
  .#{$prefix}--side-nav__submenu,
  a.#{$prefix}--side-nav__link,
  .#{$prefix}--side-nav__submenu .#{$prefix}--side-nav__submenu-content {
    block-size: auto;
    min-block-size: $spacing-09;
  }

  .#{$prefix}--side-nav__submenu-title,
  a.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__link-text,
  button.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__link-text {
    padding: 0.8rem 0;
    block-size: auto;
    white-space: normal;
  }
}

@mixin left-nav-overlay {
  position: fixed;
  z-index: calc(#{z('header')} - 1);
  background-color: rgba(22, 22, 22, 0.5);
  block-size: 100vh;
  clip-path: polygon(
    0 0,
    0 $pos-btn-top,
    $btn-dimension $pos-btn-top,
    $btn-dimension $pos-btn-bottom,
    0 $pos-btn-bottom,
    0 100%,
    100% 100%,
    100% 0,
    0 0
  );
  inline-size: 100%;

  // Makes the trigger button work without making it floated. In this way, we don't have to adjust the position of the logo
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: 1;
  transition: opacity $transition-expansion $standard-easing,
    background-color $transition-expansion $standard-easing;

  @media screen and (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

:host(#{$c4d-prefix}-left-nav-overlay) {
  // @extend .#{$prefix}--side-nav__overlay;
  &[active] {
    @include breakpoint-down($breakpoint--desktop-nav) {
      @include left-nav-overlay;
    }
  }
}

:host(#{$c4d-prefix}-left-nav-overlay[dir='rtl']) {
  clip-path: polygon(
    0 0,
    0 100%,
    100% 100%,
    100% $pos-btn-bottom,
    calc(100% - #{$btn-dimension}) $pos-btn-bottom,
    calc(100% - #{$btn-dimension}) $pos-btn-top,
    100% $pos-btn-top,
    100% 0
  );
}

:host(#{$c4d-prefix}-megamenu-link-with-icon):focus,
:host(#{$c4d-prefix}-megamenu-category-link):focus {
  outline: none;
}

:host(#{$c4d-prefix}-megamenu-link-with-icon) {
  background-color: var(--cds-button-primary, #0f62fe);

  a[part='link'] {
    color: var(--cds-text-on-color, #ffffff);
    @include type-style('body-compact-01');
  }

  a[part='link']:hover {
    background-color: var(--cds-button-primary-hover, #0050e6);
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--cds-text-on-color, #ffffff) !important;
  }

  a[part='link']:active {
    background-color: var(--cds-button-primary-active, #002d9c);
    box-shadow: -0.0625rem -0.0625rem 0 0 var(--cds-button-separator, #e0e0e0);
  }

  /* stylelint-disable-next-line a11y/media-prefers-reduced-motion */
  a[part='link']:focus {
    border-style: solid;
    border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
    background-color: var(--cds-button-primary-hover, #0050e6);
    box-shadow: inset 0 0 0 1px
        var(--cds-button-focus-color, var(--cds-focus, #0f62fe)),
      inset 0 0 0 2px var(--cds-background, #ffffff);
    transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9),
      box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9),
      border-color 70ms cubic-bezier(0, 0, 0.38, 0.9),
      outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
  }
}

:host(#{$c4d-prefix}-megamenu-link-with-icon):focus {
  border-style: solid;
  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
  background-color: var(--cds-button-primary-hover, #0050e6);
  box-shadow: inset 0 0 0 1px
      var(--cds-button-focus-color, var(--cds-focus, #0f62fe)),
    inset 0 0 0 2px var(--cds-background, #ffffff);
  transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9),
    box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9),
    border-color 70ms cubic-bezier(0, 0, 0.38, 0.9),
    outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
}

:host(#{$c4d-prefix}-megamenu-link-with-icon):active {
  background-color: var(--cds-button-primary-active, #002d9c);
  box-shadow: -0.0625rem -0.0625rem 0 0 var(--cds-button-separator, #e0e0e0);
}

:host(#{$c4d-prefix}-masthead-search-composite),
:host(#{$c4d-prefix}-masthead-search-container) {
  display: contents;
}

:host(#{$c4d-prefix}-megamenu),
.#{$prefix}--masthead__megamenu {
  position: relative;

  &[overflowing]::after {
    position: fixed;
    background: linear-gradient(transparent, $background);
    block-size: rem(48px);
    content: '';
    inline-size: 100%;
    inset-block-end: 0;
    pointer-events: none;
  }

  .#{$prefix}--masthead__megamenu__container {
    block-size: 100%;
    inline-size: 100%;
    overflow-x: hidden;
  }
}

:host(#{$c4d-prefix}-megamenu[layout='tab']) {
  ::slotted(#{$c4d-prefix}-megamenu-left-navigation) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

:host(#{$c4d-prefix}-megamenu-tabs) {
  display: flex;
  flex-direction: column;
  margin-block-end: $spacing-05;

  .#{$prefix}--tabs-trigger {
    display: none;
  }
}

:host(#{$c4d-prefix}-megamenu-tab) {
  outline: 0;

  button {
    @include type-style(body-long-01);

    padding: rem(6px) $spacing-05;
    border: none;
    background-color: $background;

    color: $text-secondary;
    cursor: pointer;

    inline-size: 100%;
    text-align: start;

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

    &:hover {
      background-color: $background-hover;
    }

    &:focus {
      outline: rem(2px) solid $focus;
      outline-offset: rem(-2px);
    }
  }
}

:host(#{$c4d-prefix}-megamenu-tab)[selected] button {
  background-color: $background-selected;
  color: $text-primary;
}

:host(#{$c4d-prefix}-megamenu-category-link-group) {
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
}

:host(#{$c4d-prefix}-megamenu-category-link) {
  a:has([part='link-heading']) {
    padding: $spacing-04 $spacing-05;
    block-size: 100%;

    > span {
      display: block;
      max-inline-size: rem(272px);
    }

    &:active,
    &:hover {
      svg {
        fill: $icon-primary;
      }
    }
  }

  [part='link-heading'] {
    @include type-style('expressive-heading-01');

    svg {
      margin-inline-start: $spacing-03;
      padding-block-start: $spacing-01;
      /* shrink SVG with padding to match font-size */
    }
  }
}

:host(#{$c4d-prefix}-megamenu-heading),
:host(#{$c4d-prefix}-megamenu-category-heading) {
  display: block;
  padding: 0 $spacing-05;

  h2,
  h3,
  h4,
  h5,
  h6 {
    display: inline-block;
    color: $text-primary;
    margin-block: 0;

    a {
      display: flex;
      align-self: center;
      color: inherit;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }

      &:focus {
        outline: rem(2px) solid $focus;
        outline-offset: rem(-2px);
      }
    }

    svg {
      position: relative;
      flex-shrink: 0;
      margin: 0 $spacing-03;
      fill: $icon-primary;

      /* stylelint-disable-next-line comment-whitespace-inside */
      /*!rtl:raw:
        transform: scaleX(-1);
        */
    }

    &[data-has-href]:active,
    &[data-has-href]:hover {
      a,
      ~ span {
        color: $text-primary;
      }

      svg {
        fill: $icon-primary;
      }
    }
  }

  > span {
    @include type-style(body-short-01);

    display: block;
    color: $text-secondary;
    margin-block-start: $spacing-03;

    &[data-has-content] {
      margin-block-end: $spacing-06;
    }
  }
}

:host(#{$c4d-prefix}-megamenu-heading) {
  margin-block-end: $spacing-06;

  h2,
  h3,
  h4,
  h5,
  h6 {
    @include type-style(heading-05, true);

    svg {
      inset-block-start: $spacing-03;
    }
  }
}

:host(#{$c4d-prefix}-megamenu-category-heading) {
  margin-block-end: $spacing-05;

  h2,
  h3,
  h4,
  h5,
  h6 {
    @include type-style(heading-03, true);

    svg {
      inset-block-start: $spacing-02;
    }
  }
}

:host(#{$c4d-prefix}-megamenu-category-heading.has-content) {
  margin-block-end: $spacing-06;
}