$post-tools-offset = calc((100vw - var(--page-content-max-width) / 2) - 5rem)

.page-container {
  width 100%
  height auto
  background var(--background-color-1)

  .page-main-content {
    display flex
    flex-direction column
    justify-content space-between
    min-height 100vh
    padding-top var(--header-height)

    &.is-home {
      .transparent-1 {
        background var(--header-transparent-background-1)
        -webkit-backdrop-filter blur(var(--header-backdrop-filter-blur))
        backdrop-filter blur(var(--header-backdrop-filter-blur))
      }

      .transparent-2 {
        background var(--header-transparent-background-2)
        -webkit-backdrop-filter blur(calc(var(--header-backdrop-filter-blur) * 1.25))
        backdrop-filter blur(calc(var(--header-backdrop-filter-blur) * 1.25))
      }
    }


    .header-shrink & {
      padding-top var(--header-shrink-height)


      +keep-tablet() {
        padding-top calc(var(--header-shrink-height) * 0.9)
      }

      +keep-mobile() {
        padding-top calc(var(--header-shrink-height) * 0.8)
      }
    }


    +keep-tablet() {
      padding-top calc(var(--header-height) * 0.9)
    }


    +keep-mobile() {
      padding-top calc(var(--header-height) * 0.8)
    }


    .page-main-content-top {
      position fixed
      top 0
      right 0
      z-index $z-index-5
      box-sizing border-box
      width 100%
      height var(--header-height)
      transition-t("transform, height", "0, 0", "0.3, 0.2", "ease-out, ease")

      +keep-tablet() {
        height calc(var(--header-height) * 0.9)
      }


      +keep-mobile() {
        height calc(var(--header-height) * 0.8)
      }

      &.hide {
        transform translateY(-105%)
      }


      .header-shrink & {
        height var(--header-shrink-height)

        +keep-tablet() {
          height calc(var(--header-shrink-height) * 0.9)
        }

        +keep-mobile() {
          height calc(var(--header-shrink-height) * 0.8)
        }
      }


      &.reset-color {
        .header-content {
          .site-name {
            color var(--text-color-1) !important
          }

          .menu-item {
            a {
              color var(--text-color-3) !important

              &:hover {
                color var(--primary-color) !important
              }
            }


            i.search {
              color var(--text-color-3) !important
            }
          }
        }
      }
    }


    .page-main-content-middle {
      z-index $z-index-2
      display flex
      justify-content center
      width 100%
      padding var(--component-gap) 0

      +keep-tablet() {
        padding calc(var(--component-gap) * 0.8) 0
      }

      +keep-mobile() {
        padding calc(var(--component-gap) * 0.6) 0
      }

      .main-content {
        width var(--page-content-width)
        max-width var(--page-content-max-width)
        height 100%
        transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")

        .has-toc & {
          max-width var(--page-content-max-width-2)
        }


        +keep-tablet() {
          width var(--page-content-width-tablet)
        }


        +keep-mobile() {
          width var(--page-content-width-mobile)
        }
      }
    }


    .page-main-content-bottom {
      width 100%
    }
  }


  .post-tools {
    position fixed
    top calc(var(--header-height) + var(--component-gap))
    z-index $z-index-3
    box-sizing border-box
    opacity 0
    transition-t("top, transform, opacity, left", "0, 0, 0.2, 0", "0.2, 0.2, 0.2, 0.2", "ease, ease, ease, ease")

    &.right-toc {
      left $post-tools-offset
    }

    &.left-toc {
      right $post-tools-offset
    }

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


    +keep-tablet() {
      display none !important
    }
  }


  .side-tools {
    position fixed
    right 0
    bottom 1.6rem
    z-index $z-index-3
    box-sizing border-box
    padding-right 1rem

    +keep-tablet() {
      padding-right 0
    }

    &:hover {
      .side-tools-container {
        transform translateX(0)
        opacity 1
      }
    }
  }


  .tablet-post-toc-mask {
    position fixed
    top 0
    right 0
    z-index $z-index-10
    box-sizing border-box
    width 100%
    height 100%
    background rgba(0, 0, 0, 0)
    visibility hidden
    transition-t("visibility", "0", "0.2", "ease")


    .tablet-post-toc {
      position absolute
      top 0
      left 0
      box-sizing border-box
      width 22rem
      height 100%
      padding 1.2rem 1rem
      background var(--background-color-1)
      transform translateX(-100%)
      transition-t("transform", "0", "0.4", "ease")

      +keep-mobile() {
        width 70%
      }
    }
  }
}