.tool-buttons {

  @include sidebar-toggle();
  background: none;
  bottom: 58px;
  filter: alpha(opacity=0);
  font-size: $font-size-smaller;
  @include mobile() {
    font-size: $font-size-smallest;
  }

  .button {
    display: block;
    margin-bottom: 5px;
    width: 36px;
    height: 36px;
    border-radius: 5px;
    background-color: $tool-btn-bg;
    color: $tool-btn-color;
    text-align: center;
    line-height: 35px;
    padding: 0;
    outline: 0;
    border: none;
    text-transform: none;
    cursor: pointer;
    opacity: $tool-btn-opacity;
    touch-action: manipulation;

    @include mobile() {
      width: 24px;
      height: 24px;
      line-height: 24px;
      border-radius: 3px;
    }

    &:hover {
      color: $tool-btn-hover-fore-color;
      opacity: $tool-btn-opacity-hover;
    }
  }

  .goto-comments {
    display: none;
  }

  .goto-comments-on {
    display: block;
  }
}

@if $back2top_enable {
  .back-to-top {

    @if not $back2top_scrollpercent {
      span {
        display: none;
      }
    }

    @if $back2top_sidebar {
      margin: 20px -$sidebar-offset -10px -20px;
      opacity: 0;
      transition: opacity $transition-ease;

      &.back-to-top-on {
        cursor: pointer;
        opacity: $b2t-opacity;

        &:hover {
          opacity: $b2t-opacity-hover;
        }
      }
    } @else {
      bottom: $b2t-position-bottom;
      box-sizing: border-box;
      color: $b2t-color;
      padding: 0 6px;
      transition: bottom $transition-ease;
      @include sidebar-toggle();

      @if not $back2top_scrollpercent {
        width: 24px;
      }

      &:hover {
        color: $sidebar-highlight;
      }

      &.back-to-top-on {
        bottom: $b2t-position-bottom-on;
      }
    }
  }
}
