@import "variables"

.shogi-player
  font-family: "YuMincho", "Yu Mincho", serif

  color: white
  margin: 0 auto
  text-align: center

  // 汎用の反転
  .white
    transform: rotate(180deg)

  // 将棋盤と駒台の反転
  .board_turn
    transform: rotate(0deg)
    transition: all 0.2s 0s ease-in-out
    &.enable
      @extend .white

  // 駒台と将棋盤のレイアウト
  .board_container
    display: flex
    /* すべてを中央よせ
    justify-content: center

    // △の駒台は左上
    .flex_item:nth-child(1)
      align-self: flex-start

    // 将棋盤は上下の中央
    .flex_item:nth-child(2)
      align-self: center

    // ▲の駒台は右下
    .flex_item:nth-child(3)
      align-self: flex-end

  // 将棋盤
  table
    margin: 0 auto
    padding: 0
    background: $line-color
    border-collapse: separate
    border-spacing: 1px
    border: 1px solid $line-color
    // box-shadow: 0 0 24vmin rgba($line-color, 0.5)
    td
      font-size: $font-size
      width: $cell-size
      height: $cell-size
      padding: 0
      color: $piece-color
      background: $board-bg-color
      text-align: center
      &.current
        color: $piece-color
        background: $current-bg-color
      &.origin_point
        background: $current-bg-before
      &.current
        transition: background 500ms 0s ease-out

  .board_wrap
    position: relative
    // border: 8px solid hsla(0, 50%, 50%, .5)
    .navi_surface
      position: absolute
      z-index: 1
      cursor: pointer
      width: 50%
      height: 100%
      &.previous
        left: 0
        // background: hsla(200, 50%, 50%, .5)
      &.next
        right: 0
        // background: hsla(160, 50%, 50%, .5)

  // コントローラー
  .controller
    button
      cursor: pointer
      width: 5vmin
      &.next
        width: 16vmin
      &.board_turn
        margin-left: 1vmin
        
  // スライダー
  input[type=range]
    cursor: pointer
    margin: auto
    width: 36vmin