#mobile-sidebar
  #menu_mask
    position: fixed
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: 102
    display: none
    background: alpha($dark-black, .7)

  #mobile-sidebar-menus,
  #mobile-sidebar-toc
    position: fixed
    top: 0
    right: -254px
    z-index: 103
    display: block
    overflow-y: scroll
    width: 250px
    height: 100%
    background: $white
    box-shadow: 0 0 4px alpha($dark-black, .27)
    transition: all .5s

  #mobile-sidebar-menus
    & > .mobile_author_icon
      padding: 1.3rem 1.5rem 0
      text-align: center

      img
        display: inline-block
        padding: 0
        width: 120px
        height: 120px
        border-radius: 70px
        vertical-align: top
        transition: all .3s

    .mobile_post_data
      display: flex
      justify-content: center
      padding: .6rem .5rem 0

      .mobile_data_item
        flex: 1

      .mobile_data_link
        a
          text-decoration: none

        .length_num
          color: $dark-black
          font-size: .9rem

        .headline
          display: block
          color: $font-black
          text-transform: uppercase
          font-size: .7rem

    hr
      margin: 1rem auto

    .menus_items
      margin-bottom: 5rem
      padding: 0 .5rem

      .site-page
        position: relative
        z-index: 0
        display: block
        overflow: hidden
        margin: 0
        padding: .3rem 1.5rem
        color: $font-black
        text-decoration: none
        text-overflow: ellipsis
        text-shadow: none
        white-space: nowrap
        font-size: .8rem
        cursor: pointer

      i
        width: 30%
        text-align: left

      span
        width: 70%

        &:hover
          color: $light-blue

      .menus-expand
        position: absolute
        right: 0
        padding: 6px
        width: 30px !important
        height: 30px
        transition: all .3s
        transform: rotate(0)

        &.menus-closed
          transition: all .3s
          transform: rotate(180deg) !important

      .menus_item_child
        margin: 0
        list-style: none

  #mobile-sidebar-toc
    padding: 1rem .5rem 5rem .3rem

    ol,
    li
      margin: 0
      padding: 0 0 0 8px
      list-style: none

    .toc_mobile_headline
      text-align: center
      font-weight: bold
      font-size: 18px

    .toc_mobile_items-link
      color: $font-color
      text-decoration: none

      &:hover
        color: $light-blue