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


.side-tools-container {
  position relative

  .tools-item {
    width $tools-item-width
    height $tools-item-width
    margin-bottom 0.2rem
    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
      margin-bottom 0.2rem
      font-size $tools-item-font-size * 0.9
    }

    &.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)
        }
      }
    }
  }


  .side-tools-list {
    transform translateX(100%)
    opacity 0
    transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")

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


  .exposed-tools-list {

    if (hexo-config('style.scroll.percent.enable') == true) {
      .tool-scroll-to-top {
        display none

        &.show {
          display flex
        }

        &:hover {

          .percent {
            display none
          }

          .arrow-up {
            display flex
          }
        }

        .arrow-up {
          display none
        }

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