/**
 * Copyright IBM Corp. 2016, 2024
 *
 * 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/components/overflow-menu/overflow-menu' as *;
@use '@carbon/styles/scss/components/tooltip';
@use '@carbon/styles/scss/components/ui-shell/side-nav';
@use '@carbon/styles/scss/components/ui-shell/ui-shell';
@use '@carbon/styles/scss/components/button/tokens' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/themes' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/layout' as layout;
@use '@carbon/styles/scss/utilities' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../link-with-icon';
@use 'vars' as *;

/// @access private
/// @group dotcom-shell

/// @access private
@mixin masthead-logo {
  z-index: 2;
  background-color: $background;
  block-size: 100%;
  @media screen and (prefers-reduced-motion: reduce) {
    a {
      position: relative;
      display: flex;
      align-items: center;
      padding: 0 $spacing-07;
      border: solid $spacing-01 transparent;
      block-size: 100%;
      outline: none;
      transition: none;

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

      &:active,
      &:focus {
        border-color: $focus;
        background-color: $layer-01;
      }

      @include breakpoint-up(max) {
        padding: 0 $spacing-08;
      }

      @include breakpoint-down(xlg) {
        padding: 0 $spacing-07;
      }

      @include breakpoint-down(lg) {
        padding: 0 $spacing-05;
      }

      svg {
        block-size: 23px;
        inline-size: 58px;

        g,
        path {
          fill: $layer-selected-inverse;

          /* stylelint-disable-next-line media-feature-name-no-unknown */
          @media (prefers-contrast: more) {
            fill: ButtonText;
          }
        }
      }

      &::after {
        @include breakpoint-up(800px) {
          position: absolute;
          display: block;
          background-color: $layer-accent-01;
          block-size: $spacing-06;
          content: '';
          inline-size: to-rem(1px);
          inset-block-start: 50%;
          inset-inline-end: to-rem(-3px);
          transform: translateY(-50%);
        }
      }
    }
  }

  a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 $spacing-07;
    border: solid $spacing-01 transparent;
    block-size: 100%;
    outline: none;
    transition: $button-transition;

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

    &:active,
    &:focus {
      border-color: $focus;
      background-color: $layer-01;
    }

    @include breakpoint-up(max) {
      padding: 0 $spacing-08;
    }

    @include breakpoint-down(xlg) {
      padding: 0 $spacing-07;
    }

    @include breakpoint-down(lg) {
      padding: 0 $spacing-05;
    }

    svg {
      block-size: 23px;
      inline-size: 58px;

      g,
      path {
        fill: $layer-selected-inverse;

        /* stylelint-disable-next-line media-feature-name-no-unknown */
        @media (prefers-contrast: more) {
          fill: ButtonText;
        }
      }
    }

    &::after {
      @include breakpoint-up(800px) {
        position: absolute;
        display: block;
        background-color: $layer-accent-01;
        block-size: $spacing-06;
        content: '';
        inline-size: to-rem(1px);
        inset-block-start: 50%;
        inset-inline-end: to-rem(-3px);
        transform: translateY(-50%);
      }
    }
  }

  .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition,
  .#{$prefix}--tooltip--definition {
    .#{$prefix}--tooltip__trigger {
      border: none;
    }

    border: none;

    &.#{$prefix}--tooltip--a11y {
      block-size: 100%;
    }
  }

  &.#{$prefix}--search-active {
    display: none;
    @include breakpoint(md) {
      display: block;
    }
  }
}

