#aside-content
  width 300px
  if hexo-config('aside.position') == 0
    order 1
  else
    order 2

  +minWidth900()
    if hexo-config('aside.position') == 0
      padding-right 15px
    else
      padding-left 15px

  +maxWidth1200()
    display none

  +minWidth1300()
    animation slide-in .6s .3s backwards
    if hexo-config('aside.position') == 0
      padding-right .5rem
    else
      padding-left .5rem

  .item-headline
    padding-bottom 0
    margin-left 8px
    font-size 1em
    font-weight 700
    display flex
    align-items center

    i
      font-size 16px
      max-width 20px

    span
      margin-left 4px

    + div, + ul
      padding 0
      user-select none

  .card-widget
    box-shadow var(--efu-shadow-border)
    background var(--efu-card-bg)
    border var(--style-border)
    transition 0.3s
    border-radius 12px
    position relative
    overflow hidden
    margin-top .5rem
    padding .5rem .7rem

    &:hover
      box-shadow var(--efu-shadow-border)

  > .card-widget
    &:first-child
      transition 0.3s
      margin-top 0

  .sticky_layout
    top calc(60px + .5rem)
    position sticky
    transition: top .3s ease 0s

  #author-info__sayhi
    text-align center
    width fit-content
    color var(--efu-white)
    background var(--efu-white-op)
    backdrop-filter blur(10px)
    font-size 12px
    padding 2px 8px
    border-radius 12px
    cursor pointer
    user-select none
    transition .3s
    margin auto
    min-width 100px

    / [data-theme=dark] &
      background #00000015
      color var(--efu-black)

      &:hover
        color var(--efu-white)

    &:hover
      background var(--efu-card-bg)
      color var(--efu-main)
      transform scale(1.1)

      &:active
        transform scale(.97)
        opacity .8

  .card-info-social-icons
    margin 0
    display flex
    justify-content flex-start
    flex-direction row
    flex-wrap nowrap
    cursor pointer

    .social-icon
      margin 0
      margin-left 8px
      color var(--efu-fontcolor)
      font-size 1.4em
      cursor pointer
      display flex

    i
      transition all .3s ease 0s
      padding 8px
      border-radius 32px
      cursor pointer
      background var(--efu-white-op)
      color var(--efu-card-bg)
      width 40px
      height 40px
      display flex
      align-items center
      justify-content center

      &:hover
        background var(--efu-white)
        transform scale(1.1)
        color var(--efu-main)
        box-shadow none

      / [data-theme=dark] &
        background var(--efu-black-op)

        &:hover
          background-color var(--efu-black)
          color var(--efu-white)

+minWidth900()
  html.hide-aside .layout
    -webkit-box-pack: center
    justify-content: center

    > div:first-child
      width 100%

  html.hide-aside .layout > .aside-content
    display: none

#aside-content
  .card-toc
    padding .5rem .5rem

    &:hover
      box-shadow var(--efu-shadow-border)

    +minWidth900()
      right 0 !important

    .toc-content
      overflow-y auto
      max-height calc(100vh - 300px)

      &::before
        position absolute
        top .6rem
        right 1.2rem
        color #a9a9a9
        content attr(progress-percentage)
        font-style italic
        font-size 1.2rem

      .toc-link.active
        border-left-color #0061cc
        background #0079ff
        color #fff

  #card-toc
    +minWidth901()
      right 0
      padding .5rem

    .toc-content
      overflow-y: auto
      max-height: calc(100vh - 300px)

      * > .toc-item > .toc-child
        margin-left 10px
        transition display .3s ease-in-out 0s
        padding-left 10px

      ol
        margin 0
        padding-left .4rem

        &ul
          list-style: none

      > ol
        padding-left 0

      .toc-child
        display none

      .toc-child .toc-child
        display none

        &.active
          display block

      .toc-item.active > .toc-child
        display block

      &:hover
      .toc-content
        .toc-link:not(.active) span
          if hexo-config('aside.toc.vague')
            filter: blur(0)
          opacity: 1

      .toc-item.active .toc-link
        opacity 1
        border-radius 8px

      .toc-link
        line-height 24px
        padding 8px
        border-left 0 solid transparent
        border-radius 12px
        color var(--efu-secondtext)
        cursor default
        min-height 40px
        display flex
        align-items center
        transition all .2s ease-in-out 0s

        &.active
          border-radius 12px
          border-left-color var(--efu-hovertext)
          background-color var(--efu-card-bg)
          color var(--efu-lighttext)
          font-weight 700
          font-size 20px

        &:not(.active) span
          opacity .6
          cursor pointer
          if hexo-config('aside.toc.vague')
            filter blur(1px)
          transition .3s

          &:hover
            color var(--efu-lighttext)

