$organized-menu-bg: $gray-lighter;

.organized-left-menu {
  display: none;

  .divider-nav-item {
    border-bottom: 1px solid #e4e4e4;
  }

  header {
    margin-top: -2 * $vertical-height;
    padding: 0 $vertical-height;

    // if the dashboard menu item is there, it moves up to be closer to the menu
    &.with-dashboard-link {
      h3 {
        margin-bottom: 0px;
      }
    }

    overflow-x: hidden;

    h3 {
      font-size: 18px;
      line-height: 1.5;

      span {
        display: block;
        font-weight: bold;
        color: #2d2d2d;

        @extend .header-font-alt;
      }
    }

    img {
      width: 100%;
      max-width: 200px;
      height: auto;
      margin: 0 0 $vertical-height;
      display: block;
    }
  }
}

@media (min-width: $grid-breakpoint-md) {
  .organized-body {
    position: relative;

    .primary-footer {
      position: relative;
    }

    // To make it go over the menu
    .organized-left-menu {
      background: $organized-menu-bg;
      width: 15%;
      height: 100%;
      position: absolute;
      top: 0;
      display: block;

      ul {
        @include list-unstyled;

        overflow-x: hidden;

        li {
          padding-top: $vertical-height;
        }
      }

      .nav-link,
      .disabled-menu-item {
        width: 100%;
        display: block;
        padding: (0.5 * $vertical-height) $vertical-height;
        text-decoration: none;
        font-size: 14px;
        line-height: 1.5;
      }

      .nav-link {
        color: $header-font-nocolor;
        &:hover {
          text-decoration: underline;
          // font-weight: $strong-font-weight;
          padding-right: 0;
          // Because otherwise the shift to bold can break line
        }

        &.secondary-item {
          font-size: 85%;
          padding: 0 12px 0 24px;
          &:before {
            content: "-";
            display: block;
            height: 0;
            width: 12px;
            left: 12px;
            position: absolute;
          }
        }
      }

      .disabled-menu-item {
        color: $less-strong-font-color;
      }

      .active {
        color: $blue;
        position: relative;
        font-weight: bold;
        text-decoration: underline;

        &:after {
          content: "";
          display: block;
          height: 0;
          width: 0;
          right: 0;
          top: 50%;
          margin-top: -$vertical-height;
          border-top: $vertical-height solid transparent;
          border-bottom: $vertical-height solid transparent;
          border-right: $vertical-height solid white;
          position: absolute;
        }
      }
    }

    .organized-wrap {
      width: 100%;
      padding-left: 15%;
    }
  }
}
