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

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