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

.#{$ide-prefix}-navigation {
  height: 100%;
  padding-top: $spacing-09;
}

.#{$ide-prefix}-navigation__hide-nav {
  width: 0;
  visibility: hidden;
}

.#{$ide-prefix}-navigation--nav-overrides {
  // stylelint-disable-next-line declaration-property-value-disallowed-list
  height: unset; /* we will define the height */
  // stylelint-disable-next-line carbon/motion-easing-use
  transition: all $duration--fast-01 cubic-bezier(0.2, 0, 1, 0.9);
}

.#{$ide-prefix}-navigation--content {
  overflow: auto;
  height: 100%;
  // remove all padding from the carbon content area - leave padding bottom, as products may use this to add extra space to their content
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
  margin: 0;
  background: $ui-01;

  // IMPORTANT - required so any fixed content renders in the correct place. Issue  raised to address. Short term, disable this as does nothing for us
  // stylelint-disable-next-line declaration-property-value-disallowed-list
  transform: unset;
  // stylelint-disable-next-line carbon/motion-easing-use
  transition: all $duration--fast-01 cubic-bezier(0.2, 0, 1, 0.9);
}

.#{$ide-prefix}-navigation--content__hide-nav {
  // stylelint-disable-next-line declaration-no-important
  margin-left: 0 !important; /* required to enable smooth animation when left nav is not rendered */
}

// make the footer's icon align corrently
.#{$ide-prefix}-navigation--toggle {
  .#{$prefix}--side-nav__toggle {
    .#{$prefix}--side-nav__icon {
      width: carbon--mini-units(6);
      // stylelint-disable-next-line declaration-property-value-disallowed-list
      justify-content: unset;
      // stylelint-disable-next-line declaration-property-value-disallowed-list
      margin-right: unset;
    }
  }
}

// remove the hover behaviour from the side nav
.#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(
    .#{$prefix}--side-nav--fixed
  ):not(.#{$prefix}--side-product-nav):hover {
  width: carbon--mini-units(6);
}

.#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(
    .#{$prefix}--side-nav--fixed
  ):not(.#{$prefix}--side-product-nav):hover.#{$prefix}--side-nav--expanded {
  width: carbon--mini-units(32);
}

// overrides - colours. As the UI shell has a seperate theme to the rest of carbon (which currently cannot be changed), override the colours here with the carbon colours we need
.#{$ide-prefix}-navigation--nav-theme {
  // general side nav colour
  background-color: $ui-05;

  //side nav links and menu hover/active states
  a.#{$prefix}--side-nav__link,
  .#{$prefix}--side-nav__submenu {
    background-color: $ui-05;

    &.active {
      // stylelint-disable-next-line declaration-no-important, carbon/theme-token-use
      background-color: $carbon--gray-90 !important; /* simpler/safer than overriding the carbon selector */
      // stylelint-disable-next-line declaration-no-important
      color: $active-ui !important; /* simpler/safer than overriding the carbon selector */
    }

    &:hover {
      // stylelint-disable-next-line declaration-no-important
      background-color: $inverse-02 !important; /* simpler/safer than overriding the carbon selector */
      // stylelint-disable-next-line declaration-no-important
      color: $active-ui !important; /* simpler/safer than overriding the carbon selector */
    }
  }

  a.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__link-text,
  .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu-title,
  .#{$prefix}--side-nav__submenu {
    // stylelint-disable-next-line declaration-no-important
    color: $active-ui !important; /* simpler/safer than overriding the carbon selector */
  }

  // menu and link when active (and not expanded for the menu)
  .#{$prefix}--side-nav__item--active
    .#{$prefix}--side-nav__submenu[aria-expanded='false'],
  a.#{$prefix}--side-nav__link--current {
    // stylelint-disable-next-line declaration-no-important
    background-color: $ui-05 !important; /* simpler/safer than overriding the carbon selector */

    &:hover {
      // stylelint-disable-next-line declaration-no-important
      background-color: $inverse-02 !important; /* simpler/safer than overriding the carbon selector */
      // stylelint-disable-next-line declaration-no-important
      color: $active-ui !important; /* simpler/safer than overriding the carbon selector */
    }
  }

  // all icons
  .#{$prefix}--side-nav__icon {
    svg {
      fill: $text-04;
    }
  }

  // the footer
  .#{$prefix}--side-nav__footer {
    background-color: $ui-05;
  }
}

// alt hover state for SideNavLink components. Only applies when the nav is not expanded
:not(.#{$prefix}--side-nav--expanded)
  > .#{$prefix}--side-nav__items
  > .#{$prefix}--side-nav__item
  > .#{$ide-prefix}-navigation--altHover-link:hover {
  // add an arrow to the left of the provided text
  .#{$prefix}--side-nav__link-text::before {
    position: fixed;
    width: 0;
    height: 0;
    border-top: carbon--mini-units(1) solid transparent;
    border-right: carbon--mini-units(1) solid $ui-05;
    border-bottom: carbon--mini-units(1) solid transparent;
    margin-left: carbon--mini-units(-2.5);
    content: '';
  }

  // class to expand the bounding box for the hover state
  .#{$prefix}--side-nav__link-text::after {
    position: fixed;
    width: carbon--mini-units(8);
    height: carbon--mini-units(4);
    margin-left: carbon--mini-units(-4.5);
    content: '';
  }

  .#{$prefix}--side-nav__link-text {
    position: fixed;
    // flex required to get text and arrow equally spaced/aligned
    display: flex;
    align-items: center;
    padding: carbon--mini-units(1) carbon--mini-units(2);
    border-radius: $spacing-02;
    margin-left: carbon--mini-units(4.5);
    background-color: $ui-05;
    font-weight: carbon--font-weight('regular');
  }
}