@import '../main_dependencies';


.skin-default {

  &.sidebar-collapse {
    .main-sidebar {
      @media (min-width: $screen-lg) {
        position: absolute;
      }
    }
  }

  &.sidebar-open {
    .main-sidebar {
      @media (min-width: $screen-lg) {
        position: static;
      }
    }
  }

  .main-sidebar {
    .sidebar {
      flex: 1 0 auto;

      .sidebar-menu {
        li.header {
          background-color: white;
        }
      }
    }

    border-right: 1px solid #dddbda;
    background-color: white;
    height: calc(100vh - #{$header-height});
    padding: 20px;
    overflow: auto;
    z-index: 1001;
    display: flex;
    flex-direction: column;

    .nav-groups {
      flex: 1 0 auto;

      div[uib-accordion-group] {
        margin: 20px 0;
      }

      .nav-group.panel {
        box-shadow: none;
      }

      .panel-group .panel-heading+.panel-collapse>.panel-body {
        border: none;
      }

      .panel-collapse {
        transition: .4s;
      }

      .panel-body {
        padding: 0 0 0 45px;
      }

      .panel-heading {
        padding-left: 6px;
      }

      .panel-title a {
        text-decoration: none;
      }

      .panel-title a,
      .panel-body a {
        border: none;
        box-shadow: none;

        &:focus {
          @include outline;
        }
      }

      .nav-group-heading-icon {
        max-width: 22px;
      }

      .nav-group-heading {
        color: #333;
        font-weight: bold;
        font-size: 14px;
        margin-left: 16px;

        &:hover {
          text-decoration: underline;
        }
      }

      .nav-item {
        .nested-accordion {
          .panel {
            box-shadow: none;
          }

          .panel-heading {
            padding: 0;
          }

          .panel-title {
            font-size: 14px;
          }

          .panel-body {
            padding: 0 0 0 10px;
          }
        }

        margin: 20px 0;

        button {
          color: #697180;
          font-weight: normal;
          border: none;
          background-color: white;

          &.active {
            color: #333;
            font-weight: 600;
          }
          &.external:after {
            content: "\F08E";
            font-family: FontAwesome;
            margin-left: 5px;
          }
          &:focus {
            @include outline;
          }
        }

        .bb-label-tag {
          margin-left: 5px;
        }
      }
    }

    .feedback-container {
      height: 40px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      a.feedback-link {
        font-weight: 600;
        color: $bb-secondary;
      }
    }

    a {
      cursor: pointer;
    }

    .fa-chevron-down {
      float: right;
    }

    .active.fa-chevron-down {
      transform: rotate(180deg);
      margin-right: 5px;
    }
  }

}