// 汎用的スタイル

*
  // iOS 13.6.1 で効かなくなっている
  touch-action: manipulation

//////// Vue

// [v-cloak]
//   display: none

//////// Chromeでdatalistを利用するとhoverで表示される三角を非表示にする方法

input::-webkit-calendar-picker-indicator
  display: none

//////// スクロールするとヘッダーの上の白が見えてダサいためヘッダーと同じ色を html に適用する
//
// html
//   background-color: $primary
// body
//   background-color: $white
//
// ↑これを設定すると弊害がでる。スタイルエディタで背景が白くなってしまう

//////// Chrome の input(type="search") で出現する × を消す

::-webkit-search-cancel-button
  -webkit-appearance: none

//////// ブラウザの方で定義しとけ

details
  summary
    margin: 0.5rem 0
    cursor: pointer
    font-size: $size-small
    color: $grey

//////// 固定フォント

pre
  @extend .is-family-monospace

  &.pre-wrap
    white-space: pre-wrap         // 折り返す
    word-break: break-all         // 1行のCSAを意地でも折り返す
    overflow-x: visible           // b-tooltip が消えないようにするため

  a.clipboard_copy
    position: relative
    top: -12px
    right: -17px

//////// エラーメッセージ内のPRE相当

.error_message_pre
  @extend .is-family-monospace
  white-space: pre-wrap
  line-height: 110%

.error_message_pre_with_margin
  @extend .error_message_pre
  margin-top: 1rem

//////// 行折り返し

.is_line_break_off
  @extend %is_line_break_off

.is_line_break_on
  @extend %is_line_break_on

//////// 単語折り返し

.is_word_break_on
  @extend %is_word_break_on

.is_word_break_off
  @extend %is_word_break_off

////////// aタグを装飾しない

.is_decoration_off
  +is_decoration_off

////////// flex の隙間

.gap_small
  gap: 0.25rem ! important
.gap_middle
  gap: 0.5rem ! important
.gap_large
  gap: 0.75rem ! important

////////// aタグを青くしないけどホバーのときは青くする

.is_hover_only_link_color
  color: inherit
  &:hover
    color: $link

// //////// 主に modal-card-foot のボタンを均等配置にするため
//
// .modal-card-foot
//   &.space_between
//     justify-content: space-between

////////// 横スクロール

.is_scroll_x
  +is_scroll_x

.is_scroll_y
  +is_scroll_y

// .buttons の中身を折り返さないようにして横スクロールUIにする
.is_buttons_scroll
  flex-wrap: nowrap
  @extend .is_scroll_x

////////// スクロールバー非表示

.is_scrollbar_invisible
  -webkit-overflow-scrolling: touch // モバイルでスムーズスクロールを有効化
  scrollbar-width: none             // Firefoxでスクロールバーを非表示にする
  &::-webkit-scrollbar
    display: none                   // Webkit系でスクロールバーを非表示にする

////////// truncate

.is_truncate
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

////////// ox

.table
  .ox_sequense
    font-family: monospace
    +mobile
      height: -webkit-fill-available
      vertical-align: middle
      font-size: 0.5rem

.is_truncate1
  display: block
  white-space: nowrap
  text-overflow: ellipsis
  overflow: hidden
  // display: -webkit-box
  // -webkit-box-orient: vertical
  // -webkit-line-clamp: 1
  // overflow: hidden

.is_truncate2
  display: -webkit-box
  -webkit-box-orient: vertical
  -webkit-line-clamp: 2
  overflow: hidden

// .is_color_unset
//   color: unset
//   &:hover
//     color: $link

// TD専用のテキストtruncate
.td_only_truncate
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  max-width: 0

//////////////////////////////////////////////////////////////////////////////// xemoji

// 共通化
.xemoji
  height: 1em                 // 0.7 で丁度テキストの中央にくる←うそ
  width: 1em
  vertical-align: text-bottom
  // line-height: 1.0

// b-button のなかにある xemoji がある場合
.xemoji_in_b_button
  span
    height: 100%
    .xemoji
      height: 1.6em
      width: unset

// スマホで下の方を押すと何かが出てきて1回で押せないのが不便なのである程度無駄にスクロールできるようにする
// .footer や .MainSection に指定する
.when_mobile_footer_scroll_problem_workaround
  +mobile
    padding-bottom: calc(100vh / 3) ! important

// 指差す手
.is_hand
  margin-left: 0.5rem
  display: inline
  font-weight: bold
  color: $primary

// スクロールしすぎるとリロードしてしまうのを禁止する
// https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior
//
// https://ics.media/entry/221024/
// > ブラウザごとにoverscroll-behaviorプロパティを指定するルートの要素が異なります。
// > ChromeやEdgeなどChromium系のブラウザでは、body要素を指定して、SafariやFirefoxではhtml要素に指定することで動作します。
//
// y だけにしないとPCのブラウザで左フリックで戻れなくなる
//
html, body
  overscroll-behavior-y: none
