/*
 * Component: Control sidebar. By default, this is the right sidebar.
 */

.control-sidebar {
  position: absolute;
  top: $main-header-height;
  z-index: 830;

  &,
  &:before {
    width: $control-sidebar-width;
    right: -$control-sidebar-width;
    bottom: 0;
    @include transition(right $transition-speed $transition-fn);
  }

  &:before {
    top: 0;
    display: block;
    position: fixed;
    content: " ";
    z-index: -1;
  }
}

// Control sidebar open state
.control-sidebar-open {
  @include media-breakpoint-up(md) {
    .control-sidebar {
      &,
      &:before {
        right: 0;
      }
    }

    .content-wrapper,
    .main-footer {
      margin-right: $control-sidebar-width;
    }
  }

  @include media-breakpoint-down(md) {
    .control-sidebar {
      &,
      &:before {
        right: 0;
      }
    }
  }
}

// Control sidebar slide over content state
.control-sidebar-slide-open {
  .control-sidebar {
    &,
    &:before {
      right: 0;
    }
  }
}

// Dark skin
.control-sidebar-dark {
  &,
  a,
  .nav-link {
    color: $sidebar-dark-color;
  }

  //  Background
  &,
  &:before {
    background: $sidebar-dark-bg;
  }

  a:hover {
    color: $sidebar-dark-hover-color;
  }

  // Headers and labels
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  label {
    color: $sidebar-dark-hover-color;
  }

  // Tabs
  .nav-tabs {
    border-bottom: 0;
    background-color: $sidebar-dark-hover-bg;
    margin-bottom: 5px;

    .nav-item {
      margin: 0;
    }

    .nav-link {
      position: relative;
      border-radius: 0;
      text-align: center;
      padding: 10px 20px;

      &,
      &:hover,
      &:active,
      &:focus,
      &.active {
        border: 0;
      }

      &:hover,
      &:active,
      &:focus,
      &.active {
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-top-color: transparent;
        color: $sidebar-dark-hover-color;
      }

      &.active {
        background-color: $sidebar-dark-bg;
      }
    }
  }

  .tab-pane {
    padding: 10px 15px;
  }
}

// Light skin
.control-sidebar-light {
  color: lighten($sidebar-light-color, 10%);

  //  Background
  &,
  &:before {
    background: $sidebar-light-bg;
    border-left: 1px solid $gray-500;
  }
}