@import "../../common/stylus-variables.styl"

$avatar-width = 3.2rem
$arrow-icon-width = 1rem
$post-nav-max-width = 14rem
$post-title-font-size = 1.6rem
$toc-container-width = 15rem
$spacer-padding = 2rem


.post-page-container {
  display flex
  justify-content space-between
  width 100%
  height 100%

  &.show-toc {
    .pc-post-toc {
      display block
    }

    .post-content-container {
      width 'calc(100% - %s)' % $toc-container-width
    }
  }


  &.encrypt {
    .post-aging-tips {
      display none !important
    }
  }


  +keep-tablet() {
    .pc-post-toc {
      display none !important
    }

    .post-content-container {
      width 100% !important
    }
  }


  .post-content-container {
    order 0
    width 100%
    height 100%


    keep-container(1, 0, 2rem)

    +keep-mobile() {
      padding 0 0.2rem !important
      box-shadow none !important

      &:hover {
        box-shadow none !important
      }
    }


    .post-content-top {
      display flex
      align-items flex-end
      width 100%
      padding-top $spacer-padding
      padding-right $spacer-padding
      overflow hidden
      background-color var(--background-color-2)
      border-top-left-radius var(--box-border-radius)
      border-top-right-radius var(--box-border-radius)

      +keep-tablet() {
        height 12.8rem
        padding-top $spacer-padding * 0.8
        padding-right $spacer-padding  * 0.8

        .cover-post-title {
          padding $spacer-padding * 0.5 * 0.8 $spacer-padding * 0.8 !important
          font-size $post-title-font-size * 0.9 !important
          line-height 1.5 !important
        }
      }


      +keep-mobile() {
        height 11.8rem
        padding-top $spacer-padding * 0.6
        padding-right $spacer-padding  * 0.6

        .cover-post-title {
          padding $spacer-padding * 0.5 * 0.6 $spacer-padding * 0.6 !important
          font-size $post-title-font-size * 0.8 !important
          line-height 1.4 !important
        }
      }


      .cover-post-title {
        position relative
        z-index $z-index-1
        box-sizing border-box
        max-width 100%
        max-height 100%
        padding $spacer-padding * 0.5 $spacer-padding
        overflow-y auto
        color var(--text-color-2)
        font-weight 600
        font-size $post-title-font-size
        line-height 1.6
        background var(--background-color-1-transparent)
        border-top-right-radius var(--box-border-radius)
        -webkit-backdrop-filter blur(2px)
        backdrop-filter blur(2px)
      }


      .post-cover {
        position absolute
        top 0
        left 0
        box-sizing border-box
        width 100%
        height 100%
        object-fit cover
      }
    }


    .post-content-bottom {
      padding $spacer-padding

      &.has-cover {
        padding-top $spacer-padding * 0.5
      }

      +keep-mobile() {
        padding $spacer-padding * 0.5 0 !important
      }

      .post-title {
        color var(--text-color-2)
        font-weight 600
        font-size $post-title-font-size
        line-height 1.6
        text-align var(--post-title-align)

        +keep-tablet() {
          font-size $post-title-font-size * 0.9
        }

        +keep-mobile() {
          font-size $post-title-font-size * 0.8
        }
      }


      .post-header {
        display flex
        justify-content flex-start
        width 100%
        margin-top 1rem

        +keep-tablet() {
          margin-top 0.9rem
          transform scale(0.9)
          transform-origin left top
        }

        .avatar-box {
          display var(--post-author-avatar)
          flex-shrink 0
          width $avatar-width
          height $avatar-width
          margin-right 0.8rem
          padding 0.1rem
          border 1px solid var(--border-color)
          border-radius 50%

          img {
            width 100%
            height 100%
            background var(--avatar-background-color)
            border-radius 50%
          }
        }


        .info-box {
          display flex
          flex-direction column
          justify-content space-between
          box-sizing border-box
          width 100%
          height 100%
          padding 0.2rem 0

          .author {
            display var(--post-author-name)
            align-items center
            font-weight 600
            font-size 1.18rem

            .name {
              color var(--text-color-3)
            }

            .author-badge {
              margin-left 0.8rem
              padding 0 0.4rem
              color #fff
              font-weight 500
              font-size 0.8rem
              background var(--primary-color)
              border-radius 0.4rem
            }
          }

          .meta-info {
            margin-top 0.1rem
          }
        }
      }


      .post-content {
        margin-top calc(var(--component-gap) * 0.8)
        padding-bottom calc(var(--component-gap) * 0.8)
        color var(--text-color-3)
        text-align justify
        word-wrap break-word

        +keep-tablet() {
          margin-top calc(var(--component-gap) * 0.6)
          padding-bottom calc(var(--component-gap) * 0.6)
        }


        .post-aging-tips {
          position relative
          display none
          box-sizing border-box
          margin-bottom 1.8rem
          padding 1rem
          color var(--keep-warning-color)
          line-height 1.6
          background var(--keep-warning-background-color)
          border 0.1rem solid var(--keep-warning-border-color)
          border-radius 0.4rem

          i {
            margin-right 0.4rem
            color var(--keep-warning-color)
          }

          .days {
            color var(--keep-warning-color)
          }
        }


        .post-encrypt-box {
          margin-left $avatar-width + 0.8rem
          padding 1rem 0

          .password-input {
            width 60%
            margin 0
            padding 0.8rem 1.2rem
            color var(--text-color-3)
            font-weight 400 !important
            font-size 1.2rem
            letter-spacing 2px
            background none
            border none
            border-bottom 0.2rem solid var(--border-color)
            outline none

            +keep-tablet() {
              width 80%
            }

            &.error {
              border 0.2rem solid var(--keep-danger-color)
            }

            &::placeholder {
              color var(--text-color-4)
              font-size 1.1rem
              letter-spacing 1px
            }

            &:hover
            &:focus {
              background var(--background-color-2)
            }
          }
        }

        if (hexo-config('post') && hexo-config('post.copyright_info') == true) {
          border-bottom 2px dashed var(--border-color)
        }
      }


      .post-bottom-tags-and-share {
        display flex
        justify-content space-between
        width 100%
        margin-top 1rem

        .post-tags-box {
          display flex
          flex-wrap wrap
          align-items center
          justify-content flex-start
          width 100%
          font-size 0.96rem


          .tag-item {
            margin-right 0.4rem
            line-height 2

            .icon {
              color var(--text-color-3)
              font-size 0.88rem
            }
          }
        }
      }


      .post-nav {
        height 2.8rem
        margin-top var(--component-gap)

        .prev-post
        .next-post {
          box-sizing border-box
          max-width $post-nav-max-width
          height 100%
          keep-container(1, 0.8rem, 0)
          border-radius 0.32rem


          a {
            position relative
            display block
            box-sizing border-box
            width 100%
            height 100%

            &.prev {
              padding-left $arrow-icon-width
            }

            &.next {
              padding-right $arrow-icon-width
            }

            .arrow-icon {
              position absolute
              top 0
              width $arrow-icon-width
              height 100%

              &.left {
                left 0
              }

              &.right {
                right 0
              }
            }

            .title {
              width 100%
              height 100%
            }
          }
        }

        .prev-post {
          float left
        }

        .next-post {
          float right
        }

        .post-nav-item {
          display none

          +keep-tablet() {
            display inline-block
          }
        }


        .post-nav-title-item {
          +keep-tablet() {
            display none
          }
        }
      }
    }
  }


  .pc-post-toc {
    position sticky
    top calc(var(--header-height) + var(--component-gap))
    display none
    flex-shrink 0
    box-sizing border-box
    width $toc-container-width
    max-height calc(100vh - calc(var(--header-height) + var(--component-gap)))
    transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease")

    &.right-toc {
      order 1
      padding 2rem 0 2rem 1.8rem
    }

    &.left-toc {
      order -1
      padding 2rem 1.8rem 2rem 0
    }

    .header-shrink & {
      top calc(var(--header-shrink-height) + var(--component-gap))
      max-height calc(100vh - calc(var(--header-shrink-height) + var(--component-gap)))
    }
  }
}