.header #tabs {
  width: $header-width;
  height: calc(100% - 60px);
  position: fixed;
  top: 50px;
  background-color: $sidebar-background;
  border-right: 1px solid $sidebar-border-color;
  z-index: 1;
  overflow: auto;
  left: - $header-width;
  transition: .5s;
  transition-timing-function: ease-in-out;

  &.tabs_open {
    left: 0;
  }

  @media screen and (min-width: $sm-width) {
    top: 60px;
  }

  @media screen and (min-width: $lg-width) {
    left: 0px !important;
  }

  @media screen and (min-width: $x-lg-width) {
    width: $lg-header-width;
  }

  li {
    width: 100%;
    font-size: $font-size;
    line-height: 38px;
    cursor: pointer;

    a {
      width: 100%;
      height: 100%;
      display: inline-block;
      color: $text-color;
      padding: 0 20px;

      &:hover {
        background-color: $sidebar-item-hover-background;
      }
    }

    &.current {
      a {
        color: $link-primary-color;
      }
    }

    &.has_nested {
      & > a:nth-child(1) {
        position: relative;

        &:after {
          @include icon($icon-down);
          display: inline;
          position: absolute;
          top: 50%;
          right: 20px;
          @include transform(translateY(-50%));
          color: $text-color;
        }
      }

      ul {
        border-top: 1px solid $sidebar-border-color;
        border-bottom: 1px solid $sidebar-border-color;
        background-color: $body-background;
        padding: 10px 0;
        cursor: auto;
        display: none;

        a {
          padding: 0px 15px 0px 35px;
          color: $text-color;

          &:hover {
            background-color: $sidebar-nested-item-hover-background;
          }

          @media screen and (min-width: $x-lg-width) {
            padding: 0px 15px 0px 40px;
          }
        }

        .current a {
          color: $link-primary-color;
        }
      }

      &.open, &.current {
        & > a:nth-child(1) {
          position: relative;

          &:after {
            @include icon($icon-up);
          }
        }

        & > ul {
          display: block;
        }
      }
    }
  }
}
