/**
 * 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/config' as *;
@use '@carbon/styles/scss/motion' 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/utilities/convert' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;

@mixin masthead-megamenu-limit-height {
  overflow: var(--#{$c4d-prefix}-masthead-overflow);
  max-block-size: var(--#{$c4d-prefix}-masthead-max-height);
}

@mixin masthead-megamenu {
  $l0-nav-height: $spacing-09;
  $l1-nav-height: to-rem(98px);

  @keyframes expand {
    0% {
      max-block-size: 0;
      overflow-y: hidden;
    }

    100% {
      max-block-size: 100%;
    }
  }

  @keyframes collapse {
    0% {
      max-block-size: 100vh;
    }

    100% {
      max-block-size: 0;
    }
  }

  :host(#{$c4d-prefix}-megamenu-top-nav-menu)
    .#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu,
  .#{$prefix}--header__nav
    .#{$prefix}--masthead__megamenu__l0-nav
    .#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu,
  .#{$prefix}--header__nav
    .#{$prefix}--masthead__megamenu__l1-nav
    .#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu {
    background-color: transparent;
    box-shadow: none;
    inset-block-end: 0;
  }

  :host(#{$c4d-prefix}-megamenu-top-nav-menu),
  .#{$prefix}--masthead__megamenu__l0-nav,
  .#{$prefix}--masthead__megamenu__l1-nav {
    .#{$prefix}--header__menu {
      position: fixed;
      display: block;
      inline-size: 100vw;
      inset-inline-start: 0;
      margin-block-end: $spacing-10;
      transform: translateZ(0.0001px);
      transition: visibility $transition-expansion $standard-easing;
      visibility: hidden;
    }

    .#{$prefix}--header__menu-title[aria-expanded='false']
      + .#{$prefix}--header__menu {
      ::slotted(#{$c4d-prefix}-megamenu),
      .#{$prefix}--masthead__megamenu {
        animation: $transition-expansion motion(standard, expressive) collapse;
      }
    }

    .#{$prefix}--header__menu-title[aria-expanded='true']
      + .#{$prefix}--header__menu {
      position: fixed;
      // TODO: come up with solution to fix height for cloud drupal without hardcoding
      block-size: calc(100vh - #{$spacing-10} - #{$spacing-09});
      // `100vw` in Shadow DOM causes delayed rendering bug in Safari
      // https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4493
      inline-size: var(--#{$c4d-prefix}-ce--viewport-width, 100vw);
      inset-inline-start: 0;
      margin-block-end: $spacing-10;
      min-block-size: 320px;
      transform: translateZ(0);
      visibility: visible;

      ::slotted(#{$c4d-prefix}-megamenu),
      .#{$prefix}--masthead__megamenu {
        animation: $transition-expansion motion(standard, expressive) expand;
      }
    }
  }

  :host(#{$c4d-prefix}-megamenu-top-nav-menu),
  .#{$prefix}--masthead__megamenu__l0-nav {
    .#{$prefix}--header__menu-title[aria-expanded='true']
      + .#{$prefix}--header__menu {
      inset-block-start: var(
        --#{$c4d-prefix}-masthead-l0-bottom-edge,
        $l0-nav-height
      );
    }
  }

  .#{$prefix}--masthead__megamenu__l1-nav
    .#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu {
    inset-block-start: $l1-nav-height;
  }

  :host(#{$c4d-prefix}-megamenu),
  .#{$prefix}--masthead__megamenu {
    @include box-shadow;
    --#{$c4d-prefix}-masthead-max-height: calc(
      100vh - var(--cds-spacing-09, 3rem) - var(--cds-layout-05, 4rem)
    );
    --#{$c4d-prefix}-masthead-overflow: auto;

    display: block;
    overflow: hidden auto;
    background-color: $background;

    &:focus {
      outline: none;
    }

    .#{$prefix}--masthead__megamenu__container {
      @include make-container;

      inline-size: 100vw;
    }

    .#{$prefix}--masthead__megamenu__container--row {
      background-color: $layer-accent-01;

      /**
       * Faceted (tab) and Simple (list) megamenus have different layouts between
       * 'md' and 'lg' breakpoints. This requires us to apply identical styles at
       * different breakpoints, and we must also leverage custom properties to assign
       * values across shadow roots. The concept is that these upper shadow roots have
       * the stateful information needed to dictate how elements in the lower shadow
       * roots should appear, and we can pass that information down via custom props.
       */
      &.#{$prefix}--masthead__megamenu__container--row--tab {
        @include make-row;

        flex-wrap: nowrap;
        gap: 1px;

        ::slotted(#{$c4d-prefix}-megamenu-right-navigation) {
          --#{$c4d-prefix}-right-nav-padding: #{$spacing-05};
        }
      }

      &.#{$prefix}--masthead__megamenu__container--row--list {
        @include breakpoint-down(lg) {
          @include masthead-megamenu-limit-height;
          --#{$c4d-prefix}-view-all-inset: calc(#{$spacing-05} * -1);
          --#{$c4d-prefix}-view-all-container-position: initial;
          --#{$c4d-prefix}-view-all-container-transform: initial;

          position: relative;
          z-index: 1;

          margin-inline: calc(#{$spacing-09} * -1);

          // Set containing block for fixed position view all CTA.
          transform: rotate(0deg);
        }

        @include breakpoint-up(lg) {
          @include make-row;

          flex-wrap: nowrap;
          gap: 1px;
        }

        ::slotted(#{$c4d-prefix}-megamenu-left-navigation),
        ::slotted(#{$c4d-prefix}-megamenu-right-navigation) {
          @include breakpoint-down(lg) {
            --#{$c4d-prefix}-view-all-padding: #{$spacing-05};
            --#{$c4d-prefix}-masthead-max-height: initial;
            --#{$c4d-prefix}-masthead-overflow: initial;

            overflow: initial;
            border-block-end: to-rem(1px) solid $layer-accent-01;

            inline-size: 100%;
            margin-inline: initial;
            max-block-size: initial;
            max-inline-size: initial;
            padding-inline: $spacing-07;

            .#{$prefix}--masthead__megamenu-container {
              overflow: initial;
              max-block-size: initial;
            }
          }
        }

        ::slotted(#{$c4d-prefix}-megamenu-left-navigation) {
          --#{$c4d-prefix}-left-nav-columns: 2;

          @include breakpoint-up(lg) {
            --#{$c4d-prefix}-left-nav-columns: initial;
          }
        }

        ::slotted(#{$c4d-prefix}-megamenu-right-navigation) {
          --#{$c4d-prefix}-right-nav-padding: 0;

          @include breakpoint-down(lg) {
            --#{$c4d-prefix}-view-all-display: none;

            border-block-end: none;
          }

          @include breakpoint-up(lg) {
            --#{$c4d-prefix}-right-nav-padding: #{$spacing-05};
          }
        }

        ::slotted([part*='view-all']) {
          --#{$c4d-prefix}-view-all-padding: #{$spacing-09};

          position: sticky;
          z-index: 1;
          background-color: $background;
          border-block-start: to-rem(1px) solid $layer-accent-01;
          inset-block-end: 0;

          @include breakpoint-up(lg) {
            display: none;
          }
        }
      }
    }

    ::slotted([role='tabpanel']) {
      inline-size: 100%;
    }
  }

  :host(#{$c4d-prefix}-megamenu-left-navigation),
  .#{$prefix}--masthead__megamenu__highlight-section,
  :host(#{$c4d-prefix}-megamenu-right-navigation),
  .#{$prefix}--masthead__megamenu__categories-section {
    position: relative;
    display: block;
    background-color: $background;
    padding-block-start: $spacing-06;

    .#{$prefix}--masthead__megamenu-container {
      @include masthead-megamenu-limit-height;

      position: var(--#{$c4d-prefix}-view-all-container-position, relative);
      z-index: 1;
      block-size: 100%;

      // Set containing block for fixed position view all CTA.
      transform: var(
        --#{$c4d-prefix}-view-all-container-transform,
        rotate(0deg)
      );

      &.#{$prefix}--masthead__megamenu-container--has-view-all-link {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .#{$prefix}--masthead__megamenu-container-inner {
          overflow: overlay;
          max-block-size: 100%;
        }

        .#{$prefix}--masthead__megamenu__view-all {
          position: relative;
          display: var(--#{$c4d-prefix}-view-all-display, inherit);
          background-color: $background;
        }

        .#{$prefix}--masthead__megamenu__view-all__border {
          position: absolute;
          background: $layer-accent-01;
          block-size: to-rem(1px);
          inset-block-start: 0;
        }
      }
    }
  }

  :host(#{$c4d-prefix}-megamenu-left-navigation),
  .#{$prefix}--masthead__megamenu__highlight-section {
    @include make-col(4, 16);

    margin-inline-start: calc(#{$spacing-05} * -1);

    min-block-size: 100%;

    // Shift border left without breaking Carbon grid alignment.
    padding-inline-start: $spacing-05;

    .#{$prefix}--masthead__megamenu__categories {
      columns: var(--#{$c4d-prefix}-left-nav-columns, 'initial');
      gap: 0;
    }

    .#{$prefix}--masthead__megamenu__view-all__border {
      inset-inline: 0;
    }
  }

  :host(#{$c4d-prefix}-megamenu-right-navigation),
  .#{$prefix}--masthead__megamenu__categories-section {
    display: block;
    inline-size: 100%;

    &.#{$c4d-prefix}--masthead__tabpanel-child {
      block-size: 100%;
    }

    &[style-scheme='has-sidebar'] {
      .#{$prefix}--masthead__megamenu__heading,
      .#{$prefix}--masthead__megamenu__categories {
        padding-inline-start: var(
          --#{$c4d-prefix}-right-nav-padding,
          $spacing-05
        );
      }
    }

    ::slotted(#{$c4d-prefix}-megamenu-heading) {
      --heading-description-column-count: 2;
      --heading-description-column-count-lg: 4;
    }

    .#{$prefix}--masthead__megamenu--has-view-all-link {
      .#{$prefix}--masthead__megamenu__categories {
        padding-block-end: 0;
      }
    }

    .#{$prefix}--masthead__megamenu-container--has-sidebar {
      ::slotted(#{$c4d-prefix}-megamenu-heading) {
        --heading-description-column-count: 2;
        --heading-description-column-count-lg: 3;
      }

      .#{$prefix}--masthead__megamenu__categories {
        @include breakpoint-up('lg') {
          column-count: 3;
        }
      }
    }

    .#{$prefix}--masthead__megamenu__categories {
      column-count: 2;
      column-gap: 0;
      padding-block-end: $spacing-07;

      @include breakpoint-up('lg') {
        column-count: 4;
      }
    }

    .#{$prefix}--masthead__megamenu__view-all__border {
      inset-inline: 0;
    }

    // Disable columns here so child element can reapply them.
    &[data-child-count='1'] {
      .#{$prefix}--masthead__megamenu__categories {
        column-count: initial;

        @include breakpoint-up('lg') {
          column-count: initial;
        }
      }
    }
  }

  .#{$prefix}--masthead__megamenu__heading,
  :host(#{$c4d-prefix}-megamenu-heading) {
    span {
      display: block;
      max-inline-size: calc(
        (1 / var(--heading-description-column-count, 2)) * 100%
      );

      @include breakpoint-up('lg') {
        max-inline-size: calc(
          (1 / var(--heading-description-column-count-lg, 4)) * 100%
        );
      }
    }
  }

  .#{$prefix}--masthead__megamenu__copy,
  :host(#{$c4d-prefix}-megamenu-category-group-copy) {
    @include type-style('body-short-01');

    display: block;
    margin: to-rem(6px) $spacing-05 to-rem(10px);
    color: $text-secondary;
    max-inline-size: to-rem(272px);
  }

  :host(#{$c4d-prefix}-megamenu-category-group),
  .#{$prefix}--masthead__megamenu__category-group {
    display: block;

    &.only-child {
      /**
       * Necessary to accommodate Safari issue with columns.
       *
       * Container height is calculated before breaking into specified number
       * of columns, which causes extra blank whitespace beneath column content.
       */
      .#{$prefix}--masthead__megamenu__category-group-content-wrapper {
        display: inline;
      }

      .#{$prefix}--masthead__megamenu__category-group-heading {
        @include make-col(1, 2);

        @include breakpoint-up('lg') {
          @include make-col(1, 3);
        }
      }

      .#{$prefix}--masthead__megamenu__category-group-content {
        column-count: 2;
        column-gap: 0;

        @include breakpoint-up('lg') {
          column-count: 3;
        }
      }

      ::slotted(#{$c4d-prefix}-megamenu-category-link) {
        display: block;
        break-inside: avoid;
      }
    }

    .#{$prefix}--masthead__megamenu__category-group-content-wrapper {
      display: inline-block;
      inline-size: 100%;
      padding-block-end: $spacing-06;
    }

    .#{$prefix}--masthead__megamenu__copy,
    ::slotted(#{$c4d-prefix}-megamenu-category-group-copy) {
      @include type-style('body-short-01');

      margin: to-rem(-6px) $spacing-05 $spacing-06;

      color: $text-secondary;
    }
  }

  :host(#{$c4d-prefix}-megamenu-link-with-icon) {
    span {
      flex: inherit;
    }

    ::slotted([slot='icon']) {
      transform: none;
      /* stylelint-disable-next-line comment-whitespace-inside */
      /* !rtl:raw:
      transform: scaleX(-1);
      */
    }
  }

  :host(
      #{$c4d-prefix}-megamenu-link-with-icon
    )[style-scheme='category-headline'] {
    inline-size: 100%;

    p,
    a,
    .#{$prefix}--link-with-icon {
      padding: to-rem(6px) $spacing-05;
      inline-size: 100%;
      margin-block-end: $spacing-06;
    }

    p,
    a,
    .#{$prefix}--link-with-icon,
    ::slotted(span),
    span {
      @include type-style(heading-03, true);

      color: $text-secondary;
      text-decoration: none;
    }

    ::slotted(span),
    span {
      flex: inherit;
    }

    ::slotted(svg),
    svg {
      fill: $text-secondary;
      min-inline-size: $spacing-05;
    }

    &:visited,
    &:hover {
      color: $text-secondary;
    }
  }

  :host(#{$c4d-prefix}-megamenu-category-link) a,
  .#{$prefix}--masthead__megamenu__category-sublink {
    @include type-style('body-short-01');

    display: block;
    padding: to-rem(6px) $spacing-05;

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

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

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

  .#{$prefix}--masthead__megamenu__category-sublink--highlighted,
  :host(
      #{$c4d-prefix}-megamenu-link-with-icon
    )[style-scheme='category-sublink'] {
    @include type-style('body-compact-01');

    inline-size: 100%;

    a {
      padding: to-rem(7px) $spacing-05;
      inline-size: 100%;
    }

    span {
      flex: inherit;
    }
  }

  :host(#{$c4d-prefix}-megamenu-link-with-icon)[part*='view-all'],
  .#{$prefix}--masthead__megamenu__view-all-cta {
    display: flex;
    inline-size: 100%;

    &[part*='view-all-left'] {
      [part='link'] {
        padding-inline-start: $spacing-05;
      }
    }

    [part='link'] {
      block-size: $spacing-09;
      inline-size: 100%;
      padding-inline: var(--#{$c4d-prefix}-view-all-padding, #{$spacing-07})
        $spacing-05;
      text-decoration: none;

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

    ::slotted(span) {
      align-self: center;
      vertical-align: middle;
    }

    span {
      @include type-style('body-compact-01');

      flex: inherit;
    }
  }

  :host(#{$c4d-prefix}-megamenu-category-link) a,
  :host(#{$c4d-prefix}-megamenu-link-with-icon) a,
  .#{$prefix}--masthead__megamenu__category-sublink--highlighted,
  .#{$prefix}--masthead__megamenu__view-all-cta .#{$prefix}--link-with-icon,
  .#{$prefix}--masthead__megamenu__category-sublink {
    &:focus,
    &:active {
      @include focus-outline;

      outline-offset: -#{$spacing-01};

      outline-width: $spacing-01;
    }

    &:active,
    &:hover {
      background-color: $background-hover;
      text-decoration: none;
    }

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