.pro-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: $zindex-fixed + 1;
  transition: width, left, right, $animation-time-long;
  @include depth(2);

  .pro-icon-wrapper{
    background-color: transparent !important;
  }
  .pro-icon {
    svg {
      color: $primary-color !important;
      height: 60%;
    }
  }
  .pro-menu{
    >ul{
      >li{
        &.active {
          a, svg{
            color: $theme-color-1 !important;
          }
        }
      }
    }
  }

  .pro-sidebar-header{
    padding: 8px 35px 8px 20px;
    display: flex;
    align-items: center;
    @include depth(1);
    border: 0 !important;
    @include media-breakpoint-down(sm){
      padding: 8px 10px 8px 5px;
      .btn-toggle{
        margin-right: 0;
      }
    }
    height: $navbar-height;
    @include media-breakpoint-down(xl) {
      height: $navbar-height-lg;
    }

    @include media-breakpoint-down(lg) {
      height: $navbar-height-md;
    }

    @include media-breakpoint-down(sm) {
      height: $navbar-height-xs;
    }
  }
  &.collapsed{
    @include media-breakpoint-down(sm){
      width: $sidebar-collapsed-width-xs;
      min-width: $sidebar-collapsed-width-xs;
    }
    .pro-sidebar-footer{
      .name{
        display: none;
      }
      .profile-button{
        background-color: transparent;
      }
      .icon{
        margin-right: 0;
      }
      .dropdown-menu.show{
        position: fixed !important;
      }
    }
  }
  .pro-sidebar-footer{
    .dropdown-item{
      padding-top: .25rem;
      padding-bottom: .25rem;
    }
    .btn-empty{
      padding: 0;
      margin: 0;
    }
    .profile-button{
      background-color: rgba($foreground-color, .2);
      border-radius: 15px;
      padding: 5px 20px;
      color: $button-text-color;
      cursor: pointer;
      &:hover{
        color: $theme-color-3;
        svg{
          animation: swing ease-in-out 0.5s 1 alternate;
        }
      }
      @include media-breakpoint-down(sm){
        padding: 5px;
      }
    }
    .icon{
      background-color: $button-text-color;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      text-align: center;
      padding: 3px;
      margin-right: $size-small;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      svg{
        height: 10px;
        color: $theme-color-3;
      }
    }
  }
}

.btn-toggle {
  z-index: 1000;
  //background-color: $theme-color-3 !important;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  padding: 0;
  outline: none;
  margin-right: 10px;
  font-size: 14px;
  width: 35px;
  min-width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  display: inline-block;

  &:focus,
  &:active,
  &:hover {
    border: none;
    box-shadow: none;
    outline: none;
  }

  span {
    display: block;
    width: 55%;
    height: 3px;
    margin: 0 auto 5px auto;
    position: relative;

    background: $primary-color;
    border-radius: 3px;

    z-index: 1;

    @include transformOrigin(4px 0px);

    @include transition(transform .5s $sidearEasing,
            background .5s $sidearEasing .1s,
            opacity 0.55s ease);

    &:first-child {
      @include transformOrigin(0 0);
    }

    &:last-child {
      @include transformOrigin(0 100%);
      margin-bottom: 0;
    }
  }

  &.open {
    span {
      width: 60%;
      opacity: 1;
      @include transform(rotate(45deg) translate(3px, -2px));

      @include transition(transform 0.5s $sidearEasing,
              background 0.5s $sidearEasing .4s,
              opacity 0.55s ease);

      &:nth-child(2) {
        opacity: 0;
        @include transform(rotate(0deg) scale(0.2, 0.2));
      }

      &:last-child {
        @include transform(rotate(-45deg) translate(3px, 2px));
      }
    }
  }
}

.pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item {
  @include media-breakpoint-down(sm){
    padding: 8px 10px 8px 5px;
  }
}

 .pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item > .pro-icon-wrapper {
   width: 30px;
   min-width: 30px;
   height: 30px;
   line-height: 30px;
 }