lila/ui/analyse/css/_tools.scss

.analyse__tools {
  @extend %box-neat-force, %flex-column;

  position: relative;
  background: $c-bg-box;

  .ceval {
    flex: 0 0 44px;
  }

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

    .title {
      font-size: 0.9rem;
      line-height: 1.9em;
      background: $m-secondary_bg--mix-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 {
      margin-inline-start: 1em;
      color: $c-link;

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

.analyse__moves {
  @include prevent-select;

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

  // 0 size forces vertical scrollbar
  overflow-y: auto;
  overflow-x: hidden;
  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-inline-end: 0.3em;
    }

    &.highlighted {
      background: $m-primary_bg--mix-80;
      color: $c-over;

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

.analyse__controls {
  height: $col3-uniboard-controls;
  align-items: stretch;

  .cmn-toggle {
    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;
  }

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

  .fbt.latent {
    background-color: $m-secondary--fade-50;
  }
}