.tool-buttons {

  @include sidebar-toggle();
  background: var(--body-bg-color);
  bottom: 55px;
  z-index: 100;
  filter: alpha(opacity=0);
  font-size: 12px;

  .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;
    font-size: $font-size-larger;
    line-height: 35px;
    padding: 0;
    outline: 0;
    border: none;
    text-transform: none;
    cursor: pointer;
    opacity: $tool-btn-opacity;
    touch-action: manipulation;

    &: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 {
    font-size: $font-size-smaller;

    @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;
      }
    }
  }
}