@import '../../vendor/carbon-components/scss/components/ui-shell/side-nav';

/*****************************
*
* This file brings in Carbon sidenav styles and aligns the pattern changes
* we have made in code. (ie. having buttons as well as anchors for sidenav
* links, using isRail while still wanting collapse on small screens, etc. )
*
*****************************/

// Disable for file since this is from Carbon

/* stylelint-disable */
$small-screen-breakpoint: 65.99em;

.#{$iot-prefix}--side-nav {
  ///////////////////////////////////////
  // Added here to allow for collapse sidenav
  // with isRail property functionality
  ///////////////////////////////////////
  @media (max-width: $small-screen-breakpoint) {
    width: 0;
  }

  ///////////////////////////////////////
  // Added here to allow for collapse sidenav
  // with isRail property functionality
  ///////////////////////////////////////
  &.#{$iot-prefix}--side-nav--expanded {
    @media (max-width: $small-screen-breakpoint) {
      width: 16rem;
    }
  }

  ///////////////////////////////////////
  // Added here to align the button with the
  // regular Carbon anchor tag
  ///////////////////////////////////////
  button.#{$prefix}--side-nav__link {
    background: none;
    border: none;
    width: 100%;
  }

  ///////////////////////////////////////
  // Duplicated here to remove scoping
  // carbon does to anchor element
  //////////////////////////////////////
  .#{$prefix}--side-nav__menu
    .#{$prefix}--side-nav__link:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover {
    color: $ibm-color__gray-100;
    background-color: $shell-side-nav-bg-04;
  }

  .#{$prefix}--side-nav__menu .#{$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 .#{$prefix}--side-nav__link {
    padding-left: mini-units(9);
  }

  .#{$prefix}--side-nav__menu .#{$prefix}--side-nav__link--current,
  .#{$prefix}--side-nav__menu .#{$prefix}--side-nav__link[aria-current='page'],
  .#{$prefix}--side-nav__link--current {
    background-color: $ibm-color__gray-20;

    > span {
      color: $ibm-color__gray-100;
      font-weight: 600;
    }
  }

  .#{$prefix}--side-nav__link {
    @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__link > .#{$prefix}--side-nav__link-text {
    @include text-overflow();

    color: $shell-side-nav-text-01;
    font-size: rem(14px);
    line-height: 1.25rem;
    letter-spacing: 0.1px;
    user-select: none;
  }

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

    // Windows, Firefox HCM Fix
    @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
      outline: 3px solid transparent;
      outline-offset: -3px;
    }
  }

  .#{$prefix}--side-nav__link[aria-current='page'],
  .#{$prefix}--side-nav__link--current {
    font-weight: 600;
    background-color: $shell-side-nav-bg-04;
  }

  .#{$prefix}--side-nav__link[aria-current='page'] .#{$prefix}--side-nav__link-text,
  .#{$prefix}--side-nav__link--current .#{$prefix}--side-nav__link-text {
    color: $ibm-color__gray-100;
  }

  .#{$prefix}--side-nav__link[aria-current='page']::before,
  .#{$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--fixed .#{$prefix}--side-nav__link {
    padding-left: mini-units(2);
  }

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