// main: ../style.scss
/********************************
*********************************
SIDEBAR
*********************************
*********************************/
.site-sidebar {
  position: relative;
  z-index: 9;
  background: $sidebar-bg;
  border-right: 1px solid $theme-border-color;
  padding: 0;
  display: flex;
  flex-flow: column;
  padding-bottom: 30px;

  &.scrollbar-enabled {
    padding-right: 0;
  }

  .rtl & {
    border-right: 0;
    border-left: 1px solid $theme-border-color;
  }
}

.sidebar-nav {
  flex: 1;
  padding: 0 em(15);
}

@media (max-width: $theme-breakpoint) {
  .scrollbar-enabled.site-sidebar {
    position: absolute;
  }

  .site-sidebar {
    display: none;
    width: em(420);
    max-width: 100%;
    position: absolute;
  }
}

.sidebar-collapse .sidebar-collapse-hidden {
  display: none !important;
}

/* Sidebar User Area
========================*/
.side-user {
  padding: em(20) 0;
  border-bottom: 1px solid $theme-border-color;
  margin-right:-1px;
  position: relative;


  .sidebar-collapse & {
    padding-top: em(10);
    padding-bottom: em(10);
    position: relative;
    top: 20px;
    padding-bottom: 0;

    .media-left {
      padding-right: 0;
      position: relative;
      left: em(-8);
    }

    .dropdown-toggle {
      display: none;
    }

    figure::after {
      @include size(0.7em);
      bottom: 0px;
      left: em(4);
    }

    img {
      max-width: em(40);
      height: auto;
    }
  }

	.media {
		color: $nav-link-color;
	}

  .side-user-heading {
		color: $headings-color;
    font-family: $headings-font-family;
    &:hover { color: $color-scheme; }
  }

  .side-user-link {
    display: none;
    height: em(26);
    width: em(26);
    background: #fff;
    @include position(absolute, null -5px -5px null);
    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.4);
    border-radius: em(50);

    & .list-icon {
      font-size: em(14);
      line-height: em(27);
    }
  }

  & > a:hover .media-heading,
  .active .media-heading {
    color: $color-scheme;
  }

  .media-body {
    font-size: em(13);
  }

  [class*="user--"]:after {
    right: auto;
    left: rem(8);
  }

  body.rtl & {
    padding-right: 0;
  }
}


/* Vertical Sidebar
========================*/
.side-menu {
  flex-direction: column;
  position: relative;
  line-height: em(30);
  margin-top: em(20);
  font-family: $headings-font-family;

  ul {
    font-size: em(12);
    font-weight: 300;
    margin-left: em(43,12);
    position: relative;
    top: -10px;

    ul {
      font-size: em(12);
      margin-left: em(15,12);
      top: 0;
    }
  }

  .collapse.in {
    display: block;
  }

  li {
    position: relative;

    a {
      color: $nav-link-color;
      position: relative;
      display: block;
      @include padding(0 null);
      font-weight: 500;
      &:hover { color: $color-scheme; }
    }
  }

  > li {
    > a {
      padding: em(6.5) 0 em(6.5) em(15);
      line-height: em(48);
      color: $nav-heading-link-color;
      border-top: 1px solid transparent;
      font-family: $headings-font-family;
      display: flex;
      align-items: center;

      &:hover,
      &:focus {
        color: $headings-color;
        background: transparent;
      }
      .hide-text {
        flex: 1;
      }
      i {
        font-size: em(18);
        vertical-align: middle;
        position: relative;
        top: -2px;
      }

      body.rtl & {
        i.list-icon {
          margin-left: .4em;
        }
      }
    }

    > a .badge {
      position: relative;
      top: em(13,11);
      font-size: em(11,15);
      line-height: 1.2;
    }

    &::after {
      content: " ";
      position: absolute;
      width: 100%;
      height: 1px;
      right: 0;
      background: rgba(255,255,255,.05);
    }
  }

  .sidebar-collapse & > li > a {
    padding: em(6.5) 0 em(6.5) em(20);
  }

  body.rtl.sidebar-collapse & {
    > li > a {
      padding: em(6.5) em(15) em(6.5) em(20);
    }
  }

  > li:first-child > a {
    border-top: 0;
  }

  .list-icon {
    margin-right: em(8,20);
    line-height: inherit;
  }

  :not([class*="color-"]) {
    > .list-icon {
      color: $nav-icon-color;
    }
  }

  .menu-item-has-children {
    > a {
      position: relative;
      &::before {
        font-family: 'feather';
        content: "\e928";
        position: absolute;
        right: em(10,18);
        top: 50%;
        transform: translateY(-50%);
        font-size: rem(12);
        color: #7b7b7b;
      }

      body.rtl &::before {
        right: auto;
        left: 0;
      }
    }
    &.active > a::before {
      content: "\e928";
    }
  }

  body.rtl & {
    padding-right: 0;
    ul {
      margin-left: 0;

      ul {
        padding-right: 0;
        margin-right: 1em;
      }
    }
  }
}


