$li-margin-bottom = 0.8rem
$post-tool-button-width = 2.5rem

.post-tools-container {
  padding-top var(--component-gap)

  .post-tools-list {
    li {
      margin-bottom $li-margin-bottom

      &:last-child {
        margin-bottom 0
      }
    }


    li.tools-item {
      position relative
      box-sizing border-box
      width $post-tool-button-width
      height $post-tool-button-width
      color var(--text-color-3)
      font-size 1.2rem
      background var(--background-color-1)
      border-radius 50%
      box-shadow 2px 2px 5px var(--shadow-color)
      cursor pointer

      &:hover {
        box-shadow 2px 2px 8px var(--shadow-hover-color)
      }

      i {
        color var(--text-color-3)
      }


      &:hover {
        color var(--background-color-1)
        background var(--primary-color)

        i {
          color var(--background-color-1) !important
        }
      }


      &.toggle-show-toc {
        display none
      }


      &.go-to-comments {
        .post-comments-count {
          position absolute
          top 0
          right -1rem
          display none
          align-items center
          justify-content center
          box-sizing border-box
          min-width 1.1rem
          height 1.1rem
          padding 0 0.2rem
          color var(--badge-color)
          font-size 12px
          background var(--badge-background-color)
          border-radius 0.4rem

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


    li.status-item {
      width $post-tool-button-width
      height $post-tool-button-width
      color var(--text-color-3)
      font-size 1.6rem
      cursor pointer


      &.post-lock {
        cursor default

        .fa-lock-open {
          display none
          color var(--keep-success-color)
        }

        &.decrypt {
          cursor pointer

          .fa-lock-open {
            display block
          }

          .fa-lock {
            display none
          }
        }
      }
    }
  }
}