//
// 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.
//

@import '../../globals/scss/css--helpers';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/typography';
@import '../../globals/scss/layout';
@import '../../globals/scss/vars';
@import 'functions';
@import 'theme';

/// Helper to add in text overflow styles to a particular node. Useful if we
/// don't want to have display-inline: block from the text helper classes
/// @access private
/// @group ui-shell
/// @example
///   .my-custom-selector {
///     @include text-overflow();
///   }
@mixin text-overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/// Helper for handling selectors for the expansion state of the side-nav.
/// This helper makes it easier to write code for children that need to respond
/// to whether the side-nav is open, or closed. For convenience, we also
/// optionally set properties for opacity and visibility to help with the
/// transition animation.
/// @access private
/// @group ui-shell
/// @param {Bool} $opacity [false]
/// @param {Bool} $visibility [false]
/// @content
@mixin expanded($opacity: false, $visibility: false) {
  @if $opacity == true {
    opacity: 0;
  }

  @if $visibility == true {
    visibility: hidden;
  }

  .#{$prefix}--side-nav:hover &,
  // Include the fixed variant here so components can render in both expandable
  // and fixed side navs
  .#{$prefix}--side-nav--fixed &,
  .#{$prefix}--side-nav--expanded & {
    @if $visibility == true {
      visibility: inherit;
    }
    @if $opacity == true {
      opacity: 1;
    }
    @content;
  }
}