/// @access private
@mixin masthead-top-nav-menu-item {
  position: relative;
  block-size: 100%;

  &::before {
    position: absolute;
    block-size: 100%;
    border-block-start: 1px solid $layer-accent-01;
    content: '';
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  &:first-of-type {
    &::before {
      border-block-start: none;
    }
  }

  &:hover {
    background-color: $layer-01;

    &::before {
      border-block-start: 1px solid $layer-01;
    }

    + li {
      &::before {
        border-block-start: 1px solid $layer-01;
      }
    }
  }

  &:focus {
    &::before {
      box-sizing: border-box;
      border: $spacing-01 solid $background-brand;
    }
  }
}

/// @access private
@mixin masthead-top-nav-link {
  @include type-style(body-compact-02, true);

  padding: to-rem(13px) $spacing-05;

  border: none;
  color: $text-secondary;
  white-space: nowrap;

  > svg {
    fill: $icon-secondary;
  }

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

  &:active {
    background-color: $background-selected;
  }

  &:active,
  &:hover {
    color: $icon-primary;

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

  &:active,
  &:focus {
    outline: 2px solid $button-primary;
    outline-offset: -2px;
  }
}

/// @access private
@mixin masthead {
  * {
    box-sizing: border-box;
  }

  :host(#{$c4d-prefix}-masthead-composite),
  :host(#{$c4d-prefix}-masthead-container) {
    @include layout.emit-layout-tokens();

    position: relative;
    z-index: 900;
    display: block;
    padding-block-start: $spacing-09;
  }

  .#{$prefix}--masthead,
  :host(#{$c4d-prefix}-masthead) {
    @include theme($white, true);
    @include font-family('sans');

    position: fixed;
    z-index: 99;
    background-color: $background;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    transition-delay: 200ms;
    transition-duration: 300ms;
    transition-timing-function: $search-transition;

    &[with-banner] {
      inset-block-start: $spacing-13;
    }

    &[has-l1] {
      --c4d-active-l0-border-color: #{$layer-accent-01};
    }

    ::slotted([slot='profile']) {
      background-color: $background;
    }
  }

  :host(#{$c4d-prefix}-megamenu-overlay),
  .#{$prefix}--masthead__overlay {
    position: fixed;
    z-index: -1;
    background-color: none;
    block-size: 100%;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    opacity: 0;
    transition: opacity $transition-expansion $standard-easing,
      visibility $transition-expansion $standard-easing,
      background-color $transition-expansion $standard-easing;
    visibility: hidden;
  }

  :host(#{$c4d-prefix}-megamenu-overlay)[active],
  .#{$prefix}--masthead__overlay-show {
    background-color: $overlay;
    block-size: 100vh;
    opacity: 1;
    visibility: visible;
  }

  .#{$prefix}--masthead--sticky.#{$prefix}--masthead--sticky__l1 {
    inset-block-start: -98px;

    @include breakpoint-up(800px) {
      inset-block-start: -$spacing-09;
    }
  }

  .#{$prefix}--masthead--sticky__l1
    + .#{$prefix}--dotcom-shell
    .#{$prefix}--tableofcontents__sidebar {
    inset-block-start: 98px;
  }

  .#{$prefix}--masthead--sticky__l1.#{$prefix}--masthead--sticky
    + .#{$prefix}--dotcom-shell
    .#{$prefix}--tableofcontents__sidebar {
    inset-block-start: 0;

    @include breakpoint-up(800px) {
      inset-block-start: $spacing-09;
    }
  }

  .#{$prefix}--masthead__l0 {
    @include theme($white, true);

    position: relative;
    background: $background;

    &::after {
      position: absolute;
      background-color: $layer-accent-01;
      block-size: 1px;
      content: '';
      inline-size: 100vw;
      inset-block-end: -1px;
      inset-inline-start: 0;
    }
  }

  .#{$prefix}--header,
  .#{$prefix}--masthead__l0 #{$prefix}-header {
    position: relative;
    z-index: 5999;
    border: none;
    background: $background;
    margin-block-end: 1px;
    margin-inline: auto;
    max-inline-size: to-rem(1584px);
    transition-timing-function: $search-transition;

    &::before {
      position: absolute;
      z-index: 1;
      background-color: $background;
      block-size: $spacing-09;
      content: '';
      inset-inline: calc(-50vw + 50%) 100%;
    }

    &::after {
      position: absolute;
      background-color: $background;
      block-size: $spacing-09;
      content: '';
      inset-inline: 100% calc(-50vw + 50%);
    }

    .#{$prefix}--header__menu-arrow {
      fill: $icon-secondary;

      &:hover {
        fill: $icon-secondary;
      }
    }
  }

  .#{$prefix}--skip-to-content:focus {
    block-size: to-rem(49px);
  }

  .#{$prefix}--header__logo {
    @include masthead-logo;
  }

  .#{$prefix}--header__global {
    flex: 0;
  }

  .#{$prefix}--header__nav-container {
    position: relative;
    display: flex;
    flex: 1;
    block-size: 100%;
    overflow-x: visible;
  }

  /* Set to zero-slecificity so it can be overridden by dynamic stylesheet */
  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
  :where(.#{$prefix}--header__nav-content) {
    position: absolute;
    block-size: 100%;
    inset-inline-start: 0;
    transition: inset $transition-base motion(standard, productive);
  }

  .#{$prefix}--header__submenu,
  :host(#{$c4d-prefix}-top-nav-menu-item) {
    .#{$prefix}--text-truncate--end {
      white-space: normal;
    }
  }

  :host(#{$c4d-prefix}-top-nav-item),
  :host(#{$c4d-prefix}-top-nav-menu),
  :host(#{$c4d-prefix}-megamenu-top-nav-menu),
  .#{$prefix}--header__nav {
    a.#{$prefix}--header__menu-item {
      @include masthead-top-nav-link;

      &:focus,
      &:active {
        &[data-selected='true'] {
          border-block-end-color: transparent;
        }

        &::after {
          background-color: $focus;
        }
      }
    }

    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-title {
      &:focus,
      &:active {
        &[data-selected='true'][aria-expanded='false'] {
          border-block-end-color: transparent;

          &::after {
            background-color: $focus;
          }
        }
      }
    }

    a.#{$prefix}--header__menu-item[data-selected='true'] {
      color: $text-primary;
    }

    a.#{$prefix}--header__menu-item[data-selected='true']::after,
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-title[data-selected='true'][aria-expanded='false']::after {
      position: absolute;
      display: block;
      box-sizing: border-box;
      background-color: var(--c4d-active-l0-border-color, $link-primary);
      block-size: to-rem(3px);
      content: '';
      inset-block-end: 0;
      inset-inline: 0;
    }
  }

  :host(#{$c4d-prefix}-top-nav-menu),
  :host(#{$c4d-prefix}-megamenu-top-nav-menu) {
    a.#{$prefix}--header__menu-item {
      padding: to-rem(13px) $spacing-05 to-rem(11px);
      border-block-end: $spacing-01 solid transparent;
    }
  }

  :host(#{$c4d-prefix}-top-nav-menu),
  .#{$prefix}--header__nav {
    .#{$prefix}--header__menu-title[aria-expanded='true'] {
      z-index: 0;
      background-color: $layer-01;
      + .#{$prefix}--header__menu {
        background-color: $layer-02;
        box-shadow: 0 $spacing-01 6px 0 rgba(0, 0, 0, 0.3);
        inline-size: to-rem(256px);
        inset-block-end: -1px;

        li {
          @include masthead-top-nav-menu-item;
        }

        .#{$prefix}--header__menu-item {
          position: relative;
          border: none;
          block-size: 100%;

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

          &:focus {
            &::before {
              box-sizing: border-box;
              border: $spacing-01 solid $background-brand;
            }
          }

          &::before {
            position: absolute;
            block-size: 100%;
            content: '';
            inline-size: 100%;
            inset-block-start: 0;
            inset-inline-start: 0;
          }
        }
      }
    }

    .#{$prefix}--masthead__megamenu__l0-nav,
    .#{$prefix}--masthead__megamenu__l1-nav {
      .#{$prefix}--header__menu-title[aria-expanded='true']
        + .#{$prefix}--header__menu {
        inline-size: 100%;
      }
    }

    &::before {
      display: none;
    }
  }
  .#{$prefix}--header__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: $spacing-01 solid transparent;
    background-color: $background;

    &:hover {
      background-color: $background-hover;
      transition-duration: $search-transition-timing;

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

    &:focus,
    &:active {
      border-color: $focus;
      background-color: $background-hover;
    }

    > svg {
      position: relative;
      fill: $icon-secondary;
    }

    .#{$prefix}--overflow-menu {
      block-size: 100%;
      inline-size: 100%;

      &.#{$prefix}--overflow-menu--open {
        box-shadow: none;
        outline: $spacing-01 solid $background-brand;
        outline-offset: 0;
      }

      &:hover {
        background: none;
      }

      &:focus {
        box-shadow: none;
        outline: none;
      }
    }
  }

  .#{$prefix}--sub-content-left {
    position: absolute;
    block-size: 100%;
    inline-size: 1px;
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .#{$prefix}--sub-content-right {
    position: absolute;
    block-size: 100%;
    inline-size: 1px;
    inset-block-start: 0;
    inset-inline-end: 1px;
  }

  .#{$prefix}--header__nav-caret-left,
  .#{$prefix}--header__nav-caret-right {
    position: absolute;
    display: none;
    border: none;
    background-color: $background;
    block-size: 100%;
    inline-size: $spacing-08;
    inset-block-start: 0;

    > {
      svg {
        position: absolute;
        fill: currentColor;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    }

    &:hover {
      background-color: $background-hover;
      transition-duration: $search-transition-timing;

      > {
        svg {
          fill: $text-primary;
        }
      }
    }

    &:focus,
    &:active {
      display: block;
      background-color: $background-hover;
      outline: $spacing-01 solid $background-brand;
      outline-offset: -#{$spacing-01};

      &::before,
      &::after {
        display: none;
      }
    }
    @media (width >= 800px) {
      display: block;
    }
  }
  .#{$prefix}--header__nav-caret-left-container[hidden],
  .#{$prefix}--header__nav-caret-right-container[hidden] {
    display: none;
  }
  .#{$prefix}--header__nav-caret-left {
    inset-inline-start: 0;

    &::before {
      position: absolute;
      display: block;
      background-color: #dcdcdc;
      block-size: $spacing-06;
      content: '';
      inline-size: to-rem(1px);
      inset-block-start: 50%;
      inset-inline-start: 0;
      transform: translateY(-50%);
    }
  }

  .#{$prefix}--header__nav-caret-left-gradient {
    position: absolute;
    z-index: 1;
    display: block;
    background: linear-gradient(to right, $background, rgba(255, 255, 255, 0));
    block-size: 100%;
    inline-size: $spacing-03;
    inset-block-start: 0;
    inset-inline-start: $spacing-08;
  }

  .#{$prefix}--header__nav-caret-right {
    inset-inline-end: 0;

    &::after {
      position: absolute;
      display: block;
      background-color: #dcdcdc;
      block-size: $spacing-06;
      content: '';
      inline-size: to-rem(1px);
      inset-block-start: 50%;
      inset-inline-end: 0;
      transform: translateY(-50%);
    }
  }

  .#{$prefix}--header__nav-caret-right-gradient {
    position: absolute;
    display: block;
    background: linear-gradient(to left, $background, rgba(255, 255, 255, 0));
    block-size: 100%;
    inline-size: $spacing-03;
    inset-block-start: 0;
    inset-inline-end: $spacing-08;
  }

  .#{$prefix}--header__action--active {
    position: relative;
    border: $spacing-01 solid $background-brand;
    background-color: $background-hover;

    @include breakpoint-up(sm) {
      z-index: 6001;
      inset-block-start: 0;
    }
  }

  .#{$prefix}--header__menu {
    li {
      &:hover {
        background-color: $layer-01;
      }

      &:last-of-type {
        .#{$prefix}--header__menu-item {
          &::after {
            display: none;
          }
        }
      }
    }

    .#{$prefix}--header__menu-item {
      position: relative;
    }
  }

  button.#{$prefix}--header__search--close.#{$prefix}--header__action[part='close-button'] {
    display: none;
    overflow: hidden;
    border: none;
    inline-size: 0;

    svg {
      position: relative;
    }
  }

  .#{$prefix}--header__search--search {
    inline-size: $spacing-09;
    outline: none;
  }

  // masthead profile menu
  .#{$prefix}--overflow-menu-options {
    @include theme($white, true);

    position: fixed;
    z-index: 99999;

    background-color: $background;

    &:focus {
      outline: none;
    }

    &::after {
      display: none;
    }
  }

  .#{$prefix}--overflow-menu-options__btn {
    @include type-style(body-compact-02, true);

    color: $text-primary;
    text-decoration: none;

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

  .#{$prefix}--overflow-menu-options__option {
    block-size: $spacing-09;

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

  .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open {
    background-color: $background-hover;
    box-shadow: none;
  }
  .#{$prefix}--header__action.#{$prefix}--overflow-menu {
    block-size: $spacing-09;
  }

  @include breakpoint-up(800px) {
    .#{$prefix}--header__menu-toggle__hidden {
      display: none;
    }

    .#{$prefix}--header__nav {
      display: block;
    }
  }

  @media print {
    :host(#{$c4d-prefix}-masthead),
    .#{$prefix}--masthead {
      display: none;
    }
  }
}