@import "~bulma/sass/utilities/_all"

$sp_css_root: ":root" !default

// 重複するのでCSSは定義しないこと
$lifted_piece_element_z:    3
$overlay_for_disable_z:     2
$overlay_navigation_item_z: 1
$flip_trigger_cell_z:       2
$piece_count_z:             1
$promote_select_modal_z:    30                  // b-navbar より上にする
$dev_tools_z:               9999                // bulma の navbar に負けるためこのくらいでかくする(100以上)
$shortcut_viewer_z:         $piece_count_z + 1  // $piece_count_z より上にする

// vertical の定義は +mobile のときにも適用する
//
// 冗長な書き方
//
//   +IF_VERTICAL
//     .NavigateBlock
//       margin: 0
//   &.is_layout_vertical
//     +is_vertical_style
//   +mobile
//     &.is_mobile_vertical_on
//       +is_vertical_style
//
// 置き換え後
//
//   +IF_VERTICAL
//     .NavigateBlock
//       margin: 0
//
// 書き方
//
//   .ShogiPlayer
//     +IF_HORIZONTAL
//       ...
//     +IF_VERTICAL
//       ...
//
// 注意点
// ・必ず .ShogiPlayer の直下で +IF_HORIZONTAL とのペアで定義すること
=IF_HORIZONTAL
  &.is_layout_horizontal
    @content
=IF_VERTICAL
  &.is_layout_vertical
    @content
  &.is_mobile_vertical_on
    +mobile
      @content

// is_layer_on のとき用
=is_layer_border($color: $primary, $pixel: 1)
  border: $pixel * 1px dashed change_color($color, $alpha: 0.5)

// 駒数の背景色とテキスト色を適用
%is_piece_count_color_set
  background-color: var(--sp_piece_count_bg_color)
  color:            var(--sp_piece_count_font_color)

// 領域を画像で埋める
// cover は、画像の全体を表示するのではなく、領域を埋めることを優先する
=is_background_cover_by_image
  background-position: center
  background-repeat: no-repeat
  background-size: cover

=is_flip
  // 本当は scale を使いたいが古いブラウザを使い続けている人が多いため transform に戻す
  // scale: -1
  transform: rotate(180deg)

// is_layer_on 用
=sp_xray_color($level)
  $color: hsla((240 + 360 / 15) * $level, 50%, 50%, 0.4)
  background-color: $color
  border: 1px solid darken($color, 50%)

// dart-sass は気が遠くなるほど遅い
// それと空定義に警告がでまくる
// defvar はもともと dart-sass で「--xxx: 1 // コメント」の値が「1 // コメント」になる災いために作った
// node-sass の場合は「--xxx: 1 // コメント」としても「// コメント」を除去してくれるので必要ない
// けどあとあと変更が楽なのと1行で書けるのは便利なので使う
//
// $sp_css_root のデフォルトは :root だけど Web Components のときは :host になるようにする
// @debug $sp_css_root
=defvar($key, $val)
  @at-root
    #{$sp_css_root}
      --#{$key}: #{$val}

// pug:
//
//   .Foo
//     .FooTexture
//
// sass:
//
//   .Foo
//     +is_overlay_origin  // ← 親に relative が必要なので忘れるな。bulma の is-relative でもいい。
//     .FooTexture
//       +is_overlay_block
//
=is_overlay_origin
  position: relative
=is_overlay_block
  @extend %overlay

// bulma の次の並びのときの中にある .button の角丸めが解除されない不具合対策
//
// .buttons.are-small
//   .button
//   .button
//   .button
//   .button
//
=workaround_buttons_connect
  .button:not(:last-child)  // [A B C] D の右側の角丸め解除
    border-bottom-right-radius: 0 ! important
    border-top-right-radius: 0 ! important
  .button:not(:first-child) // A [B C D] の左側の角丸め解除
    border-bottom-left-radius: 0 ! important
    border-top-left-radius: 0 ! important