/// UI shell side nav
/// @access private
/// @group ui-shell
@mixin carbon-side-nav {
  //----------------------------------------------------------------------------
  // Side-nav > Panel
  //----------------------------------------------------------------------------.
  .#{$prefix}--side-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: z('header');
    width: mini-units(6);
    max-width: mini-units(32);
    // Useful to toggle this property to see what's going on when not expanded
    overflow: hidden;
    color: $text-04;
    background-color: $gray-100;
    // 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 carbon--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__navigation.#{$prefix}--side-nav--rail {
    height: calc(100% - 3rem);
  }

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

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

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

  .#{$prefix}--side-nav__overlay-active {
    @include carbon--breakpoint-down('lg') {
      width: 100vw;
      height: 100vh;
      background-color: $overlay-01;
      opacity: 1;
      transition: opacity $transition--expansion $carbon--standard-easing,
        background-color $transition--expansion $carbon--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;
    flex-direction: column;
    height: 100%;
  }

  //----------------------------------------------------------------------------
  // Side-nav > Navigation > Header
  //----------------------------------------------------------------------------
  .#{$prefix}--side-nav__header {
    display: flex;
    width: 100%;
    max-width: 100%;
    height: mini-units(6);
    border-bottom: 1px solid $shell-side-nav-bg-02;

    @include expanded() {
      height: auto;
    }
  }

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

  //----------------------------------------------------------------------------
  // Side-nav > Navigation > Header > Details
  //----------------------------------------------------------------------------
  .#{$prefix}--side-nav__details {
    display: flex;
    // Necessary for text truncation in title
    // https://css-tricks.com/flexbox-truncated-text/#article-header-id-3
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding-right: mini-units(2);

    @include expanded($opacity: true, $visibility: true);
  }

  .#{$prefix}--side-nav--ux .#{$prefix}--side-nav__details {
    visibility: inherit;
    opacity: 1;
  }

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

    margin-top: mini-units(2);
    font-weight: 600;

    // TODO: sync with type styles
    font-size: rem(14px);
    letter-spacing: 0.1px;
    user-select: none;
  }

  // Sync up between our title and select field to get position logic for
  // text
  .#{$prefix}--side-nav__title,
  .#{$prefix}--side-nav__select {
    padding-left: mini-units(1);
  }

  //----------------------------------------------------------------------------
  // Side-nav > Navigation > Header > Switcher
  //----------------------------------------------------------------------------
  .#{$prefix}--side-nav__switcher {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .#{$prefix}--side-nav__switcher-chevron {
    position: absolute;
    top: 0;
    right: mini-units(1);
    bottom: 0;
    display: flex;
    align-items: center;
    fill: $shell-side-nav-icon-01;
  }

  .#{$prefix}--side-nav__select {
    @include focus-outline('reset');

    flex: 1 1 0%;
    // Flex bug, used to have the select node respect the width if a child has a
    // value that is longer than the width of the select
    min-width: 0;
    height: mini-units(4);
    // Buffer the right hand side of select so text doesn't overlay the chevron
    padding-right: mini-units(4);
    color: $text-04;
    font-size: rem(12px);
    background-color: $shell-header-bg-01;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: outline $duration--fast-02;
    appearance: none;
  }

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

  //----------------------------------------------------------------------------
  // Side-nav > Navigation > Footer
  //----------------------------------------------------------------------------
  .#{$prefix}--side-nav__footer {
    flex: 0 0 rem(48px);
    width: 100%;
    background-color: $gray-100;
  }

  .#{$prefix}--side-nav__toggle {
    @include focus-outline('reset');
    @include button-reset($width: true);

    height: 100%;
    padding-left: mini-units(2);
    text-align: left;
    transition: outline $duration--fast-02;
  }

  .#{$prefix}--side-nav__toggle:focus {
    outline: 2px solid $inverse-focus-ui;
    outline-offset: -2px;
  }

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

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

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

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

  .#{$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 {
    color: $text-04;
    // TODO: sync color
    background-color: $gray-90;
  }

  .#{$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-04;
  }

  .#{$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: $ibm-color__gray-20;
  }

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

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

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

  .#{$prefix}--side-nav__submenu:hover {
    color: $text-04;
    background-color: $gray-90;
  }

  .#{$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: rem(16px);
    height: rem(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 {
    color: $text-04;
    background-color: $gray-70;
  }

  .#{$prefix}--side-nav__item--active
    .#{$prefix}--side-nav__submenu[aria-expanded='false'] {
    position: relative;
    color: $text-04;
    background-color: $gray-70;
    &::before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 4px;
      background-color: $shell-side-nav-accent-01;
      content: '';
    }
  }

  .#{$prefix}--side-nav__menu[role='menu']
    a.#{$prefix}--side-nav__link[role='menuitem']:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover {
    color: $text-04;
    background-color: $gray-90;
  }

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

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

  .#{$prefix}--side-nav__submenu[aria-expanded='true']
    + .#{$prefix}--side-nav__menu {
    max-height: rem(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: $gray-70;

    > span {
      color: $text-04;
      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;
    align-items: center;
    min-height: mini-units(4);
    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-04;
    font-size: rem(14px);
    line-height: 1.25rem;
    letter-spacing: 0.1px;
    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 {
    font-weight: 600;
    background-color: $shell-side-nav-bg-04;
  }

  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-04;
  }

  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: 4px;
    background-color: $shell-side-nav-accent-01;
    content: '';
  }

  .#{$prefix}--side-nav__menu[role='menu']
    a.#{$prefix}--side-nav__link--current:hover {
    background-color: $gray-80;
  }

  //----------------------------------------------------------------------------
  // 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-03;

    @media screen and (-ms-high-contrast: active),
      screen and (prefers-contrast) {
      // `ButtonText` is a CSS2 system color to help improve colors in HCM
      fill: ButtonText;
    }
  }

  .#{$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 carbon--breakpoint-down('lg') {
      display: block;
    }
  }

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

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

  .#{$prefix}--side-nav__header-divider::after {
    position: absolute;
    bottom: rem(-16px);
    left: rem(16px);
    width: calc(100% - 32px);
    height: rem(1px);
    background: $ibm-color__gray-20;
    content: '';
  }

  //header menu items overrides
  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item {
    justify-content: space-between;
    color: $text-04;
    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 {
      color: $text-04;
      background-color: $shell-side-nav-bg-04;
    }
  }

  .#{$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-03;

    // Windows, Firefox HCM Fix
    @media screen and (-ms-high-contrast: active),
      screen and (prefers-contrast) {
      // `ButtonText` is a CSS2 system color to help improve colors in HCM
      fill: ButtonText;
    }
  }

  //----------------------------------------------------------------------------
  // Side-nav ~ Content interaction
  //----------------------------------------------------------------------------
  .#{$prefix}--side-nav.#{$prefix}--side-nav--expanded ~ .#{$prefix}--content {
    margin-left: 16rem;
  }

  .#{$prefix}--side-nav--expanded ~ .#{$prefix}--content {
    width: calc(100% - 16rem);
  }
}

@include exports('carbon-side-nav') {
  @if feature-flag-enabled('ui-shell') {
    @include carbon-side-nav;
  }
}