@use '../global/common' as global;

/* ------------------------------
 グリッドシステム（非推奨）
------------------------------- */
// ---------------
// グリッドシステムの全体を囲むコンテナー
// ---------------

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

  @include global.clearfix;
}

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

//各acms-col-の左右の幅
[class*='acms-col-'] {
  min-height: 1px;
  padding-right: calc(global.$grid-space / 2); //各col-はpaddingを左右に着ける
  padding-left: calc(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);

//---------------
//小幅のグリッド
//---------------
@include global.media-breakpoint-up(sm) {
  // カラム
  @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);
}

//---------------
//中くらい幅のグリッド
//---------------
@include global.media-breakpoint-up(md) {
  @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以上）のグリッド
//---------------
@include global.media-breakpoint-up(lg) {
  @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以上）のグリッド
//---------------
@include global.media-breakpoint-up(xl) {
  @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);
}