[data-theme=dark]
  .toc
    .toc-item.active .toc-link .toc-text
      color: var(--efu-white)

if hexo-config('aside.card.style') == 0
  #aside-content

    .card-widget
      if hexo-config('aside.card.author.sticker')
        &:hover
          .avatar-sticker
            opacity 0
            transform scale(0)

      &.card-recent-post
        padding .4rem .6rem !important

      &.card-info
        padding 0 !important
        box-shadow var(--efu-shadow-black)

        > div.card-content
          padding 1rem 1.2rem
          min-height 320px
          position relative

    > .card-widget.card-info
      &:before
        background linear-gradient(-25deg, var(--efu-main), var(--efu-main-op-deep))
        background-size 400%
        position absolute
        width 100%
        height 100%
        left 0
        top 0
        content ''
        animation gradient 15s ease infinite

      > div.card-content
        padding 1rem 1.2rem
        min-height 320px
        position relative

      > div.card-info-avatarimg
        overflow hidden
        background var(--efu-yellow)
        transition 1.5s
        min-height 160px
        position relative
        box-shadow var(--efu-shadow-yellow)

        &:hover img
          transform scale(1.03)

    .card-info
      if hexo-config('aside.card.author.sticker')
        .avatar-sticker
          position absolute
          bottom -2px
          right -2px
          width 33px
          height 33px
          line-height 34px
          z-index 0
          display flex
          align-items center
          justify-content center
          transition .3s .2s
          transform scale(1)
          background var(--efu-card-bg)
          border-radius 50%

          img
            width 26px
            height 26px

          ../ :hover .avatar-sticker
            opacity 0
            transform scale(0)

      .author-info__desc
        font-size 12px
        color var(--efu-card-bg)
        opacity .6
        line-height 1

      .card-info-avatar.is-center
        flex-direction column
        display flex
        align-items flex-start

      .avatar-img-group
        width 118px
        height 118px
        right calc(50% - 59px)
        top 90px
        border-radius 500px
        position absolute
        transition cubic-bezier(.69, .39, 0, 1.21) .3s
        transform-origin bottom
        border 5px solid var(--efu-card-bg)

        ../ :hover .avatar-img-group
          opacity 0
          transform scale(0)

      .author-info__name
        text-align left
        font-weight 700
        color var(--efu-card-bg)
        font-size 20px
        line-height 1
        margin-bottom 5px

      .author-info__top-group
        display flex
        height 28px
        width 100%

      .author-info__description_group
        position absolute
        top 50px
        width 100%
        left 0
        padding 1.2rem
        opacity 0
        transition .3s

        ../ :hover .author-info__description_group
          opacity 1

        .author-info__description
          line-height 1.38
          margin .3rem 0
          text-align left
          color var(--efu-card-bg)

          b
            color var(--efu-card-bg)

        .author-info__description2
          line-height 1.38
          margin .3rem 0
          text-align left
          width 100%
          z-index 2
          color var(--efu-card-bg)

          b
            color var(--efu-card-bg)

      .author-info__bottom-group
        display flex
        justify-content space-between
        position absolute
        padding 1.2rem
        width 100%
        left 0
        bottom 0
        align-items center

        a.author-info__bottom-group-left:hover
          opacity .8

      .card-info-data
        display table
        margin .7rem 0 .2rem
        width 100%
        table-layout fixed

        > div:nth-child(0) > a > div.headline
          font-weight 700

        > .card-info-data-item
          display table-cell
          transition .3s

          a
            .headline
              color var(--efu-fontcolor)
              font-size 1em

            .length-num
              margin-top -.3rem
              color var(--efu-fontcolor)
              font-size 1.4em

          &:hover
            background #000
            border-radius 5px

      img.avatar-img
        width 108px
        height 108px
        object-fit cover
        right 0
        top 0
        border-radius 500px
        position absolute
        opacity 1
        transition .3s

