@import "../../variables.less";

@{prefix}side-bar {
  display: none;
  position: fixed;
  top: @top-bar-height;
  bottom: 0;
  overflow: auto;
  background-color: @top-bar-bg-active;
  width: @menu-width;
  left: -@menu-width;
  .border-box();
  .animate(left .3s);
  z-index: @z-index-side-bar;

  &@{prefix}show {
    display: block;
  }

  &@{prefix}active {
    left: 0;
    .animate(left .3s);
  }

  @{prefix}submenu {
    display: none;
    .animate(max-height 400ms);

    &@{prefix}slidedown-setup {
      display: block;
      max-height: 0;
      .animate(max-height 400ms ease-out);

      &@{prefix}slidedown {
        .animate(max-height 400ms ease-in);
        max-height: 1000px;
      }
    }
  }

  li {
    position: relative;
  }

  li:not([aria-controls]), @{prefix}item-text {
    padding: @space-small;
    border-left: @border-width solid transparent;

    &:hover, &:focus {
      outline: 0;
      border-left: @border-width solid @top-bar-text;

      @{prefix}item-text {
        border-left: @border-width solid @top-bar-text;
      }
    }

    &@{prefix}menuitem-selected {
      border-left: @border-width solid @top-bar-accent-primary;

      &:not(@{prefix}account):not(@{prefix}branding) {
        a {
          color: @text-light;
          font-weight: @weight-medium;
        }
      }

      &:focus {
        &:before {
          content: '';
          width: @border-width;
          height: 100%;
          background-color: @top-bar-text;
          position: absolute;
          top: 0;
          left: 2px;
        }
      }
    }

    // for deque branding apps
    &@{prefix}branding {
      padding: 11px 16px 18px 16px;
      border-bottom: 1px solid @top-bar-divider;

      a {
        text-decoration: none;
        color: @text-light;
        font-weight: @weight-light;
        .display-flex();
        .flex-direction(row);
        .align-items(flex-start);

        @{prefix}name {
          margin-top: @space-quarter;
          color: @text-light;

          @{prefix}name-primary {
            font-size: @text-medium;
            font-weight: @weight-normal;
          }

          @{prefix}name-secondary {
            font-size: @text-smaller;
            font-weight: @weight-light;
            margin-top: 3px;
          }
        }

        @{prefix}logo {
          img {
            width: 55px;
            height: 51px;
            padding-left: @space-large;
          }
        }
      }
    }
  }

  @{prefix}weight-bold {
    @{prefix}item-text {
      font-weight: @weight-medium;
    }
  }

  > li {
    color: @top-bar-text;
    font-size: @text-small;
    font-weight: @weight-light;
    cursor: pointer;

    &:focus {
      outline: 0;
      @{prefix}item-text {
        border-left: @border-width solid @top-bar-text;
      }
    }

    a {
      text-decoration: none;
      color: @top-bar-text;
      font-size: @text-small;
      font-weight: @weight-light;

      &:focus {
        outline: 0;
      }
    }

    > ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      border-top: 1px solid @top-bar-divider;

      > li {
        background-color: @top-bar-bg;
        cursor: pointer;
        border-bottom: 1px solid @top-bar-divider;

        a {
          margin-left: @space-small;
          font-size: @text-smaller;
        }
      }
    }
  }

  // for apps with authentication/users
  @{prefix}account {
    .display-flex();
    .align-items(center);
    border-bottom: 1px solid @top-bar-divider;

    @{prefix}account-image {
      img {
        width: 63px;
        .circle();
        border: 2px solid #fff;
      }
    }

    @{prefix}account-info {
      padding-left: @space-smallest;

      h2 {
        color: @text-light;
        font-weight: @weight-medium;
        font-size: @text-normal;
        padding: 0;
        margin: 0;
      }

      @{prefix}account-title,
      @{prefix}account-org {
        font-size: @text-smaller;
        padding: @space-quarter;
      }

      @{prefix}account-title {
        font-style: italic;
      }
    }
  }
}
