_tools.scss

.analyse {
  &__tools {
    @extend %box-neat-force, %flex-column;

    background: $c-bg-box;

    .ceval {
      flex: 0 0 44px;
    }

    .sub-box {
      @extend %border-bottom-active;

      user-select: none;

      .title {
        font-size: 0.9rem;
        line-height: 1.9em;
        background: mix($c-secondary, $c-bg-box, 40%);
        padding: 0 7px;
        a {
          font-weight: bold;
        }
      }
    }

    .comp-off__hint {
      @extend %metal-bg;

      opacity: 0.8;
      padding: 0.3em 1em;
      text-align: center;

      button {
        @extend %button-none;

        margin-#{$start-direction}: 1em;
        color: $c-link;

        &:hover {
          color: $c-link-hover;
        }
      }
    }
  }

  &__moves {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    // 0 size forces vertical scrollbar
    overflow-y: auto;
    overflow-x: hidden;

    // else a scrollbar appears sometimes
    border-top: $border;
    position: relative;

    /* required so line::before scrolls along the moves! */
    .result,
    .status {
      background: $c-bg-zebra;
      text-align: center;
    }

    .result {
      border-top: $border;
      font-weight: bold;
      font-size: 1.2em;
      padding: 5px 0 3px 0;
    }

    .status {
      font-size: 1em;
      font-style: italic;
      padding-bottom: 7px;
    }

    button.next {
      border: 0;
      background: $c-bg-box;
      color: $c-link;
      padding: 0.5em;
      width: 100%;

      @include transition;

      &:hover {
        color: $c-link-hover;
      }

      &::before {
        margin-#{$end-direction}: 0.3em;
      }

      &.highlighted {
        background: mix($c-primary, $c-bg-box, 80%);
        color: $c-primary-over;

        &:hover {
          background: $c-primary;
        }
      }
    }
  }

  &__controls {
    height: $col3-uniboard-controls;
    align-items: stretch;

    div {
      display: flex;
      flex: 1 1 auto;
      align-items: stretch;
    }

    .jumps {
      flex: 3 1 auto;
    }

    .fbt {
      @extend %page-text;

      flex: 0 0 2.5rem;
      transition: visibility 0s;
    }

    .persistence {
      color: $c-good;
      @media (max-width: at-most($xx-small)) {
        display: none;
      }
    }

    .active {
      margin-top: -3px;
      padding-top: 3px;
      color: $c-good-over;
    }

    @include mq-is-col1 {
      height: $col1-uniboard-controls;

      .fbt {
        flex: 0 0 3.5rem;
      }
    }
  }
}