if hexo-config('aside.card.style') == 1
  #aside-content
    .card-widget.card-info
      min-height 340px
      padding 0
      margin-top 0

      .author-info__top-group
        margin-top 20px
        display flex
        height 28px
        width 100%

      .card-info-bg-top
        min-height 140px
        background: linear-gradient(-25deg, var(--efu-main), var(--efu-main-op-deep), var(--efu-main), var(--efu-main-op-deep))
        background-size: 400%
        if hexo-config('aside.card.background')
          background-image url(hexo-config('aside.card.background'))
          background-size cover
          background-position center
          background-repeat no-repeat

      .card-info-avatar
        width 114px
        height 114px
        right calc(50% - 57px)
        top 75px
        border-radius 500px
        position absolute
        transition cubic-bezier(.69, .39, 0, 1.21) .3s
        transform-origin bottom
        z-index 1
        border 7px solid var(--efu-card-bg)

        .avatar-img
          overflow hidden
          border-radius 500px
          width 100px
          cursor pointer
          height 100px

          img
            object-fit cover
            width 100%
            height 100%
            transition .3s

            &:hover
              transform: scale(1.3)

        if hexo-config('aside.card.author.sticker')
          .avatar-sticker
            position absolute
            bottom -2px
            right -2px
            width 33px
            height 33px
            line-height 34px
            z-index 0
            display flex
            align-items center
            justify-content center
            transition .3s .2s
            transform scale(1)
            background var(--efu-card-bg)
            border-radius 50%

            img
              width 26px
              height 26px

      .card-info-social-icons
        width 100%
        justify-content center
        padding 10px 20px

        i
          background 0 0
          color var(--efu-fontcolor)

          &:hover
            transform rotate(360deg)
            color var(--efu-theme)

      .card-info__desc_group
        display flex
        align-items center
        flex-direction column

        .author-info__name
          margin-top 60px
          text-align center
          font-weight 700
          color var(--efu-fontcolor)
          font-size 20px
          line-height 1
          margin-bottom 5px

        .author-info__desc
          font-size 14px
          color var(--efu-font-color)
          line-height 2

        .card-info__data
          display table
          width 100%
          table-layout fixed
          margin 12px 0 4px
          padding 0 20px

          a
            position relative
            display table-cell

            &:hover
              transition all .3s
              color var(--efu-theme)

              div
                transition all .3s
                color var(--efu-theme)

            &:not(:last-child):after
              opacity: .3
              position: absolute
              top: 6px
              right: 0
              content: ""
              width: 1px
              height: 40px
              background: var(--efu-fontcolor)

            .length-num
              margin-top: -.32em
              color: var(--efu-fontcolor)
              font-size: 1.4em
              line-height: 1.5

            .headline
              color: var(--efu-font-color)
              font-size: 1em
              line-height: 1.5

