@use 'sass:math';
@use 'global/common' as global;

/* ------------------------------
 グリッドシステム
------------------------------- */
// コンテナー
.acms-container {
  max-width: global.$acms-container;
  padding-right: math.div(global.$grid-space, 2);
  padding-left: math.div(global.$grid-space, 2);
  margin-right: auto;
  margin-left: auto;

  @include global.box-sizing(border-box);
}

// ---------------
// グリッドシステムの全体を囲むコンテナー
// ---------------

.acms-grid,
.acms-grid-r {
  margin-right: math.div(global.$grid-space, -2);
  margin-left: math.div(global.$grid-space, -2);

  @include global.clearfix;
}

//.acms-grid-negativeは左右-10pxになって欲しくないときに使用する
.acms-grid-negative {
  margin-right: math.div(global.$mobile-grid-space, -2);
  margin-left: math.div(global.$mobile-grid-space, -2);
}

//各acms-col-の左右の幅
[class*='acms-col'] {
  min-height: 1px;
  padding-right: math.div(global.$grid-space, 2); //各col-はpaddingを左右に着ける
  padding-left: math.div(global.$grid-space, 2); //各col-はpaddingを左右に着ける
}

@media (min-width: global.$breakpoint-md-min) {
  .acms-grid,
  .acms-grid-r {
    margin-right: math.div(global.$grid-space, -2);
    margin-left: math.div(global.$grid-space, -2);
  }

  [class*='acms-col'] {
    padding-right: math.div(global.$grid-space, 2); //各col-はpadding左右に着ける
    padding-left: math.div(global.$grid-space, 2); //各col-はpadding左右に着ける
  }
}

[class*='acms-col'],
[class*='acms-col']::before,
[class*='acms-col']::after {
  @include global.box-sizing(border-box);
}

// ---------------
// 幅
// ---------------
// 1カラム
@include global.make-grid(acms-col, null, global.$acms-columns);

// ---------------
// pushとpull
// ---------------
[class*='acms-push'],
[class*='acms-pull'] {
  position: relative;
}

// ---------------
// push 左の位置
// ---------------
@include global.make-pushed-grid(acms-push, null, global.$acms-columns);

// ---------------
// pull 右の位置
// ---------------
@include global.make-pulled-grid(acms-pull, null, global.$acms-columns);

//---------------
//小幅のグリッド
//---------------
@media (min-width: global.$breakpoint-sm-min) {
  // カラム
  @include global.make-grid(acms-col, sm, global.$acms-columns);

  // ---------------
  // push 左の位置
  // ---------------
  [class*='acms-push-sm'] {
    position: relative;
    right: auto;
  }

  // pushしない
  .acms-push-sm-auto {
    left: auto;
  }

  @include global.make-pushed-grid(acms-push, sm, global.$acms-columns);

  // ---------------
  // pull 右の位置
  // ---------------
  [class*='acms-pull-sm'] {
    position: relative;
    left: auto;
  }

  // pullしない
  .acms-pull-sm-auto {
    right: auto;
  }

  @include global.make-pulled-grid(acms-pull, sm, global.$acms-columns);
}

//---------------
//中くらい幅のグリッド
//---------------
@media (min-width: global.$breakpoint-md-min) {
  @include global.make-grid(acms-col, md, global.$acms-columns);

  // ---------------
  // push 左の位置
  // ---------------
  [class*='acms-push-md'] {
    position: relative;
    right: auto;
  }

  // pushしない
  .acms-push-md-auto {
    left: auto;
  }

  @include global.make-pushed-grid(acms-push, md, global.$acms-columns);

  // ---------------
  // pull 右の位置
  // ---------------
  [class*='acms-pull-md'] {
    position: relative;
    left: auto;
  }

  // pullしない
  .acms-pull-md-auto {
    right: auto;
  }

  @include global.make-pulled-grid(acms-pull, md, global.$acms-columns);
}

//---------------
//デスクトップ幅（1024px以上）のグリッド
//---------------
@media (min-width: global.$breakpoint-lg-min) {
  @include global.make-grid(acms-col, lg, global.$acms-columns);

  // ---------------
  // push 左の位置
  // ---------------

  [class*='acms-push-lg'] {
    position: relative;
    right: auto;
  }

  // pushしない

  .acms-push-lg-auto {
    left: auto;
  }

  @include global.make-pushed-grid(acms-push, lg, global.$acms-columns);

  // ---------------
  // pull 右の位置
  // ---------------
  [class*='acms-pull-lg'] {
    position: relative;
    left: auto;
  }

  // pullしない
  .acms-pull-lg-auto {
    right: auto;
  }

  @include global.make-pulled-grid(acms-pull, lg, global.$acms-columns);
}

//---------------
//デスクトップ幅（1440px以上）のグリッド
//---------------
@media (min-width: global.$breakpoint-xl-min) {
  @include global.make-grid(acms-col, xl, global.$acms-columns);

  // ---------------
  // push 左の位置
  // ---------------
  [class*='acms-push-xl'] {
    position: relative;
    right: auto;
  }

  // pushしない
  .acms-push-xl-auto {
    left: auto;
  }

  @include global.make-pushed-grid(acms-push, xl, global.$acms-columns);

  // ---------------
  // pull 右の位置
  // ---------------
  [class*='acms-pull-xl'] {
    position: relative;
    left: auto;
  }

  // pullしない
  .acms-pull-xl-auto {
    right: auto;
  }

  @include global.make-pulled-grid(acms-pull, xl, global.$acms-columns);
}

// ---------------
// エントリー(.acms-entry)内グリッド
// ---------------

.acms-entry .acms-col-12 {
  clear: both;
}
