lila/ui/analyse/css/study/panel/_multiboard.scss

.study__multiboard {
  .analyse__underboard & {
    @extend %box-neat;

    background: $c-bg-box;
  }

  &.loading {
    opacity: 0.7;
  }

  &.nodata {
    padding: 2em;
  }

  &__top {
    @extend %flex-between;

    gap: 0.4em;
    padding: 0.4em 1em 1em 0.4em;
  }

  &__options {
    @extend %flex-center;

    gap: 1em;

    .cmn-toggle-wrap {
      font-size: 0.9em;
      gap: 0;
    }

    .cmn-toggle {
      transform: scale(0.7);
    }
  }

  &__pager {
    @extend %flex-center;

    .page {
      margin: 0 0.4em;
    }

    select {
      &.study__multiboard__pager__max-per-page {
        @media (max-width: at-most($small)) {
          display: none;
        }
      }

      max-width: 25vw;
      margin-inline-end: 1ch;
    }
  }

  .fbt {
    @extend %box-radius;

    padding: 0.6em 1em;
  }

  .playing,
  .eval,
  .results {
    cursor: pointer;
  }

  .playing input,
  .eval input,
  .results input {
    vertical-align: middle;
    margin-inline-end: 3px;
  }

  .now-playing {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100% / 2, max(210px, 100% / 6)), 1fr));

    a {
      @extend %box-radius;

      container-type: inline-size;
      color: $c-font;
      padding: 0.4em 0.3em;
      border: 1px solid transparent;
      overflow: hidden;

      &.active {
        background: $m-primary_bg--mix-20;
        color: $c-font-clear;
        border-color: $m-primary_bg--mix-40;
      }

      &:hover {
        background: $m-primary_bg--mix-12;
        color: $c-font-clear;
        border-color: $m-primary_bg--mix-50;
      }
    }

    cg-board {
      box-shadow: none;
    }
  }
}

@container (width < 250px) {
  .now-playing .rating {
    display: none;
  }
}

.mini-game__gauge {
  --c-eval-mini-gauge-white: #c0c0c0;
  --c-eval-mini-gauge-black: #444;

  @include if-light {
    --c-eval-mini-gauge-white: #fff;
    --c-eval-mini-gauge-black: #606060;
  }
}

.mini-game {
  .cg-gauge {
    display: flex;
    flex-flow: row nowrap;
  }

  &__board {
    flex: 1 1 auto;
  }

  &__gauge {
    @extend %box-radius;

    order: 1;
    position: relative;
    flex: 0 0 4%;
    max-width: 1.5em;
    overflow: hidden;
    opacity: 0.4;
    margin-left: 4px;
    background: linear-gradient(to top, var(--c-eval-mini-gauge-white), var(--c-eval-mini-gauge-black));

    &::after {
      content: '';
      display: block;
      position: absolute;
      inset: 0;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset;
    }

    &__black {
      display: none;
      width: 100%;
      height: 50%;
      background: var(--c-eval-mini-gauge-black);
    }

    &--flip {
      background: linear-gradient(to bottom, var(--c-eval-mini-gauge-white), var(--c-eval-mini-gauge-black));

      .mini-game__gauge__black {
        position: absolute;
        bottom: 0;
      }
    }

    &--set {
      opacity: 1;
      background: var(--c-eval-mini-gauge-white);

      .mini-game__gauge__black {
        display: block;
      }

      tick {
        position: absolute;
        width: 100%;
        top: 2.5px;
        opacity: 1;
        border-bottom: 5px solid $m-accent--fade-50;
        height: 50%;
      }
    }
  }
}

.empty-boards-note {
  padding: 1em;
  color: $c-font-dim;
}