if hexo-config('aside.card.style') == 2
  #aside-content .card-widget.card-info
    padding 0

  .card-info-bg-top
    width 100%
    height 95px
    position relative
    background: linear-gradient(-25deg, var(--efu-main), var(--efu-main-op-deep), var(--efu-main), var(--efu-main-op-deep))
    if hexo-config('aside.card.background')
      background-image url(hexo-config('aside.card.background'))
      background-size cover
      background-position center
      background-repeat no-repeat
  .author-info__name
    font-size 24px
    line-height 35px
    color var(--efu-white)
    font-weight 700
    position absolute
    top 55px
    if hexo-config('aside.position') == 0
      left 6rem
    else
      left 1rem
  .card-info__data
    position absolute
    top 98px
    gap .5rem
    z-index 1
    if hexo-config('aside.position') == 0
      right 1rem
    else
      left 1rem

    .headline
      color var(--efu-gray)

    .length-num
      font-weight 700

    a
      font-size 14px
      display flex
      line-height 18px
      gap .1rem
  .card-info__desc_group
    padding 44px 1rem 1rem
    min-height 50px
    opacity .8
    line-height 18px
  .author-info-social
    position absolute
    display inline-flex
    gap: 5px
    top .5rem
    if hexo-config('aside.position') == 0
      right 1rem
    else
      left 1rem

    i
      font-size 18px
      width 30px
      height 30px
      border-radius 50%
      background rgba(255, 255, 255, .2)
      backdrop-filter blur(10px)
      color var(--efu-white)
      display flex
      justify-content center
      align-items center

  .social-icons
    order 1
    opacity 0
    transition .3s
    display flex
    pointer-events none
    gap 5px
  .more-info
    if hexo-config('aside.position') == 0
      order 1
    else
      order 0
    cursor pointer
    display flex
    justify-content center
    align-items center
  .card-info-avatar
    width 80px
    height 80px
    top 50px
    border-radius 500px
    position absolute
    transition cubic-bezier(.69, .39, 0, 1.21) .3s
    transform-origin bottom
    border 3px solid var(--efu-card-bg)
    z-index 1
    if hexo-config('aside.position') == 0
      left 1rem
    else
      right 1rem

    .avatar-img
      overflow hidden
      border-radius 500px
      width 74px
      cursor pointer
      height 74px

      img
        object-fit cover
        width 100%
        height 100%
        transition .3s

        &:hover
          transform: scale(1.3)

    if hexo-config('aside.card.author.sticker')
      .avatar-sticker
        position absolute
        bottom -2px
        right -2px
        width 26px
        height 26px
        line-height 26px
        z-index 0
        display flex
        align-items center
        justify-content center
        transition .3s .2s
        transform scale(1)
        background var(--efu-card-bg)
        border-radius 50%

        img
          width 21px
          height 21px

[data-theme=dark] #aside-content
  > .card-widget.card-info
    border var(--style-border-always)

#aside-content
  .card-webinfo
    .webinfo
      .webinfo-item-title
        display flex

        i
          line-height: 2 !important
          margin-right: 6px
          width: 16px
          text-align: center
          font-size: 16px !important

      .webinfo-item
        display flex
        justify-content space-between
        white-space nowrap
        -webkit-box-align center
        align-items center
        padding .1rem .5rem 0

        div:first-child
          -webkit-box-flex 1
          flex 1 1 0
          padding-right 1rem


  .card-allinfo

    hr
      display flex
      position relative
      margin .5rem 0
      border 1px dashed var(--efu-theme-op)

    .item-headline
      display none

    .card-tag-cloud
      max-height 500px
      overflow hidden
      position relative

      &.all-tags
        max-height none

        &:after
          display none

      &:after
        content ""
        position absolute
        bottom 0
        left 0
        right 0
        height 150px
        background-image linear-gradient(to top, var(--efu-card-bg), transparent)
        pointer-events none

      a
        display inline-block
        padding 0 0.3rem
        font-size .8rem
        border-radius 8px

        sup
          opacity .6
          margin-left 2px

        &:hover
          background var(--efu-theme)
          color var(--efu-white) !important
          box-shadow var(--efu-shadow-theme)
          cursor pointer
          border-radius 5px

        &.tags-cloud-more
          width 100%
          text-align center
          border-radius 8px !important
          border var(--style-border)
          margin-top 8px
          font-size 16px !important

    span#more-tags-btn
      transition .3s
      width 100%
      text-align center
      background var(--efu-secondbg)
      color var(--efu-fontcolor)
      border-radius 8px
      display flex
      justify-content center
      font-size 14px
      padding 4px 0
      border var(--style-border-always)
      box-shadow var(--heo-shadow-border)
      cursor pointer

      &:hover
        background var(--efu-main)

  .card-archives
    ul.card-archive-list
      margin 0
      padding 0
      list-style none
      display: flex
      flex-direction: row
      justify-content: space-between
      flex-wrap: wrap

      > .card-archive-list-item
        width 100%
        flex 0 0 48%

        a
          display inline-block
          padding .15rem .5rem
          width 100%
          color var(--efu-fontcolor)
          transition all .4s ease 0s
          border-radius: 8px
          margin: 4px 0
          flex-direction: column
          align-content: space-between
          border: var(--style-border)

          &:hover
            background-color var(--efu-theme)
            color var(--efu-card-bg)
            border-radius 5px
            box-shadow: var(--efu-shadow-theme)
            padding: .15rem .5rem
            border: var(--style-border-hover)
            cursor pointer

          span
            display inline-block
            vertical-align bottom

            &:last-child
              text-align right
              margin-left: 4px

          .card-archive-list-count-group
            display flex
            flex-direction row

            span.card-archive-list-count
              ext-align left
              font-size 1.1rem
              line-height 0.9
              font-weight bold

            .card-archive-list-count-unit
              width auto
              text-align left
              font-size 14px
              font-weight 700

          .card-archive-list-date
            font-size 14px
            opacity .6


