/**
 * Copyright IBM Corp. 2016, 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/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/themes' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/utilities' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use '@carbon/styles/scss/components/button/tokens' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use 'vars' as *;

/// @access private
/// @group dotcom ui-shell Masthead L1

$search-transition: cubic-bezier(0.2, 0, 0.38, 0.9);
$search-transition-timing: 95ms;

@mixin mobile-button-base {
  display: flex;
  justify-content: space-between;
  padding: $spacing-05;
  border: none;
  border-block-end: 1px solid $layer-accent-01;
  gap: $spacing-06;
  inline-size: 100%;
  min-block-size: $spacing-07;
  text-decoration: none;

  &:focus-visible {
    outline: $spacing-01 solid $focus;
    outline-offset: calc(-1 * #{$spacing-01});
  }
}

@mixin desktop-button-base {
  padding: $spacing-05;
  border: none;
  appearance: none;
  background: transparent;
  block-size: 100%;
  column-gap: $spacing-03;
  text-decoration: none;
}

@mixin masthead-l1 {
  // Set up variables to store column-widths without using flexbox
  .#{$prefix}--masthead__l1,
  :host(#{$c4d-prefix}-masthead-l1) {
    /* stylelint-disable-next-line length-zero-no-unit */
    --page-width: calc(100vw - var(--scrollbar-width, 0px));
    --grid-width: var(--page-width);
    --column-width: var(--page-width);
    --gutter-width: 1rem;

    @include breakpoint-up(sm) {
      --column-width: calc(var(--grid-width) / 4);
    }

    @include breakpoint-up(md) {
      --grid-width: calc(var(--page-width) - 2rem);
      --column-width: calc(var(--grid-width) / 8);
    }

    @include breakpoint-up(lg) {
      --column-width: calc(var(--grid-width) / 16);
    }

    @include breakpoint-up(max) {
      --grid-width: calc(99rem - 3rem);
    }

    @include theme($white, true);

    position: relative;
    overflow: visible;
    background-color: $layer-02;
    transition-timing-function: $search-transition;
  }

  // L1 Mobile Styles
  @media screen and (width <= 799px) {
    .#{$prefix}--masthead__l1-inner-container {
      inline-size: 100%;
    }

    .#{$prefix}--masthead__l1-title {
      @include type-style(productive-heading-01);

      display: flex;
      justify-content: space-between;
      padding: $spacing-05;
      border: none;

      background-color: transparent;
      border-block-end: 1px solid $layer-accent-01;
      color: $text-primary;
      gap: $spacing-06;
      inline-size: 100%;

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

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

      &:active,
      &:focus-visible {
        outline: $spacing-01 solid $focus;
        outline-offset: calc(-1 * #{$spacing-01});
      }

      &:disabled {
        border-block-end-color: $border-disabled;
        color: $text-disabled;
      }

      &[active] {
        border-block-end: 3px solid $focus;
      }

      &.is-open {
        svg {
          transform: rotateX(180deg);
        }
      }

      svg {
        color: $icon-primary;
      }
    }

    .#{$prefix}--masthead__l1-dropdown {
      position: absolute;
      background-color: $background;
      color: $text-secondary;
      inset-block-start: 100%;
      inset-inline: 0;

      &.is-open {
        box-shadow: 0 2px 6px 0 $shadow;
        /* stylelint-disable-next-line declaration-no-important */
        inline-size: 100vw !important;
      }

      &:not(.is-open) {
        display: none;
      }

      &:last-child {
        > a,
        > button {
          border-block-end: initial;
        }
      }

      // Height of viewport, minus the L0/L1 combo, minus additional space to match L0 megapanels
      max-block-size: calc(100vh - 98px - #{$spacing-10} - #{$spacing-09});
      overflow-y: auto;
    }

    .#{$prefix}--masthead__l1-dropdown-item {
      @include type-style(body-short-01);
      @include mobile-button-base;

      background-color: transparent;
      color: $text-secondary;

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

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

      &:active,
      &:focus-visible {
        outline: $spacing-01 solid $focus;
        outline-offset: calc(-1 * #{$spacing-01});
      }

      &:disabled {
        border-block-end-color: $border-disabled;
        color: $text-disabled;
      }

      &[active] {
        position: relative;

        &::after {
          position: absolute;
          display: block;
          background-color: $focus;
          content: '';
          inline-size: 3px;
          inset-block: 0;
          inset-inline-start: 0;
        }
      }

      &.is-open {
        background-color: $background-selected;
        color: $text-primary;

        svg {
          color: $icon-primary;
          transform: rotateX(180deg);
        }
      }

      svg {
        color: $icon-secondary;
      }
    }

    .#{$prefix}--masthead__l1-dropdown-subsection {
      &:not(.is-open) {
        display: none;
      }

      border-block-end: 1px solid $layer-accent-01;

      padding-block-end: $spacing-07;

      .#{$prefix}--masthead__l1-dropdown-item {
        border-block-end: none;
        color: $text-secondary;
        padding-block: $spacing-04;
        padding-inline: $spacing-05 $spacing-08;

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

      .#{$prefix}--masthead__l1-dropdown-viewall {
        margin-block-start: $spacing-07;
      }
    }

    .#{$prefix}--masthead__l1-dropdown-announcement {
      @include type-style(body-short-01);

      padding: $spacing-05 0;

      margin: 0 $spacing-05 $spacing-05;
      border-block-end: 1px solid $layer-accent-01;
    }

    .#{$prefix}--masthead__l1-dropdown-heading {
      @include type-style(productive-heading-01);

      color: $text-primary;

      // Headings that are not links.
      &.#{$prefix}--masthead__l1-dropdown-heading--no-link {
        inline-size: 100%;
        min-block-size: $spacing-07;
        padding-block: $spacing-04;
        padding-inline: $spacing-05 $spacing-08;
      }

      .#{$prefix}--masthead__l1-dropdown-item {
        @include type-style(productive-heading-01);

        justify-content: flex-start;

        color: inherit;
        gap: $spacing-03;

        inline-size: 100%;
        min-block-size: $spacing-07;
        padding-block: $spacing-04;
        padding-inline: $spacing-05 $spacing-08;

        svg {
          fill: $icon-primary;
        }
      }

      &:not(:nth-of-type(1)) {
        margin-block-start: $spacing-07;
      }
    }

    .#{$prefix}--masthead__l1-dropdown-viewall {
      @include type-style(body-short-01);

      display: flex;
      justify-content: flex-start;
      padding: $spacing-05;

      background-color: transparent;
      gap: $spacing-03;
      inline-size: 100%;
      min-block-size: $spacing-07;
      text-decoration: none;

      &:focus {
        text-decoration: underline;
      }

      &:hover {
        background-color: $background-hover;
        text-decoration: underline;
      }

      &:active {
        background-color: $background-active;
        text-decoration: underline;
      }

      &:active,
      &:focus-visible {
        outline: $spacing-01 solid $focus;
        outline-offset: calc(-1 * #{$spacing-01});
      }
    }

    .#{$prefix}--masthead__l1-dropdown-login {
      @include mobile-button-base;
      @include type-style(body-short-01);

      color: $button-primary;

      svg {
        color: inherit;
      }

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

      &:focus-visible {
        color: $button-primary;
      }

      &:active {
        background-color: $background-active;
        color: $button-primary-active;
      }
    }

    :host(#{$c4d-prefix}-masthead-l1-cta) {
      .#{$prefix}--masthead__l1-dropdown-cta {
        @include mobile-button-base;
        @include type-style(body-short-01);

        background-color: $background-brand;
        border-block-end: initial;
        color: $layer-02;

        svg {
          color: inherit;
        }

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

        &:focus-visible {
          outline-color: $layer-02;
          outline-offset: calc(-1 * #{$spacing-02});
        }

        &:active {
          background-color: $button-primary-active;
          color: $layer-02;
        }

        &:disabled {
          background-color: $text-disabled;
        }
      }
    }
  }

  // L1 Desktop Styles
  @media screen and (width >= 800px) {
    .#{$prefix}--masthead__l1,
    :host(#{$c4d-prefix}-masthead-l1) {
      display: block;
      border-block-end: 1px solid $layer-accent-01;
    }

    .#{$prefix}--masthead__l1-inner-container {
      position: relative;
      z-index: 1;
      display: grid;
      margin: 0 auto;
      block-size: $spacing-10;
      grid-template-areas: 'padding platform menu spacer login cta';
      grid-template-columns: $spacing-05 auto minmax(1px, 1fr) $spacing-08 auto auto;
      inline-size: 100%;
      max-inline-size: 98rem;

      > * {
        position: relative;
        z-index: 1;
      }

      > .#{$prefix}--masthead__l1-menu-container-mask {
        position: absolute;
        z-index: 2;
        display: block;
        background-color: $background;
        content: '';
        inset-block: 0;

        &--start {
          inset-inline: -50vw 100%;
        }

        &--end {
          inset-inline: 100% -50vw;
        }
      }

      &::before,
      &::after {
        position: relative;
        z-index: 1;
        display: block;
        background-color: $background;
        content: '';
      }

      &::before {
        grid-area: padding;
      }

      &::after {
        grid-area: spacer;
      }
    }

    .#{$prefix}--masthead__background-wrapper {
      background-color: $background;
    }

    .#{$prefix}--masthead__l1-title {
      @include type-style(productive-heading-01);
      @include desktop-button-base;

      display: inline-flex;
      align-items: flex-end;
      background-color: $background;
      block-size: 100%;
      border-block-end: 3px solid transparent;
      color: $text-primary;
      grid-area: platform;
      padding-block-end: calc(#{$spacing-05} - #{$spacing-01});

      &[active] {
        border-block-end-color: $focus;
      }

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

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

      &:active,
      &:focus-visible {
        outline: $spacing-01 solid $focus;
        outline-offset: calc(-1 * #{$spacing-01});
      }
    }

    .#{$prefix}--masthead__l1-menu-container-outer {
      z-index: 0;
      display: flex;
      grid-area: menu;
    }

    .#{$prefix}--masthead__l1-menu-container-scroller {
      @include desktop-button-base;

      z-index: 1;

      padding: 0;
      background-color: $background;
    }

    .#{$prefix}--masthead__l1-menu-container-scroller-inner {
      display: inline-flex;
      flex-shrink: 0;
      align-items: flex-end;
      padding: $spacing-05 $spacing-03;
      background-color: $background;
      block-size: 100%;
      inline-size: 100%;

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

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

      &:active,
      &:focus-visible {
        outline: $spacing-01 solid $focus;
        outline-offset: calc(-1 * #{$spacing-01});
      }

      &[hidden] {
        /* stylelint-disable-next-line declaration-no-important */
        display: none !important;
      }
    }

    .#{$prefix}--masthead__l1-menu-container-inner {
      z-index: 0;
      flex-grow: 1;
      flex-shrink: 1;
      block-size: 100%;
    }

    .#{$prefix}--masthead__l1-menu {
      position: absolute;
      display: flex;
      block-size: 100%;
      transition: translate $search-transition-timing $search-transition;

      > li {
        position: relative;
      }
    }

    .#{$prefix}--masthead__l1-item {
      @include type-style(body-short-01);
      @include desktop-button-base;

      display: inline-flex;
      align-items: flex-end;
      border: 1px solid transparent;
      background-color: $background;
      border-block-start: none;
      color: $text-secondary;
      white-space: nowrap;

      &[active]::after {
        position: absolute;
        background-color: $focus;
        block-size: 3px;
        content: '';
        inset-block-end: 0;
        inset-inline: 0;
      }

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

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

      &:active,
      &:focus-visible {
        outline: $spacing-01 solid $focus;
        outline-offset: calc(-1 * #{$spacing-01});
      }

      &:is([disabled], .is-disabled) {
        color: $text-disabled;
      }

      &.is-open {
        border-color: #c6c6c6;
        block-size: calc(100% + 3px);
        box-shadow: 0 0 6px #c6c6c6;
        clip-path: polygon(
          calc(0% - 6px) calc(0% - 6px),
          calc(100% + 6px) calc(0% - 6px),
          calc(100% + 6px) 100%,
          calc(0% - 6px) 100%
        );
        padding-block-end: calc(#{$spacing-05} + 3px);

        svg {
          rotate: 180deg;
        }
      }

      svg {
        color: inherit;
      }
    }

    .#{$prefix}--masthead__l1-dropdown {
      position: absolute;
      padding: $spacing-05 0 0;
      border: 1px solid #c6c6c6;
      background-color: $background;
      border-block-start: none;
      box-shadow: 0 0 6px #c6c6c6;
      clip-path: polygon(
        calc(0% - 6px) 0%,
        calc(100% + 6px) 0%,
        calc(100% + 6px) calc(100% + 6px),
        calc(0% - 6px) calc(100% + 6px)
      );
      inline-size: 320;
      inset-block-start: calc(100% + 1px);
      inset-inline-start: 0;
      max-inline-size: calc(100vw - (2 * #{$spacing-05}));
      overflow-y: auto;
      visibility: hidden;

      &.is-open {
        visibility: visible;
      }

      &.#{$prefix}--masthead__l1-dropdown__1-col {
        inline-size: calc(2 * var(--column-width));
      }

      &.#{$prefix}--masthead__l1-dropdown__2-col {
        inline-size: calc(4 * var(--column-width));
      }

      &.#{$prefix}--masthead__l1-dropdown__3-col {
        inline-size: calc(6 * var(--column-width));
      }

      @media screen and (width >= 66rem) {
        &.#{$prefix}--masthead__l1-dropdown__1-col {
          inline-size: calc(4 * var(--column-width));
        }

        &.#{$prefix}--masthead__l1-dropdown__2-col {
          inline-size: calc(8 * var(--column-width));
        }

        &.#{$prefix}--masthead__l1-dropdown__3-col {
          inline-size: calc(12 * var(--column-width));
        }
      }
    }

    .#{$prefix}--masthead__l1-dropdown-links {
      column-rule: 1px solid $layer-accent-01;
      padding-block-end: $spacing-08;

      .#{$prefix}--masthead__l1-dropdown__2-col & {
        column-count: 2;
        column-gap: 0;
      }

      .#{$prefix}--masthead__l1-dropdown__3-col & {
        column-count: 3;
        column-gap: 0;
      }

      > * {
        break-inside: avoid;
      }

      // Contains a wide col child.
      &.#{$prefix}--masthead__l1-dropdown--has-column-wide {
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        .#{$prefix}--masthead__l1-dropdown-column-wide {
          grid-column: span 2;

          .#{$prefix}--masthead__l1-dropdown-menu-items {
            column-gap: 0;
            columns: 2;
          }
        }

        > *:nth-child(2) {
          border-inline-start: 1px solid $layer-accent-01;
        }
      }
    }

    .#{$prefix}--masthead__l1-dropdown-announcement {
      @include type-style(body-short-01);

      margin: 0 $spacing-05 $spacing-05;
      border-block-end: 1px solid $layer-accent-01;

      padding-block-end: $spacing-05;

      :is(h1, h2, h3, h4, h5, h6, strong, b) {
        @include type-style(productive-heading-01);
      }

      :focus {
        outline: $spacing-01 solid $focus;
        outline-offset: calc(-1 * #{$spacing-01});
      }
    }

    .#{$prefix}--masthead__l1-dropdown-menu-items {
      padding-block-end: $spacing-06;
    }

    .#{$prefix}--masthead__l1-dropdown-heading {
      @include type-style(productive-heading-03);

      color: $text-primary;

      .#{$prefix}--masthead__l1-dropdown-item {
        @include type-style(productive-heading-03);
        @include desktop-button-base;

        padding: $spacing-03 $spacing-05;

        color: inherit;
        margin-block-end: $spacing-03;

        svg {
          position: relative;
          inset-block-end: to-rem(2px);
          margin-inline-start: $spacing-03;
          vertical-align: middle;
        }
      }

      // Headings that do not contain links.
      &.#{$prefix}--masthead__l1-dropdown-heading--no-link {
        padding: $spacing-03 $spacing-05;
        margin-block-end: $spacing-03;
      }
    }

    .#{$prefix}--masthead__l1-dropdown-heading-desc {
      @include type-style(body-short-01);

      display: block;
      padding: 0 $spacing-05;
      margin: calc(-1 * #{$spacing-03}) 0 $spacing-03;
      color: $text-secondary;
    }

    .#{$prefix}--masthead__l1-dropdown-item {
      @include type-style(body-short-01);
      @include desktop-button-base;

      display: inline-block;
      padding: $spacing-03 $spacing-05;
      color: $text-secondary;
      inline-size: 100%;

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

      &:active {
        color: $text-secondary;
      }

      &:active,
      &:focus-visible {
        outline: $spacing-01 solid $focus;
        outline-offset: calc(-1 * #{$spacing-01});
      }

      svg {
        color: inherit;
      }

      .#{$prefix}--masthead__l1-dropdown-item-title {
        @include type-style(productive-heading-01);

        display: block;
      }

      .#{$prefix}--masthead__l1-dropdown-item-description {
        display: block;
        color: $text-secondary;
        white-space: break-spaces;
      }
    }

    .#{$prefix}--masthead__l1-dropdown-viewall {
      @include type-style(body-short-01);

      display: flex;
      align-content: center;
      padding: $spacing-05;
      border-block-start: 1px solid $layer-accent-01;
      color: $link-primary;
      gap: $spacing-03;
      text-decoration: none;

      &:hover {
        color: $link-primary-hover;
        text-decoration: underline;
      }

      &:active,
      &:active:visited,
      &:active:visited:hover {
        color: $text-primary;
        text-decoration: underline;
      }

      &:focus {
        outline: $spacing-01 solid $focus;
        outline-offset: calc(-1 * #{$spacing-01});
      }

      &:visited {
        color: $link-primary;
      }

      &:visited:hover {
        color: $link-primary-hover;
      }
    }

    :host(#{$c4d-prefix}-masthead-l1-cta) {
      position: relative;
      z-index: 1;
      grid-area: cta;

      .#{$prefix}--masthead__l1-cta {
        @include desktop-button-base;
        @include type-style(body-short-01);

        display: inline-flex;
        align-items: flex-end;
        background-color: $background-brand;
        color: $layer-02;

        svg {
          color: inherit;
        }

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

        &:focus-visible {
          outline: $spacing-01 solid $layer-02;
          outline-offset: calc(-1 * #{$spacing-01});
        }

        &:active {
          background-color: $button-primary-active;
          color: $layer-02;
        }

        &:disabled {
          background-color: $text-disabled;
        }
      }

      .#{$prefix}--masthead__l1-cta-inner {
        display: inline-flex;
        align-items: center;
        gap: $spacing-03;
      }
    }

    .#{$prefix}--masthead__l1-login {
      @include desktop-button-base;
      @include type-style(body-short-01);

      display: inline-flex;
      align-items: flex-end;
      background-color: $background;
      color: $button-primary;
      grid-area: login;

      svg {
        color: inherit;
      }

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

      &:focus-visible {
        color: $button-primary;
        outline: $spacing-01 solid $focus;
        outline-offset: calc(-1 * #{$spacing-01});
      }

      &:active {
        background-color: $background-active;
        color: $button-primary-active;
        outline: $spacing-01 solid $focus;
        outline-offset: calc(-1 * #{$spacing-01});
      }
    }
  }
}