@import (reference) '../style/variables.less';

.@{prefix}-menu {
  position: sticky;
  top: 0;
  left: 0;
  height: 100vh;
  width: @s-site-menu-width;
  background: #ffffff;
  padding: 24px 0;

  [data-prefers-color='dark'] & {
    background: @c-light-bg-dark;
  }

  z-index: 100;
  box-sizing: border-box;
  transition: left 0.3s;
  overflow-y: auto;

  &-inner {
    width: 100%;
    overscroll-behavior: contain;

    [data-prefers-color='dark'] & {
      background-color: #262626;
    }

    // common list styles
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 16px;

      a {
        color: @c-text;
      }

      li {
        margin-bottom: 8px;
        span.adm-doc-group-title {
          display: inline-block;
          padding-left: 12px;
        }
        a {
          position: relative;
          display: block;
          line-height: 2.4;
          text-decoration: none;
          outline: none;

          [data-prefers-color='dark'] & {
            color: @c-heading-dark;
          }

          &:hover,
          &.active {
            color: @c-primary;

            [data-prefers-color='dark'] & {
              color: @c-primary-dark;
            }
          }

          > span {
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 8px 16px 8px 32px;
            box-sizing: border-box;
            font-size: 14px;
            line-height: 22px;
          }
          &.active > span {
            background-color: rgba(22, 119, 255, 0.08);
            border-right: @c-primary solid 2px;
          }
        }

        // level larger, offset larger, font size smaller
        ul {
          font-size: 0.9em;
        }
      }
    }

    // 1-level list styles
    > ul {
      > li > a {
        line-height: 2.875;

        &:not([href]) {
          cursor: default;
          padding: 24px 25px 0 32px;
          > span {
            display: block;
            font-size: 14px;
            line-height: 1;
            padding: 0 0 8px 0;
            color: #8c8b8c !important;
            background: transparent !important;
            border-bottom: var(--doc-border-color) solid 1px;
          }
        }
      }

      > li:first-child > a:not([href]) {
        padding-top: 0;
      }
    }

    // n-level list styles
    > ul ul {
      a {
        font-weight: normal;
        //color: rgba(0, 0, 0, 0.85);
        &.active {
          color: @c-primary;
        }
      }
    }

    // menu list
    .@{prefix}-menu-list {
      padding: 8px 0;

      > li > a {
        @c-active-bg: #e8ecf4;

        ~ ul {
          margin-top: 8px;
        }

        @media @mobile {
          padding-left: 16px;
        }
      }
    }
  }

  border-right: 1px solid var(--doc-border-color);

  .@{prefix}-menu-list {
    > li > a {
      position: relative;

      &.active {
        z-index: 1;
      }
    }
  }

  .DocSearch-Button {
    margin: 0 12px;
  }
}
