/**
 * @license
 * Copyright Akveo. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin nb-sidebar-theme() {

  nb-sidebar {

    font-size: nb-theme(sidebar-font-size);
    line-height: nb-theme(sidebar-line-height);
    box-shadow: nb-theme(sidebar-shadow);

    @include nb-scrollbars(
        nb-theme(scrollbar-fg),
        nb-theme(scrollbar-bg),
        nb-theme(scrollbar-width));


    .main-container {
      height: nb-theme(sidebar-height);
      width: nb-theme(sidebar-width);
      background: nb-theme(sidebar-bg);
    }

    .scrollable {
      padding: nb-theme(sidebar-padding);
      position: relative;

      -webkit-transform: translate3d(0, 0, 0); // ios optimisation
      @include media-breakpoint-down(sm) {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
      }
    }

    width: nb-theme(sidebar-width);
    background: nb-theme(sidebar-bg);
    color: nb-theme(sidebar-fg);

    // TODO: width used to use transition on width
    &.collapsed {
      width: 0;
      padding: 0;
      .main-container {
        width: 0;
        padding: 0;
      }
      .scrollable {
        width: 0;
        padding: 0;
        overflow: hidden;
      }

      nb-sidebar-header,  nb-sidebar-footer {
        width: 0;
        padding: 0;
        overflow: hidden;
      }
    }

    &.compacted {
      width: nb-theme(sidebar-width-compact);
      .main-container {
        width: nb-theme(sidebar-width-compact);
      }

      nb-menu {
        width: nb-theme(sidebar-width-compact);

        .menu-item a.active {
          position: relative;

          &::before {
            position: absolute;
            content: '';
            @include nb-ltr(left, 0);
            @include nb-rtl(right, 0);
            top: 0;
            height: 100%;
            width: 4px;
            background: nb-theme(color-fg-highlight);
          }
        }

        > .menu-items > .menu-item > a {
          span, .chevron {
            display: none;
          }
        }

        .menu-items > .menu-item {
          transition: border-color 1s ease;

          &.menu-group {
            display: block;
            color: transparent;
            width: 0;
            padding: 0;
            overflow: hidden;
          }

          i {
            margin-right: 0;
          }

          a {
            justify-content: center;
          }

          & > .expanded {
            display: none;
          }
        }

      }
      // we need to pull the content
      &.left.fixed ~ .content {
        margin-left: nb-theme(sidebar-width-compact);
      }

      &.fixed.right ~ .content {
        margin-left: 0;
        margin-right: nb-theme(sidebar-width-compact);
      }

      &.left.fixed ~ .content.center {
        padding-left: nb-theme(sidebar-width-compact);
      }

      &.fixed.right ~ .content.center {
        padding-left: 0;
        padding-right: nb-theme(sidebar-width-compact);
      }

      &.start.fixed ~ .content {
        @include nb-ltr(margin-left, nb-theme(sidebar-width-compact));
        @include nb-rtl(margin-right, nb-theme(sidebar-width-compact));
      }

      &.fixed.end ~ .content {
        @include nb-ltr(margin-right,nb-theme(sidebar-width-compact));
        @include nb-rtl(margin-left, nb-theme(sidebar-width-compact));
      }

      &.start.fixed ~ .content.center {
        @include nb-ltr(padding-left, nb-theme(sidebar-width-compact));
        @include nb-rtl(padding-right, nb-theme(sidebar-width-compact));
      }

      &.fixed.end ~ .content.center {
        @include nb-ltr(padding-right, nb-theme(sidebar-width-compact));
        @include nb-rtl(padding-left, nb-theme(sidebar-width-compact));
      }
    }

    &.fixed.left.collapsed + .content,
    &.fixed.start.collapsed + .content {
      margin-left: 0;
    }

    &.fixed.right.collapsed + .content,
    &.fixed.end.collapsed + .content {
      margin-right: 0;
    }

    &.expanded {
      width: nb-theme(sidebar-width);
      > .scrollable {
        width: nb-theme(sidebar-width);
      }
    }

    nb-sidebar-header {
      padding: nb-theme(sidebar-padding);
      height: nb-theme(sidebar-header-height);
    }

    nb-sidebar-footer {
      padding: nb-theme(sidebar-padding);
      height: nb-theme(sidebar-footer-height);
    }

    nb-menu {
      margin: 0 -#{nb-theme(sidebar-padding)} -#{nb-theme(sidebar-padding)};
    }
  }
}