$tools-item-width = 2.2rem
$tools-item-font-size = 1.1rem
$tools-item-border-radius = 0.2rem

.side-tools-show-handle {
  transform translateX(100%)
  opacity 0
  transition-t("transform, opacity", "0, 0", "0.26, 0.26", "linear, linear")

  &.show {
    transform translateX(0)
    opacity 1
  }
}

.side-tools-container {
  .tools-item {
    width $tools-item-width
    height $tools-item-width
    margin-bottom 0.25rem
    color var(--text-color-3)
    font-size $tools-item-font-size
    background var(--background-color-1)
    border-right none
    border-radius $tools-item-border-radius
    box-shadow 0.1rem 0.1rem 0.2rem var(--shadow-color)
    cursor pointer

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

    &:hover {
      color var(--background-color-1)
      background var(--primary-color)
      box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)

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


    +keep-tablet() {
      width $tools-item-width * 0.9
      height $tools-item-width * 0.9
      font-size $tools-item-font-size * 0.9

      &.toggle-show-toc-tablet
      &.go-to-comments-tablet {
        display flex !important
      }
    }

    &.rss {

      a {
        width 100%
        height 100%
        border-radius $tools-item-border-radius

        &:hover {
          color var(--background-color-1)
          background var(--primary-color)
          box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
        }
      }
    }

    &.toggle-show-toc-tablet
    &.go-to-comments-tablet {
      display none
    }
  }


  .exposed-tools-list {

    .tool-scroll-to-top {
      display none

      &.show {
        display flex
      }


      &.show-arrow {
        .percent {
          display none
        }

        .arrow {
          display flex
        }
      }


      &.show-percent {
        .percent {
          display flex
        }

        .arrow {
          display none
        }
      }


      &:hover {
        .percent {
          display none
        }

        .arrow {
          display flex
        }
      }


      .percent {
        font-size 1rem
      }
    }
  }
}