#aside-content .card-tag-cloud a.highlight
  color var(--efu-lighttext)
  font-weight 500

#aside-content
  .card-recent-post
    .aside-list
      .aside-list-item
        padding 2px 6px 8px 6px
        border-radius 12px
        transition .3s
        margin 4px 0
        cursor pointer
        display flex
        align-items flex-start

        &:hover
          background var(--efu-main)
          color var(--efu-white)
          transition .3s
          box-shadow var(--efu-shadow-main)

          .content a
            color var(--efu-white)

        .thumbnail
          -webkit-mask-image -webkit-radial-gradient(center, #fff, #000)
          border-radius 8px
          border var(--style-border)
          display flex
          align-items center
          overflow hidden
          width 2.1em
          height 2.1em
          margin-top 4px

          img
            width 140%
            height 140%
            transition all .6s ease 0s
            object-fit cover

        .content
          -webkit-box-flex 1
          flex 1 1 0
          padding-left 10px
          word-break break-all
          display flex
          flex-direction column

          .title
            font-weight 700
            padding 2px 0
            margin-bottom 8px
            color var(--efu-fontcolor)
            font-size 95%
            line-height 1.3
            -webkit-line-clamp 2
            overflow hidden

          .article-recent_post_categories
            font-size 12px
            font-weight 700
            opacity .6
            line-height 1


favicon = hexo-config('aside.flip.favicon')
face = hexo-config('aside.flip.face')
faceback = hexo-config('aside.flip.backface')
backcolor = convert(hexo-config('aside.flip.backcolor'))

#aside-content
  .card-widget.card-platform
    background backcolor
    display flex
    justify-content center
    align-content center
    padding 0
    cursor pointer
    border none
    height 110px
    border var(--style-border)
    transition 0.6s

    &:before
      position absolute
      width 100%
      height 100%
      left 0
      top 0
      background url(favicon) center center no-repeat
      content ''
      background-size cover
      transition .2s cubic-bezier(.45, .04, .43, 1.21)

    &:hover:before
      top 100%
      opacity 0
      transition .3s ease-out

    &:hover
      #flip-content
        transform rotateY(180deg)

    #flip-wrapper
      perspective 1000
      position relative
      width 235px
      height 110px
      z-index 1

    #flip-wrapper #flip-content
      width 100%
      height 100%
      transform-style preserve-3d
      transition cubic-bezier(0, 0, 0, 1.29) 0.3s

    #flip-wrapper #flip-content .face
      position absolute
      width 100%
      height 100%
      -webkit-backface-visibility hidden
      backface-visibility hidden
      background url(face) center center no-repeat
      background-size 100%

    #flip-wrapper #flip-content .face.back
      display block
      -webkit-transform rotateY(180deg)
      transform rotateY(180deg)
      box-sizing border-box
      background url(faceback) center center no-repeat
      background-size 100%

  .card-widget.card-adsense
    padding 0

if hexo-config('aside.newest_comment.enable')
  .card-recent-comment
    .recent-comment-more
      margin-left auto
      margin-right .5rem
      &:hover
        color var(--efu-lighttext)
        transition .3s
    .aside-list-item
      padding: .5rem
      width: 100%
      display: flex
      flex-direction: row
      height: 80px
      transition: .3s
      position: relative
      &:not(:last-child)
        border-bottom 1px dashed rgba(255, 255, 255, .1)

      .thumbnail img
        width: 60px
        height: 60px
        margin-right: 8px
        border-radius: 12px

      .content
        max-width: calc(100% - 68px)
        line-height 1.5

        .comment
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          font-size 14px
          -webkit-line-clamp 2
          transition .3s
          -webkit-box-orient vertical
          cursor pointer
          &:hover
            color var(--efu-lighttext)
            transition .3s

        .datetime
          font-size 12px
          color var(--efu-secondtext)
          margin-top auto