// 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

// device
=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-point-xl-namespace: 'xl-' !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 $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)
  +pie-clearfix

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

// カラムをサイズごとに作る
@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($values)
  $columns-gutter-width: 0 !default
  $temp-columns-count: 12 !default
  $temp-break-points: 'xs', 'sm', 'md', 'lg' !default
  $grid-columns-row-class-name: '.row' !default
  $offsets: false !default
  @for $i from 1 through length($values)
    @if gutter_width(nth($values, $i))
      $columns-gutter-width: nth($values, $i)
    @else if columns_count(nth($values, $i))
      $temp-columns-count: nth($values, $i)
    @else if break_point(nth($values, $i))
      $temp-break-points: nth($values, $i)
    @else if row_class_name(nth($values, $i))
      $grid-columns-row-class-name: nth($values, $i)
    @else if offsets(nth($values, $i))
      $offsets: nth($values, $i)
  #{$grid-columns-row-class-name}
    // カラムのマージン分だけ両サイドにネガティブマージンを取る
    +margin(horizontal, ($columns-gutter-width / 2) * -1)
    +pie-clearfix
    // カラムをサイズごとに作る
    $break-points: ()
    @each $temp-break-point in $temp-break-points
      $break-points: append($break-points, if($temp-break-point == 'xs', $break-point-xs-namespace, null))
      $break-points: append($break-points, if($temp-break-point == 'sm', $break-point-sm-namespace, null))
      $break-points: append($break-points, if($temp-break-point == 'md', $break-point-md-namespace, null))
      $break-points: append($break-points, if($temp-break-point == 'lg', $break-point-lg-namespace, null))
      $break-points: append($break-points, if($temp-break-point == 'xl', $break-point-xl-namespace, null))
    content: $temp-columns-count
    @each $break-point in $break-points
      +break-points($break-point)
        @for $i from 1 through $temp-columns-count
          #{$column-namespace}#{$break-point}#{$i}
            +column($i, $columns-gutter-width)
          @if $offsets
            #{$column-namespace}#{$break-point}#{$column-offset-namespace}#{$i}
              +column-offset($i)