.sidebar {
  &-wrapper {
    background-color:                                       $white !important;
  }
  .sidebar-loader {
    background:                                             $gray-200;
  }
  .branding {
    background:                                             $primary !important;
  }

  .profile {
    .info {
      .info-inner {
        .member-info {
          color:                                            $black !important;
        }
      }
    }
  }

  .menu {
    > a {
      $this:                                                &;
      color:                                                $black !important;

      &.active {
        background-color:                                   lighten($primary, 40%) !important;
        border-left-color:                                  $primary !important;
        .fa-icon {
          fill:                                             $black !important;
        }
      }
      &:hover {
        background-color:                                   lighten($primary, 30%) !important;
      }
    }
    > div {
      > a {
        color:                                              $black !important;
        background:                                         $white !important;

        &.active {
          color:                                            $primary !important;
        }

        &:hover {
          background-color:                                 lighten($primary, 30%) !important;
          color:                                            $black !important;
        }
      }
    }
  }
}

.sidebar-toggle {
  .sidebar {
    .profile .info:hover .info-inner {
      @include media-breakpoint-up(md) {
        background:                                         $white !important;

        &:before {
          background:                                       $white !important;
        }
      }
    }
    .menu > div:hover a{
      background:                                           $white;
    }
  }
  .menu {
    > div:hover a.active {
      color:                                                $primary !important;
    }
    > a:hover span {
      @include media-breakpoint-up(md) {
        background:                                         lighten($primary, 40%) !important;
        color:                                              $black !important;
      }
    }
  }
}
