// styleResources で定義したいもの

=setvar($key, $val)
  --#{$key}: #{$val}

=padding_lr($v)
  padding-left: $v
  padding-right: $v

=padding_tb($v)
  padding-top: $v
  padding-bottom: $v

=margin_lr($v)
  margin-left: $v
  margin-right: $v

%is_line_break_off
  white-space: nowrap

%is_line_break_on
  white-space: normal
  word-break: break-all

%is_word_break_on
  word-break: break-all

%is_word_break_off
  word-break: break-word

=is_decoration_off
  color: inherit
  text-decoration: inherit

=is_scroll_x
  overflow-x: auto
  overscroll-behavior-x: none

=is_scroll_y
  overflow-y: auto
  overscroll-behavior-y: none

=icon_rorate_if_button_hover($button_class)
  transition: transform 0.5s 0.3s ease-in-out
  @at-root .#{$button_class}:hover
    .left_icon
      transform: rotate(360deg * 2 * -1)

// .buttons で横マージンが入るのはいいけど下マージンは余計
=bulma_buttons_button_bottom_marginless
  .buttons
    .button
      margin-bottom: 0

//////////////////////////////////////////////////////////////////////////////// columns, column

// 縦方向の余白管理を無効化する
=bulma_columns_vertical_minus_margin_clear
  .columns
    margin-top: 0
    margin-bottom: 0
  .column
    padding-top: 0
    padding-bottom: 0

//////////////////////////////////////////////////////////////////////////////// modal

// コンテンツの内容で幅を決めるが大きくなりすぎるのを防ぐために「最大横幅」だけを指定する場合
=modal_max_width($max_width)
  +tablet
    .animation-content
      max-width: $max_width

// コンテンツの内容に関係なく明示指定
=modal_width($width)
  +tablet
    .modal-card, .modal-content
      width: $width

=modal_height($height)
  +tablet
    .modal-card, .modal-content
      height: $height

=modal_height_if_mobile($height)
  +mobile
    .modal-card, .modal-content
      height: $height

// コンテンツの内容で幅を決める
=modal_width_auto
  +tablet
    .modal-card, .modal-content
      __css_keep__: 0
