/**
 * Copyright IBM Corp. 2016, 2023
 *
 * 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/components/button/tokens' as *;
@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 '../../globals/vars' as *;
@use '../../globals/imports' as *;

// Include left navigation component
/// @access private
/// @group masthead

@mixin masthead-leftnav {
  .#{$prefix}--masthead__focus {
    position: absolute;
    border: none;
    opacity: 0;
  }

  .#{$prefix}--masthead .#{$prefix}--side-nav__navigation {
    block-size: calc(100% - #{$spacing-09});

    > nav {
      block-size: 100%;
    }

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

  .#{$prefix}--header__menu-trigger {
    margin-inline-end: 0;

    .#{$prefix}--side-nav__close {
      display: none;
    }

    &.#{$prefix}--header__action--active {
      border-color: transparent;
      background-color: $background;

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

      + .#{$prefix}--header__logo {
        z-index: 6001;
        margin-inline-start: $spacing-09;
      }

      .#{$prefix}--side-nav__close {
        display: inline;
      }

      .#{$prefix}--side-nav__open {
        display: none;
      }
    }

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

    @include breakpoint-between('md', 'lg') {
      + .#{$prefix}--header__logo {
        a {
          padding: 0 $spacing-05;
        }
      }
    }
  }

  .#{$prefix}--side-nav__header-navigation {
    block-size: 100%;
    margin-block-end: 0;
  }

  .#{$prefix}--masthead {
    .#{$prefix}--side-nav {
      inset-inline-start: -100vw;
      transform: translateZ(0.0001px);
      /* stylelint-disable-next-line  time-min-milliseconds */
      transition: visibility 1ms motion(exit, productive) $duration-fast-02,
        inset-inline-start $duration-fast-02 motion(exit, productive) 1ms;
      visibility: hidden;

      &:not(.#{$prefix}--side-nav--fixed):hover {
        @include breakpoint-down(md) {
          inline-size: 100vw;
          max-inline-size: 100vw;
        }
      }

      .#{$prefix}--header__logo {
        block-size: $spacing-09;
        padding-inline-start: $spacing-09;
      }
    }

    // need to set width so transition works on tablet
    .#{$prefix}--side-nav,
    .#{$prefix}--side-nav--expanded {
      inline-size: 16rem;
      max-inline-size: 16rem;
    }

    .#{$prefix}--side-nav__items {
      block-size: 100%;
      padding-block-start: 0;
    }

    .#{$prefix}--side-nav__item {
      block-size: auto;
      min-block-size: $spacing-09;

      .#{$prefix}--side-nav__submenu {
        block-size: 100%;
      }
    }

    .#{$prefix}--side-nav__overlay {
      z-index: 1000;
      inset-block-start: 0;
      @include breakpoint-down(md) {
        background-color: $background;
      }
    }

    .#{$prefix}--side-nav__overlay-active {
      display: none;
      @include breakpoint-down(800px) {
        display: block;
        background-color: $overlay;
      }
    }

    .#{$prefix}--side-nav--expanded {
      inset-inline-start: 0;
      overflow-y: auto;
      transform: translateZ(0.0001px);
      /* 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;
    }

    .#{$prefix}--side-nav--ux,
    .#{$prefix}--side-nav,
    .#{$prefix}--side-nav--expanded {
      @include breakpoint-down(md) {
        border-block-start: 1px solid $layer-accent-01;
        inline-size: 100vw;
        max-inline-size: 100vw;
      }
    }
  }

  :host(#{$c4d-prefix}-left-nav-menu-section),
  .#{$prefix}--side-nav__menu-section {
    @include theme($white, true);

    position: absolute;
    z-index: 0;
    background-color: $background;
    block-size: 100%;
    inline-size: 100%;
    inset-inline-start: -100%;
    overflow-y: auto;
    padding-block-end: $spacing-09;
    transform: translateZ(0.0001px);
    transition: inset-inline-start $duration-moderate-01
      motion(exit, productive);

    a {
      @include type-style(body-compact-02);

      block-size: $spacing-09;

      padding-inline-start: $spacing-05;

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

    .#{$prefix}--masthead__side-nav--submemu-title {
      @include type-style(heading-compact-02);

      display: flex;
      align-items: center;
      padding: 0.8rem $spacing-05;
      block-size: auto;
      border-block-end: 1px solid $toggle-off;
      color: $text-primary;
      min-block-size: $spacing-09;
      text-decoration: none;

      &:focus {
        outline: $spacing-01 solid $focus;
        outline-offset: -#{$spacing-01};
      }
    }

    .#{$prefix}--side-nav__item
      .#{$prefix}--masthead__side-nav--submemu-section-title {
      padding: 0;
      block-size: auto;
      min-block-size: $spacing-09;

      span {
        @include type-style(heading-compact-02);

        display: flex;
        padding: 0.8rem $spacing-05;
        border-block-end: 1px solid $toggle-off;
        color: $text-primary;
        inline-size: 100%;
      }
    }

    .#{$prefix}--masthead__side-nav--submemu-section-title__icon {
      display: flex;
      flex: 1;
      align-items: center;
      align-self: flex-start;
      justify-content: flex-end;
      margin-block-start: $spacing-01;
    }
  }

  a,
  button {
    &.#{$prefix}--side-nav__link {
      block-size: $spacing-09;
      @include type-style(body-short-01);

      > {
        .#{$prefix}--side-nav__link-text {
          @include type-style(body-short-01);

          display: flex;
          align-items: center;
          block-size: 100%;
          color: $text-secondary;
          inline-size: 100%;
          text-overflow: ellipsis;
        }
      }

      &:hover,
      &:focus {
        > {
          .#{$prefix}--side-nav__link-text {
            color: $text-primary;
          }
        }
      }
    }

    &.#{$prefix}--side-nav__link--current {
      background-color: $background;

      > {
        .#{$prefix}--side-nav__link-text {
          color: $text-primary;
        }
      }
    }
  }

  .#{$prefix}--masthead__side-nav--submemu-back {
    position: sticky;
    z-index: 1;
    background-color: $background;
    inset-block-start: 0;

    button {
      position: relative;
      display: flex;
      align-items: center;
      padding: 0 $spacing-05;
      border: none;
      background-color: $background;
      cursor: pointer;
      inline-size: 100%;
      min-block-size: $spacing-07;
      outline: $spacing-01 solid transparent;
      outline-offset: -#{$spacing-01};

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

        > .#{$prefix}--side-nav__link-text {
          color: $link-primary-hover;
        }
      }

      &:focus {
        outline: 2px solid $focus;
        outline-offset: -2px;

        > .#{$prefix}--side-nav__link-text {
          color: $link-primary;
        }
      }

      > .#{$prefix}--side-nav__link-text {
        @include type-style(body-short-01);

        display: flex;
        align-items: center;
        border-block-end: none;

        color: $link-primary;
      }

      svg {
        margin-inline-end: 5px;

        path {
          fill: currentColor;
        }

        :host([dir='rtl']) & {
          transform: rotate(180deg);
        }
      }
    }
  }

  :host(#{$c4d-prefix}-left-nav-menu-section)[expanded],
  .#{$prefix}--side-nav__menu-section--expanded {
    z-index: 1;
    inset-inline-start: 0;
  }

  :host(#{$c4d-prefix}-left-nav-menu-section)[is-submenu],
  .#{$prefix}--side-nav__menu-section-submenu {
    inset-inline-start: 100%;
  }

  :host(#{$c4d-prefix}-left-nav-menu-section)[is-submenu][expanded],
  .#{$prefix}--side-nav__menu-section-submenu.#{$prefix}--side-nav__menu-section--expanded {
    inset-inline-start: 0;
  }

  :host(#{$c4d-prefix}-left-nav-menu-section)[is-submenu][transition],
  .#{$prefix}--side-nav__menu-section-submenu--expanded {
    inset-inline-start: -100%;
  }

  .#{$prefix}--side-nav__menu {
    transform: translateX(100%);
  }

  .#{$prefix}--side-nav__menu--hasactivechildren {
    overflow: hidden;
  }

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

    .#{$prefix}--side-nav__submenu-content {
      display: flex;
      block-size: auto;
      inline-size: 100%;
      min-block-size: $spacing-09;
    }

    .#{$prefix}--side-nav__submenu-title {
      @include type-style(body-short-01);

      align-self: center;

      color: $text-secondary;
    }

    &[aria-haspopup='true'] {
      block-size: $spacing-09;
      &.#{$prefix}--side-nav__submenu-platform {
        block-size: $spacing-09;
        border-block-end: 1px solid $toggle-off;
        border-block-start: 1px solid $layer-accent-01;
        color: $text-primary;
        text-decoration: none;

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

    &:hover,
    &:focus {
      .#{$prefix}--side-nav__submenu-title {
        color: $text-primary;
      }
    }
  }

  .#{$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;
    text-overflow: initial;
    white-space: normal;
  }

  .#{$prefix}--masthead__side-nav--submemu-heading,
  :host(#{$c4d-prefix}-left-nav-menu-category-heading) {
    @include type-style('body-short-01');

    display: block;
    color: $text-secondary;

    &:is(.#{$prefix}--left-nav-menu-category__heading-large) {
      margin: $spacing-03 0 $spacing-06;

      .#{$prefix}--side-nav__heading {
        padding: 0;
      }
    }

    .#{$prefix}--side-nav__heading {
      padding: $spacing-05 0;
      block-size: auto;
    }

    .#{$prefix}--side-nav__heading-title {
      display: block;
      padding: 0 $spacing-05;

      &:where(a) {
        display: inline-flex;
        align-items: center;
        color: inherit;
        gap: $spacing-03;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }

        &:focus {
          color: $text-primary;
          outline: 2px solid $focus;
          outline-offset: -2px;
        }
      }
    }

    .#{$prefix}--side-nav__heading-description {
      padding: 0 $spacing-05;
    }

    ::slotted(:first-child) {
      padding-block-start: $spacing-03;
    }

    h2 {
      @include type-style(productive-heading-01);

      color: $text-primary;
    }

    h2.#{$prefix}--side-nav__menu-section-title {
      @include type-style(productive-heading-03);

      + .#{$prefix}--side-nav__heading-description {
        margin-block-start: $spacing-03;
      }
    }
  }

  /* stylelint-disable selector-pseudo-class-parentheses-space-inside */
  :host(#{$c4d-prefix}-left-nav-menu-category-heading):not(
      .#{$prefix}--left-nav-menu-category__heading-large
    ),
  :host(#{$c4d-prefix}-left-nav-menu),
  :host(#{$c4d-prefix}-left-nav-menu-item) {
    display: block;
    border-block-end: 1px solid $layer-accent-01;
  }
  /* stylelint-enable selector-pseudo-class-parentheses-space-inside */

  :host(#{$c4d-prefix}-left-nav-menu-item) {
    .#{$prefix}--side-nav__link {
      display: flex;
      align-items: center;
      block-size: auto;
      inline-size: 100%;
      min-block-size: $spacing-09;
      padding-inline-start: $spacing-05;

      &:not(:is(a)):hover {
        background-color: transparent;
      }
    }

    &.#{$prefix}--side-nav__group-header {
      &:not(:first-of-type) {
        margin-block-start: $spacing-07;
      }

      .#{$prefix}--side-nav__link-text {
        @include type-style(productive-heading-01);

        display: inline-flex;
        align-items: center;
        justify-content: space-between;

        color: $text-primary;
        gap: $spacing-03;

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

    &.#{$prefix}--side-nav__group-view-all {
      &:hover {
        .#{$prefix}--side-nav__link-text {
          color: $link-primary-hover;
        }
      }

      .#{$prefix}--side-nav__link-text {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        color: $button-primary;
        gap: $spacing-03;

        svg {
          color: $button-primary;
        }
      }
    }
  }

  .#{$prefix}--masthead__side-nav--submemu--selected {
    border-inline-start: 3px solid $background-brand;

    .#{$prefix}--side-nav__submenu-title,
    &.#{$prefix}--side-nav__link .#{$prefix}--side-nav__link-text {
      font-weight: carbon--font-weight('semibold');
    }
  }

  .#{$prefix}--side-nav__submenu-chevron,
  .#{$prefix}--side-nav__submenu[aria-expanded='true']
    .#{$prefix}--side-nav__submenu-chevron {
    > svg {
      fill: $text-primary;
      transform: rotate(-90deg);

      :host([dir='rtl']) & {
        transform: rotate(90deg) scale(1.25);
      }
    }
  }

  .#{$prefix}--side-nav__item .#{$prefix}--side-nav__link,
  .#{$prefix}--side-nav__menu-item
    .#{$prefix}--side-nav__link:not([isbackbutton='true']),
  :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 {
    display: flex;
    block-size: auto;
    inline-size: 100%;
    min-block-size: $spacing-09;
    padding-inline-start: $spacing-05;
  }

  .#{$prefix}--side-nav__submenu-platform {
    flex-direction: row;

    &::after {
      content: none;
    }
  }
}