$tools-item-width = 32px
$tools-item-font-size = 1.1rem
$tools-item-border-radius = 1px


.side-tools-container {
  position relative

  .tools-item {
    width $tools-item-width
    height $tools-item-width
    margin-bottom 3px
    color var(--default-text-color)
    font-size $tools-item-font-size
    background var(--background-color)
    border-right none
    border-radius $tools-item-border-radius
    box-shadow 1px 1px 3px var(--shadow-color)
    cursor pointer

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

    &:hover {
      color var(--background-color)
      background var(--primary-color)
      box-shadow 2px 2px 6px var(--shadow-color)

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

    +keep-tablet() {
      width $tools-item-width * 0.9
      height $tools-item-width * 0.9
      margin-bottom 2px
      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)
          background var(--primary-color)
          box-shadow 2px 2px 6px var(--shadow-color)
        }
      }
    }
  }


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

    .tool-expand-width {
      +keep-tablet() {
        display none
      }
    }


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