.lpv {
  &__side {
    overflow: hidden;
    display: flex;
    flex-flow: column;
  }
  &__moves {
    position: relative; // required for autoscroll
    flex: 1 1 0;
    display: flex;
    flex-flow: row wrap;
    overflow-y: auto;
    background: var(--c-lpv-bg-movelist, $lpv-bg-movelist);
    align-items: center;
    align-content: flex-start;
    will-change: scroll-position;
    user-select: none;
    line-height: 1.7;
    min-width: 20ch;
    index {
      color: var(--c-lpv-font-shy, $lpv-font-shy);
    }
    > index {
      flex: 0 0 15%;
      margin-right: 3%;
      display: flex;
      justify-content: flex-end;
    }
    move {
      border-radius: 3px;
      padding-left: 3%;
      font-weight: bold;
      white-space: nowrap;
      &.empty {
        color: var(--c-lpv-font-shy, $lpv-font-shy);
      }
      &:not(.empty):hover {
        background: var(--c-lpv-move-hover, $lpv-move-hover);
        color: var(--c-lpv-accent-over, $lpv-accent-over);
        cursor: pointer;
      }
      &.ancestor {
        color: var(--c-lpv-past-moves, $lpv-past-moves);
      }
      &.current {
        background: var(--c-lpv-current-move, $lpv-current-move) !important;
        color: var(--c-lpv-accent-over, $lpv-accent-over);
      }
      &.inaccuracy {
        color: var(--c-lpv-inaccuracy, $lpv-inaccuracy);
        &:hover {
          background: var(--c-lpv-bg-inaccuracy-hover, $lpv-bg-inaccuracy-hover);
        }
      }
      &.mistake {
        color: var(--c-lpv-mistake, $lpv-mistake);
        &:hover {
          background: var(--c-lpv-bg-mistake-hover, $lpv-bg-mistake-hover);
        }
      }
      &.blunder {
        color: var(--c-lpv-blunder, $lpv-blunder);
        &:hover {
          background: var(--c-lpv-bg-blunder-hover, $lpv-bg-blunder-hover);
        }
      }
      &.good {
        color: var(--c-lpv-good-move, $lpv-good-move);
        &:hover {
          background: var(--c-lpv-bg-good-hover, $lpv-bg-good-hover);
        }
      }
      &.brilliant {
        color: var(--c-lpv-brilliant, $lpv-brilliant);
        &:hover {
          background: var(--c-lpv-bg-brilliant-hover, $lpv-bg-brilliant-hover);
        }
      }
      &.interesting {
        color: var(--c-lpv-interesting, $lpv-interesting);
        &:hover {
          background: var(--c-lpv-bg-interesting-hover, $lpv-bg-interesting-hover);
        }
      }
    }
    > move {
      flex: 0 0 41%;
      font-size: 1.1em;
    }
    comment {
      user-select: text;
      font-size: 0.9em;
    }
    comment.result {
      text-align: center;
      font-weight: bold;
    }
    > comment {
      flex: 1 1 100%;
      background: var(--c-lpv-bg-variation, $lpv-bg-variation);
      border: 1px solid var(--c-lpv-side-border, $lpv-side-border);
      border-width: 1px 0;
      padding: 0.4em 1em;
      line-height: 1.4;
      overflow-wrap: break-word;
      word-break: break-word;
      + variation,
      + comment {
        border-top: none;
      }
    }
    > variation {
      flex: 1 1 100%;
      display: block;
      overflow: hidden;
      font-size: 0.8em;
      background: var(--c-lpv-bg-variation, $lpv-bg-variation);
      border: 1px solid var(--c-lpv-side-border, $lpv-side-border);
      border-width: 1px 0;
      padding: 0em 0.6em;
      + variation {
        border-top: none;
      }
      move {
        display: inline-block;
        padding: 0.1em 0.2em;
        min-width: 2.5ch;
        text-align: center;
        + index {
          margin-left: 0.2em;
        }
      }
      index {
        margin: 0;
        padding: 0.1em 0;
        + move {
          margin-left: 0.1em;
        }
      }
      comment {
        align-self: center;
        margin: 0 0.3em;
      }
      paren {
        color: var(--c-lpv-font-shy, $lpv-font-shy);
        &.open {
          margin: 0 0.1em 0 0.2em;
        }
        &.close {
          margin: 0 0.2em 0 0.1em;
        }
      }
    }
  }
}