#mobile-sidebar
  #menu_mask
    position: fixed
    top: 0
    bottom: 0
    width: 100%
    height: 110vh
    left: 0
    right: 0
    background: alpha($black,0.7)
    z-index: 102
    display: none

  #mobile-sidebar-menus,#mobile-sidebar-toc
    position: fixed
    top: 0
    right: -254px
    width: 250px
    height 101vh
    background: $white
    cursor: pointer
    box-shadow: 0 0 4px alpha($dark-black,0.27)
    z-index: 103
    overflow-y: scroll
    display: block
    transition: transform .3s
    opacity: 0
    will-change: transform

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

      img
        height: 120px
        width: 120px
        padding: 0
        display: inline-block
        vertical-align: top
        border-radius: 70px
        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 
          font-size: .9rem
          color: $dark-black

        .headline 
          display: block
          font-size: 0.7rem
          text-transform: uppercase
          color:$font-black
      
    hr         
      margin: 1rem auto

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

      a
        display: block !important
        opacity: 1 !important
        margin: 0
        padding: .3rem 1.5rem
        color: $font-black
        text-shadow: none
        font-size: 0.8rem
        z-index: 0
        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap  
        
      i
        width: 30%
        text-align: left 

      span
        width 70%

        &:hover
          color: $light-blue

      .menus-expand
        position: absolute
        width: 30px !important
        height: 30px
        right: 0
        padding: 6px        
        transform: rotate(0deg)
        transition: all .3s
    
        &.menus-closed
          transform: rotate(180deg) !important
          transition: all .3s
      
      .menus_item_child
        list-style: none
        margin: 0
                            
  #mobile-sidebar-toc
    padding: 1rem 0.5rem 5rem 0.3rem

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

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

  a
    text-decoration: none
    color: $light-black

    &:hover
          color: $light-blue

// 手機打開menus，toc特效
.open-mobile-menus,
.open-mobile-toc
  overflow: hidden
  #body-wrap
    transform: translateX(-250px)
  #page-header
    transform: translateX(-250px)
    &.fixed.visible
      transform: translate3d(-250px, 100%, 0)
  #rightside
    transform: translate3d(-288px, 0, 0) !important

.open-mobile-menus
  padding-left: 0 !important

  #mobile-sidebar
    #mobile-sidebar-menus
      transform: translateX(-254px)
      opacity: 1

  // pc界面打開mobile-menus需關閉sidebar
  #sidebar
    left: -300px !important

.open-mobile-toc
  #mobile-sidebar
    #mobile-sidebar-toc
      transform: translateX(-254px)
      opacity: 1

@media screen and (max-width: $sm)
  #mobile-sidebar-menus
    display: block !important

@media screen and (max-width: $bg)
  #mobile-sidebar-toc
    display: block !important