// Extra small screen / phone
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min: $screen-xs !default
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone: $screen-xs-min !default

// Small screen / tablet
$screen-sm-min: $screen-sm !default
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet: $screen-sm-min !default

// Medium screen / desktop
$screen-md-min: $screen-md !default
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop: $screen-md-min !default

// Large screen / wide desktop
$screen-lg-min: $screen-lg !default
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop: $screen-lg-min !default

// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1) !default
$screen-sm-max: ($screen-md-min - 1) !default
$screen-md-max: ($screen-lg-min - 1) !default

// devise
=screen-xs
  @media only screen and (max-width: $screen-xs)
    @content
=screen-sm
  @media only screen and (max-width: $screen-sm)
    @content
=screen-md
  @media only screen and (max-width: $screen-md)
    @content
=screen-lg
  @media only screen and (max-width: $screen-lg)
    @content


// カラムのラッパーのクラス名
$row-class-name: '.row' !default
// カラムのネームスペース ※classの".（カンマ）"もネームスペースの一部
$column-namespace: '.col-' !default
// オフセットカラムのネームスペース
$column-offset-namespace: 'offset-' !default
// ブレイクポイントごとのカラムのプレフィックスのネームスペース
$break-point-xs-namespace: 'xs-' !default
$break-point-sm-namespace: 'sm-' !default
$break-point-md-namespace: 'md-' !default
$break-point-lg-namespace: 'lg-' !default

// ブレイクポイントを配列にする
$break-points: $break-point-xs-namespace, $break-point-sm-namespace, $break-point-md-namespace, $break-point-lg-namespace

// デバイスごとの media query を作る
=break-points($break-point: $break-point-xs-namespace)
  @if $screen-xs and $break-point == $break-point-xs-namespace
    @content
  @else if $screen-sm and $break-point == $break-point-sm-namespace
    @media only screen and (min-width: $screen-xs)
      @content
  @else if $screen-md and $break-point == $break-point-md-namespace
    @media only screen and (min-width: $screen-sm)
      @content
  @else if $screen-lg and $break-point == $break-point-lg-namespace
    @media only screen and (min-width: $screen-md)
      @content
  @else if $screen-xl and $break-point == $break-point-xl-namespace
    @media only screen and (min-width: $screen-lg)
      @content

// カラムのラッパーの設定
#{$row-class-name}
  // カラムのマージン分だけ両サイドにネガティブマージンを取る
  +margin(horizontal, ($gutter-width / 2) * -1)
  // clearfix
  +rem('min-height', 1px)
  &:before,
  &:after
    display: table
    content: " "
  &:after
    clear: both

// カラムの基本設定
=column($number, $columns-gutter-width: $gutter-width)
  +rem('width', 100 / $columns-count * $number * 1%)
  +rem('min-height', 1px)
  +padding(horizontal, $columns-gutter-width / 2)
  float: left
  +box-sizing(border-box)

// カラムをサイズごとに作る
@each $break-point in $break-points
  +break-points(#{$break-point})
    @for $i from 1 through $columns-count
      #{$column-namespace}#{$break-point}#{$i}
        +column($i)

// オフセットカラムの基本設定
=column-offset($number)
  +rem('margin-left', 100 / $columns-count * $number * 1%)

// オフセットカラムをサイズごとに作る
@each $break-point in $break-points
  +break-points(#{$break-point})
    @for $i from 1 through $columns-count
      #{$column-namespace}#{$break-point}#{$column-offset-namespace}#{$i}
        +column-offset($i)

=grid-columns($columns-gutter-width: $gutter-width, $grid-columns-row-class-name: '.row')
  #{$grid-columns-row-class-name}
    // カラムのマージン分だけ両サイドにネガティブマージンを取る
    +margin(horizontal, ($columns-gutter-width / 2) * -1)
    // clearfix
    +rem('min-height', 1px)
    &:before,
    &:after
      display: table
      content: " "
    &:after
      clear: both
  // カラムをサイズごとに作る
  @each $break-point in $break-points
    +break-points(#{$break-point})
      @for $i from 1 through $columns-count
        #{$column-namespace}#{$break-point}#{$i}
          +column($i, $columns-gutter-width)

=grid-column-offsets($columns-gutter-width: $gutter-width, $grid-columns-row-class-name: '.row')
  #{$grid-columns-row-class-name}
    // カラムのマージン分だけ両サイドにネガティブマージンを取る
    +margin(horizontal, ($columns-gutter-width / 2) * -1)
    // clearfix
    +rem('min-height', 1px)
    &:before,
    &:after
      display: table
      content: " "
    &:after
      clear: both
  // オフセットカラムをサイズごとに作る
  @each $break-point in $break-points
    +break-points(#{$break-point})
      @for $i from 1 through $columns-count
        #{$column-namespace}#{$break-point}#{$column-offset-namespace}#{$i}
          +column-offset($i)