//
// Copyright IBM Corp. 2016, 2018
//
// 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 "../mixins" as *;
@use "../functions" as *;
@use "../../../breakpoint" as *;
@use "../../../config" as *;
@use "../../../motion" as *;
@use "../../../spacing" as *;
@use "../../../theme" as *;
@use "../../../type" as *;
@use "../../../utilities/button-reset";
@use "../../../utilities/convert" as *;
@use "../../../utilities/focus-outline" as *;
@use "../../../utilities/high-contrast-mode" as *;
@use "../../../utilities/z-index" as *;

/// UI shell side nav
/// @access private
/// @group ui-shell
@mixin side-nav {
  //----------------------------------------------------------------------------
  // Side-nav > Panel
  //----------------------------------------------------------------------------.
  .#{$prefix}--side-nav {
    position: fixed;
    z-index: z("header");
    top: 0;
    bottom: 0;
    left: 0;
    // Useful to toggle this property to see what's going on when not expanded
    overflow: hidden;
    width: mini-units(6);
    max-width: mini-units(32);
    background-color: $background-main;
    color: $text-body-secondary;
    // TODO: sync with motion work
    transition: width 0.11s cubic-bezier(0.2, 0, 1, 0.9);
    will-change: width;
  }

  .#{$prefix}--side-nav--ux {
    top: $spacing-09;
    width: mini-units(32);

    @include breakpoint-down("lg") {
      width: 0;
    }
  }

  //----------------------------------------------------------------------------
  // Rail
  //---------------------------------------------------------------------------
  // Used for rendering the actual side rail. There are two states that we have
  // to style for, namely for when the rail is collapsed and expanded. When
  // collapsed, the rail is intended to expand on mouse over. When expanded, it
  // should have the same dimensions as when expanded on mouse over

  .#{$prefix}--side-nav--rail {
    width: mini-units(6);
  }

  .#{$prefix}--side-nav--hidden {
    width: 0;
  }

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

  .#{$prefix}--side-nav__overlay {
    position: fixed;
    top: calcRem(48px);
    left: 0;
    width: 0;
    height: 0;
    background-color: transparent;
    opacity: 0;
    transition: opacity $transition--expansion $standard-easing,
      background-color $transition--expansion $standard-easing;
  }

  .#{$prefix}--side-nav__overlay-active {
    @include breakpoint-down("lg") {
      width: 100vw;
      height: 100vh;
      background-color: $overlay;
      opacity: 1;
      transition: opacity $transition--expansion $standard-easing,
        background-color $transition--expansion $standard-easing;
    }
  }

  // When used alongside the header, we update the `top` positioning so that we
  // can fit both widgets on the same page without overlapping.
  .#{$prefix}--header ~ .#{$prefix}--side-nav {
    top: mini-units(6);
    height: calc(100% - 48px);
  }

  .#{$prefix}--side-nav--fixed {
    width: mini-units(32);
  }

  .#{$prefix}--side-nav--collapsed {
    width: mini-units(32);
    transform: translateX(mini-units(-32));
  }

  //----------------------------------------------------------------------------
  // Side-nav > Navigation
  //----------------------------------------------------------------------------
  .#{$prefix}--side-nav__navigation {
    display: flex;
    height: 100%;
    flex-direction: column;
  }

  //----------------------------------------------------------------------------
  // Side-nav > Navigation > Item(s)
  //----------------------------------------------------------------------------
  .#{$prefix}--side-nav__items {
    overflow: hidden;
    flex: 1 1 0%;
    padding: 1rem 0 0;

    @include expanded() {
      overflow-y: auto;
    }
  }

  .#{$prefix}--side-nav--ux .#{$prefix}--side-nav__items {
    overflow-y: auto;
  }

  .#{$prefix}--side-nav__item {
    overflow: hidden;
    width: auto;
    height: auto;
  }

  .#{$prefix}--side-nav--ux .#{$prefix}--side-nav__item {
    width: auto;
    height: auto;
  }

  .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active):hover
    .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
    > .#{$prefix}--side-nav__submenu:hover,
  .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
    > .#{$prefix}--side-nav__link:hover,
  .#{$prefix}--side-nav__menu
    a.#{$prefix}--side-nav__link:not(.#{$prefix}--side-nav__link--current):not(
      [aria-current="page"]
    ):hover,
  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item:hover,
  .#{$prefix}--side-nav
    .#{$prefix}--header__menu-title[aria-expanded="true"]:hover {
    // TODO: sync color
    background-color: $background-hover;
    color: $text-body-default;
  }

  .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
    > .#{$prefix}--side-nav__link:hover
    > span,
  .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
    .#{$prefix}--side-nav__menu-item
    > .#{$prefix}--side-nav__link:hover
    > span {
    color: $text-body-default;
  }

  .#{$prefix}--side-nav__item--large {
    height: mini-units(6);
  }

  //----------------------------------------------------------------------------
  // Side-nav > Navigation > Divider
  //----------------------------------------------------------------------------
  .#{$prefix}--side-nav__divider {
    height: 1px;
    margin: $spacing-03 $spacing-05;
    background-color: $border-subtle;
  }

  //----------------------------------------------------------------------------
  // Side-nav > Navigation > {Menu,Submenu}
  //----------------------------------------------------------------------------
  .#{$prefix}--side-nav__submenu {
    @include button-reset.reset($width: true);
    @include type-style("productive-heading-01");
    @include focus-outline("reset");

    display: flex;
    height: mini-units(4);
    align-items: center;

    padding: 0 mini-units(2);
    color: $text-body-secondary;
    transition: color $duration-fast-02, background-color $duration-fast-02,
      outline $duration-fast-02;
    user-select: none;
  }

  .#{$prefix}--side-nav__submenu:hover {
    background-color: $background-hover;
    color: $text-body-default;
  }

  .#{$prefix}--side-nav__submenu:focus {
    @include focus-outline("outline");
  }

  .#{$prefix}--side-nav__submenu-title {
    @include text-overflow();

    text-align: left;
  }

  .#{$prefix}--side-nav__icon.#{$prefix}--side-nav__submenu-chevron {
    display: flex;
    flex: 1;
    justify-content: flex-end;
  }

  .#{$prefix}--side-nav__submenu-chevron > svg {
    width: calcRem(16px);
    height: calcRem(16px);
    transition: transform $duration-fast-02;
  }

  .#{$prefix}--side-nav__submenu[aria-expanded="true"]
    .#{$prefix}--side-nav__submenu-chevron
    > svg {
    transform: rotate(180deg);
  }

  .#{$prefix}--side-nav__item--large .#{$prefix}--side-nav__submenu {
    height: mini-units(6);
  }

  .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu:hover {
    //the active className is used for selected styles, hence using the selected tokens
    background-color: $background-selected;
    color: $text-body-default;
  }

  .#{$prefix}--side-nav__item--active
    .#{$prefix}--side-nav__submenu[aria-expanded="false"] {
    position: relative;
    background-color: $background-selected;
    color: $text-body-default;
    &::before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 3px;
      background-color: $border-interactive;
      content: "";
    }
  }

  .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu-title {
    color: $text-body-default;
    font-weight: 600;
  }

  .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__icon > svg {
    fill: $icon-primary;
  }

  .#{$prefix}--side-nav__menu {
    display: block;
    max-height: 0;
    visibility: hidden;
  }

  .#{$prefix}--side-nav__submenu[aria-expanded="true"]
    + .#{$prefix}--side-nav__menu {
    max-height: calcRem(1500px);
    visibility: inherit;
  }

  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link {
    height: mini-units(4);
    min-height: mini-units(4);
    padding-left: mini-units(4);
    font-weight: 400;
  }

  .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
    a.#{$prefix}--side-nav__link {
    padding-left: mini-units(9);
  }
  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link--current,
  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link[aria-current="page"],
  a.#{$prefix}--side-nav__link--current {
    background-color: $background-selected;

    > span {
      color: $text-body-default;
      font-weight: 600;
    }
  }

  //----------------------------------------------------------------------------
  // Side-nav > Link
  //----------------------------------------------------------------------------
  a.#{$prefix}--side-nav__link,
  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item,
  .#{$prefix}--side-nav
    .#{$prefix}--header__menu-title[aria-expanded="true"]
    + .#{$prefix}--header__menu {
    @include focus-outline("reset");
    @include type-style("productive-heading-01");

    position: relative;
    display: flex;
    min-height: mini-units(4);
    align-items: center;
    padding: 0 mini-units(2);
    text-decoration: none;
    transition: color $duration-fast-02, background-color $duration-fast-02,
      outline $duration-fast-02;
  }

  .#{$prefix}--side-nav__item--large a.#{$prefix}--side-nav__link {
    height: mini-units(6);
  }

  a.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__link-text,
  .#{$prefix}--side-nav
    a.#{$prefix}--header__menu-item
    .#{$prefix}--text-truncate-end {
    @include text-overflow();

    color: $text-body-secondary;
    font-size: calcRem(14px);
    letter-spacing: 0.1px;
    line-height: 1.25rem;
    user-select: none;
  }

  a.#{$prefix}--side-nav__link:focus,
  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item:focus {
    @include focus-outline("outline");
  }

  a.#{$prefix}--side-nav__link[aria-current="page"],
  a.#{$prefix}--side-nav__link--current {
    background-color: $background-selected;
    font-weight: 600;
  }

  a.#{$prefix}--side-nav__link[aria-current="page"]
    .#{$prefix}--side-nav__link-text,
  a.#{$prefix}--side-nav__link--current .#{$prefix}--side-nav__link-text {
    color: $text-body-default;
  }

  a.#{$prefix}--side-nav__link[aria-current="page"]::before,
  a.#{$prefix}--side-nav__link--current::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background-color: $border-interactive;
    content: "";
  }

  //----------------------------------------------------------------------------
  // Side-nav > Icons
  //----------------------------------------------------------------------------
  .#{$prefix}--side-nav__icon {
    display: flex;
    // Helpful in flex containers so the icon does not have less than the
    // expected width
    flex: 0 0 mini-units(2);
    align-items: center;
    justify-content: center;
  }

  .#{$prefix}--side-nav__icon:not(.#{$prefix}--side-nav__submenu-chevron) {
    margin-right: mini-units(3);
  }

  .#{$prefix}--side-nav__icon > svg {
    width: mini-units(2);
    height: mini-units(2);
    fill: $icon-secondary;
  }

  .#{$prefix}--side-nav__icon > svg.#{$prefix}--side-nav-collapse-icon {
    display: none;
  }

  .#{$prefix}--side-nav--expanded
    .#{$prefix}--side-nav__icon
    > svg.#{$prefix}--side-nav-expand-icon {
    display: none;
  }

  .#{$prefix}--side-nav--expanded
    .#{$prefix}--side-nav__icon
    > svg.#{$prefix}--side-nav-collapse-icon {
    display: block;
  }

  //----------------------------------------------------------------------------
  // Variants - Fixed
  //----------------------------------------------------------------------------
  .#{$prefix}--side-nav--fixed a.#{$prefix}--side-nav__link,
  .#{$prefix}--side-nav--fixed .#{$prefix}--side-nav__submenu {
    padding-left: mini-units(2);
  }

  .#{$prefix}--side-nav--fixed
    .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--icon)
    .#{$prefix}--side-nav__menu
    a.#{$prefix}--side-nav__link {
    padding-left: mini-units(4);
  }

  //----------------------------------------------------------------------------
  // Variants - Header Nav Links in Side Nav
  //----------------------------------------------------------------------------
  .#{$prefix}--side-nav .#{$prefix}--header__nav {
    @include breakpoint-down("lg") {
      display: block;
    }
  }

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

    @include breakpoint-down("lg") {
      position: relative;
      display: block;
      margin-bottom: calcRem(32px);
    }
  }

  .#{$prefix}--side-nav__header-divider::after {
    position: absolute;
    bottom: calcRem(-16px);
    left: calcRem(16px);
    width: calc(100% - 32px);
    height: calcRem(1px);
    background: $border-subtle;
    content: "";
  }

  //header menu items overrides
  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item {
    justify-content: space-between;
    color: $text-body-secondary;
    white-space: nowrap;

    &[aria-expanded="true"] {
      background-color: transparent;
    }
  }

  .#{$prefix}--side-nav
    .#{$prefix}--header__menu-title[aria-expanded="true"]
    + .#{$prefix}--header__menu {
    bottom: inherit;
    width: 100%;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    transform: none;

    li {
      width: 100%;
    }

    a.#{$prefix}--header__menu-item {
      padding-left: 4.25rem;
      font-weight: 400;
    }

    a.#{$prefix}--header__menu-item:hover {
      background-color: $background-hover;
      color: $text-body-default;
    }
  }

  .#{$prefix}--side-nav
    .#{$prefix}--header__menu
    a.#{$prefix}--header__menu-item {
    height: inherit;
  }

  .#{$prefix}--side-nav
    a.#{$prefix}--header__menu-item:hover
    .#{$prefix}--header__menu-arrow,
  .#{$prefix}--side-nav
    a.#{$prefix}--header__menu-item:focus
    .#{$prefix}--header__menu-arrow,
  .#{$prefix}--side-nav .#{$prefix}--header__menu-arrow {
    fill: $icon-secondary;
  }

  // Windows HCM fix
  .#{$prefix}--side-nav__icon > svg,
  .#{$prefix}--side-nav
    a.#{$prefix}--header__menu-item:hover
    .#{$prefix}--header__menu-arrow,
  .#{$prefix}--side-nav
    a.#{$prefix}--header__menu-item:focus
    .#{$prefix}--header__menu-arrow,
  .#{$prefix}--side-nav .#{$prefix}--header__menu-arrow {
    @include high-contrast-mode("icon-fill");
  }
}