// 座標
//
// TDタグの前後で表記を入れている
//
// |--------+--------|
// | 指定   | 用途   |
// |--------+--------|
// | before | 横軸用 |
// | after  | 縦軸用 |
// |--------+--------|
//

.ShogiPlayer
  +defvar(sp_coordinate_x_size, 0.125)                // 座標表記の文字サイズ(上)
  +defvar(sp_coordinate_y_size, 0.168)                // 座標表記の文字サイズ(右)
  +defvar(sp_coordinate_x_push, 0.014)                // 座標表記の位置調整(上)
  +defvar(sp_coordinate_y_push, -0.009)               // 座標表記の位置調整(右)
  +defvar(sp_coordinate_color, hsla(0, 0%, 0%, 0.75)) // 座標表記の文字色

  &.is_coordinate_on
    .BoardMatrix
      // 共通のサイズ・色
      td:before, td:after
        line-height: 1.0    // フォントの上の隙間を取る
        color: var(--sp_coordinate_color)
        z-index: 0          // -1 だと盤の裏にいってしまう

      // 横軸表記の位置調整
      td:before
        font-size: calc(var(--sp_cell_h) * var(--sp_coordinate_x_size))
        display: flex

        // 方法(1) - 高さ1remの中央に合わせる = 拡縮の基点が中央になる
        // height: 1rem            // 1文字分の高さにした上で
        // align-items: center     // 中央に合わせると拡縮の基点が中央になる

        // 方法(2) - 下に合わせる = 拡縮の基点をベースラインにする = 拡縮してもベースラインが同じメリットあり
        align-items: flex-end

        width: 100%             // height: 100% は入れてはいけない(入れると重なって押せない要素が出てくる)
        justify-content: center // 左右中央に合わせる

        // 下から100%押して上外に飛び出す
        bottom: calc((1.0 + var(--sp_coordinate_x_push)) * 100%)

      // 縦軸表記の位置調整
      td:after
        // font-size と width の両方に指定することで次のようになる
        // ・文字の列は中央
        // ・大きくなるにつれて右に移動する
        $size: calc(var(--sp_cell_h) * var(--sp_coordinate_y_size))

        font-size: $size
        display: flex

        height: 100%                // width: 100% は入れてはいけない(入れると先後のマークが押せなくなる)
        align-items: center         // 上下中央に合わせる

        width: $size                // fやiがの文字が左寄りになるのを防ぐ(1remではだめ)
        justify-content: center     // 共通の幅の中で中央配置すれば f や i が中央に寄る

        // TDの左上基点を同じにする
        top: 0                      // これがないと1セル分に下に移動する

        // 左から100%押し出して右外に飛び出す
        left: calc((1.0 + var(--sp_coordinate_y_push)) * 100%)

      // 以降はそのままで良い

      td
        position: relative
      td:before, td:after
        position: absolute

  &.is_layer_on
    &.is_coordinate_on
      td:before, td:after
        +is_layer_border
