//
// Component: Control Sidebar
//

.control-sidebar {
    &,
    &::before {
      left: -$control-sidebar-width;
      right: unset ;
      @include transition(left $transition-speed $transition-fn, display $transition-speed $transition-fn);
    }
  }
  
  .control-sidebar-push-slide {
      .content-wrapper,
      .main-footer {
        @include transition(margin-left $transition-speed $transition-fn);
      }
    }
  
  // Control sidebar open state
  .control-sidebar-open {
    .control-sidebar {
      &,
      &::before {
        left: 0;
        right: unset;
      }
    }
  
    &.control-sidebar-push,
    &.control-sidebar-push-slide {
      .content-wrapper,
      .main-footer {
        margin-left: $control-sidebar-width;
        margin-right: unset;
      }
    }
  }
  
  // Control sidebar slide over content state
  .control-sidebar-slide-open {
    .control-sidebar {
      &,
      &::before {
        left: 0;
        right: unset;
        @include transition(left $transition-speed $transition-fn, display $transition-speed $transition-fn);
      }
    }
  
    &.control-sidebar-push,
    &.control-sidebar-push-slide {
      .content-wrapper,
      .main-footer {
        margin-left: $control-sidebar-width;
        margin-right: unset;
      }
    }
  }
  
  // Dark skin
  .control-sidebar-dark {
  
    // Tabs
    .nav-tabs {
      
  
      .nav-link {
        &:hover,
        &:active,
        &:focus,
        &.active {
          border-right-color: transparent;
          border-left-color: unset;
        }
      }
    }
  }
  
  // Light skin
  .control-sidebar-light {
    //  Background
    & {
      background: $sidebar-light-bg;
      border-right: $main-header-bottom-border;
      border-left: unset;
    }
  }