@use "sass:math";

.ShogiPlayer {
  // 色数。これ以上の色が必要なら利用者定義してもらう
  $SS_MARK_COLOR_COUNT: 12;

  // 基本色。あまり派手にしないこと
  $color_base: hsla(0, 35%, 50%, 0.9);

  // スプリットコンプリメンタリー (180 ± 30) を意識している → やめ
  // $hue_step: math.div(360, $SS_MARK_COLOR_COUNT) + math.div(360, 3)
  $hue_step: math.div(360, $SS_MARK_COLOR_COUNT); //  + math.div(360, 3);

  // ユーザーが上書きで定義するかもしれないので浅く定義する
  @for $i from 0 through $SS_MARK_COLOR_COUNT - 1 {
    $color: adjust-hue($color_base, $i * $hue_step);
    $lightness: lightness($color);

    // 円とラベルを個別にユニークにするのはではなく階層的にして上だけをユニークにしたくなるがそれぞれ独立しているためそれは間違い
    .think_mark_circle_color#{$i} {
      // 円の色
      border-color: $color;

      // 円の縁取り色
      // 円の輝度に順応
      $rate: 30%;
      $edge_color: if($lightness > 50%, lighten($color, $rate), darken($color, $rate));
      box-shadow: 0 0 0 1px $edge_color, inset 0 0 0 1px $edge_color;
    }

    .think_mark_user_name_color#{$i} {
      // 名前の背景
      $rate: 25%;
      background-color: if($lightness > 50%, lighten($color, $rate), darken($color, $rate));

      // 名前の色
      // 背景の輝度の逆
      $rate: 100%;
      color: if($lightness > 50%, darken($color, $rate), lighten($color, $rate));

      // // 名前の背景
      // background-color: hsla(0, 0%, 10%, 0.8);
      // // text-shadow: 0px 0px 2px hsla(0, 0%, 0%, 1.0);
      // // -webkit-text-stroke: 0.5px black;
      // color: hsla(0, 0%, 100%, 1.0);
    }
  }
}