/* Expanded Vertical Sidebar
========================*/
@media (min-width: #{$theme-breakpoint + 1px}) {
  .sidebar-expand {
    .site-sidebar {
      position: fixed;
      width: $sidebar-width;
      height: calc(100vh - #{$nav-height});

      .side-menu > li > a {
        border-top-color: $theme-border-color;
      }
    }
  }
}


/* Collapsed Vertical Sidebar
========================*/
@media (min-width: #{$theme-breakpoint + 1px}) {
  .sidebar-collapse {
    .site-sidebar {
      position: absolute;
      top: $nav-height;
      left: 0;
      width: $collapse-sidebar-width;
      bottom: 0;
      overflow: visible !important;
    }

    .hide-menu, .hide-menu .badge {
      display: none;
    }

    .sidebar-nav {
      padding: 0;
    }

    .side-menu {
      > li {
        &:hover {
          width: em(279,13);
          border-top-right-radius: 5px;
          > a {
            background: $nav-link-hover-color;
            display: block;
            z-index: 9;
            .hide-menu { display: inline-block }
          }

          .sub-menu {
            margin-top: em(15);
          }

          > a, .sub-menu {
            box-shadow: 0 3px 5px 0 rgba(0,0,0,0.1);
          }
        }

        > a {
          transition: none;
          &::before { display: none; }
        }
      }

      li:hover {
        > .sub-menu { display: block; }
      }

      .sub-menu {
        position: absolute;
        top: em(48,13);
        left: calc(#{$logo-width} - 1px);
        width: calc(100% - #{$logo-width} + 1px);
        margin-left: 0;
        padding: 0 0 em(15,13);
        display: none;
        background: $nav-link-hover-color;
        z-index: 10;

        li {
          background: $nav-link-hover-color;
        }

        .sub-menu {
          left: 100%;
          top: 0;
          padding-top: em(15,13);
        }

        a {
          padding: 0 em(15,13) 0 em(25,13);
        }
      }
    }

    .sidebar-module {
      display: none;
    }
  }

  body.rtl.sidebar-collapse {
    .site-sidebar {
      left: auto;
      right: 0;
    }

    .side-menu .sub-menu {
      left: 0;
    }
  }
}


/* Horizontal Sidebar
========================*/
@media (min-width: #{$theme-breakpoint + 1px}) {
  .sidebar-horizontal {
    .site-sidebar {
      padding: 0 em(15);
      box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
      position: relative;
      width: 100%;
    }

    .fix-top .site-sidebar {
      position: fixed;
      top: 0;
    }

    .list-icon { margin-right: 0; }
    .side-user, .side-menu .badge { display:none; }

    .side-menu {
      margin-top: 0;
      display: flex;
      flex-flow: row;
      ul {
        position: absolute;
        top: 0;
        left: 100%;
        background: $nav-link-hover-color;
        z-index: 9;
        margin-left: 0;
        width: em(220,13);
        padding: em(10,13) 0;
        display: none;
        line-height: em(36,13);
        box-shadow: 0 10px 30px rgba(0,0,0,.1);
        li { background: $nav-link-hover-color }
        li:last-child {padding-bottom: em(5);}
      }

      li:hover > ul {display: block;}
      a {@include padding(null em(15));}

      > li {
        display: inline-block;

        > ul {
          left: 0;
          top: 100%;

          a {
            font-size: em(14,13);
          }
        }

        > a {
          border: 0;
          padding: em(10,15) em(15,15) em(5,15);
          text-align: center;

          &::after {
            content: "";
            width: 100%;
            height: em(2,15);
            background: transparent;
            position: absolute;
            bottom: em(-1,15);
            left: 0;
            z-index: 10;
          }

          &::before {display: none;}
          & .list-icon {display: block;}
        }
      }

      .two-li {
        width: em(440);
        @include clearfix();

        li {
          float: left;
          width: 50%;
        }
      }
    }
  }
}


/* Sidebar Dark
========================*/
.sidebar-dark {
  .content-wrapper {
    background: $color-scheme-dark;
  }

  .site-sidebar {
    background: $color-scheme-dark;
    border-color: rgba(255,255,255, 0.2);

    .ps-scrollbar-y-rail,
    .ps-scrollbar-x {
      background: transparent !important;
    }

    .ps-scrollbar-y {
      background: rgb(220,220,220) !important;
      right: 0 !important;
      width: rem(5) !important;
    }
  }

  .side-menu {
    li {
      &:hover,
      &.active {
        background: $color-scheme-dark-hover;
      }

      &.active > a { color: #fff; }

      a {
        color: #afb2ba;
        &:hover { color: #fff; }
      }
    }

    :not([class*="color-"]) > .list-icon,
    .menu-item-has-children > a::before {
      color: #737986;
    }
  }

  &.sidebar-collapse,
  &.sidebar-horizontal {
    .side-menu .sub-menu {
      background: $color-scheme-dark-hover;

      li {
        background: $color-scheme-dark-hover;
      }
    }
  }

  .side-user {
    border-bottom: 0;

    .media {
  		color: #afb2ba;
  	}

    .media-heading {
      color: #fff;
      font-weight: 400;
    }

    & > a:hover .media-heading,
    .active .media-heading {
      color: #fff;
    }

    .side-menu {
      li:hover { background: transparent; }
  		li a { color: #afb2ba; }
      li a:hover { color: #fff; }
  	}

    [class*="user--"]:after {
      border-color: $color-scheme-dark-hover;
    }
  }
}