@import '~styles/variables';
@import '~styles/mixins';

.wrapper {
  position: fixed;
  top: 60px;
  left: 8px;
  width: $nav-width;
  height: calc(100vh - 68px);
  padding: 40px 20px;
  border-radius: $border-radius;
  background-color: $dark;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  transition: left $trans-speed ease-in-out;
  overflow-y: auto;
  z-index: 212;

  .subNav > ul > li {
    &.select {
      box-shadow: 0 4px 8px 0 rgba(25, 30, 41, 0.2);
      background-color: #d8dee5;
      border: solid 1px #404e68;
    }

    &:hover {
      background-color: #d8dee5;
    }

    &:active {
      background-color: #d8dee5;
      border: solid 1px #404e68;
    }

    & > a {
      color: $light;
      transition: color $trans-speed ease-in-out;

      @media (max-width: 1366px) {
        padding: 7px 12px;
      }

      :global .qicon {
        color: #b6c2cd;
        fill: #b6c2cd;
      }
    }
  }
}

.subNav {
  & > p {
    color: $light-color02;
    margin-bottom: 12px;
  }

  & > ul {
    margin-bottom: 20px;

    & > li {
      border-radius: 18px;
      border: solid 1px transparent;
      transition: all $trans-speed ease-in-out;

      & > a,
      .title {
        display: block;
        padding: 7px 12px;
        color: #4a5974;
        font-weight: 500;
        cursor: pointer;

        @media (max-width: 1366px) {
          padding: 7px 0;
        }

        :global {
          .icon {
            margin-right: 8px;
            vertical-align: text-bottom;
          }
        }
      }

      &.select,
      &:hover,
      &:active {
        & > a {
          color: $primary;

          :global .qicon {
            color: #1890ff;
            fill:#6fb4f5;
          }
        }
      }

      & + li {
        margin-top: 4px;
      }
    }
  }
}
