@import "../css/colors"
@import "../css/vars"

$menuWidth = 309px;

// wrapper
:local
  .container
    min-width: $menuWidth;
    position: fixed;
    top: 80px;
    overflow: auto;
    margin-top: 10px
    max-height: calc(100vh - 90px);

    @media print
      display: none;

  @media screen and (max-width: $medium - 1)
    .container
      transition: transform .2s ease-out;
      left: -($menuWidth + 1);
      width: $menuWidth;
      z-index: 200;
      background-color: $white;
      height: 100%;
      margin-top: 0px
      max-height: calc(100vh - 80px);

    .active
      transform: translateX($menuWidth);


// group
:local
  .group
    list-style-type: none
    padding: 0px
    display: flex
    flex-direction: column;

  .level1
    width: calc(309px - 10px)
    margin: 0px 10px 40px 0px
    border-top: 1px solid $borderGray

    @media screen and (max-width: $medium - 1)
      width: 309px
      margin: 0px 0px 40px 0px

  .level2
    margin: 0px 30px 20px

  .level3
    margin: 0px 20px 10px


// item
:local
  .item
    padding: 0px
    cursor: pointer

    a
      display: flex
      font-family: $sansserif
      font-size: 16px;
      color: $darkGray;
      line-height: 16px;
      text-decoration: none;
      align-items: center;
      flex-direction: row;

      i
        font-size: 30px
        line-height: 30px;
        width: 30px;

      span
        margin-left: 10px;
        width: 100%

  .itemActive > a
    font-weight: 600

  .item1
    padding: 0px 5px
    border-bottom: 1px solid $borderGray

    & > a
      height: 55px

    @media screen and (max-width: $medium - 1)
      padding: 0px 10px

  .item2
    & > a
      font-size: 15px;
      height: 30px

      i
        font-size: 18px
        line-height: 18px;
        width: 14px;

  .item3
    & > a
      font-size: 15px;
      padding: 4px 0px;