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

.@{prefix}-menu {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  bottom: 0;
  width: @s-menu-width;
  background-color: #f2f5fa;
  box-sizing: border-box;
  transition: left 0.3s;

  &[data-hidden] {
    display: none;
  }

  @media @mobile {
    left: -@s-menu-mobile-width;
    top: @s-mobile-nav-height;
    display: block !important;
    width: @s-menu-mobile-width;
    background-color: #fff;

    &[data-mobile-show] {
      left: 0;
    }

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

  // shadow
  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 20px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
    pointer-events: none;

    // use border on mobile devices
    @media @mobile {
      width: 1px;
      background: @c-border;
    }
  }

  &-header {
    position: relative;
    padding-top: 40px;
    text-align: center;
    border-bottom: 1px solid @c-border;

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

    @media @mobile {
      display: none;
    }

    .@{prefix}-menu-logo {
      display: inline-block;
      width: 66px;
      height: 65px;
      background: url(@img-logo) no-repeat 0 / contain;
    }

    h1 {
      margin: 10px 0 0;
      color: @c-heading;
      font-weight: 500;
      line-height: 1.40625;
    }

    p {
      margin: 0 0 5px;
      color: lighten(@c-secondary, 10%);

      // badges
      > object[data^='https://img.shields.io'] {
        max-height: 20px;
      }

      + p {
        margin-bottom: 10px;
      }
    }
  }

  &-doc-locale {
    padding: 16px 0;
    text-align: center;
    border-bottom: 1px solid @c-border;
    display: flex;
    justify-content: space-evenly;

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

    [data-mode=doc][data-mobile-show=true] & {
      display: grid;
    }

    &:empty {
      display: none;
    }
  }

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

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

    .@{prefix}-menu-mobile-area {
      display: none;
      padding-bottom: 16px;
      margin-bottom: 16px;
      text-align: center;
      border-bottom: 1px solid @c-border;

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

      @media @mobile {
        display: block;
      }
    }
  }

  &[data-mode='site'] {
    &::after {
      width: 1px;
      background: @c-border;

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

    @media @desktop {
      top: @s-nav-height;
      width: @s-site-menu-width;
      padding-top: 50px;
      background: transparent;

      .@{prefix}-menu-nav,
      .@{prefix}-menu-header {
        display: none;
      }
    }
  }
}

.__dumi-custom-menu-list {
  height: 100%;
  overflow: auto;

  li {
    list-style: none;
  }
}