@import "../../../scss/mixin/media";

.ark-block-section {
	// セクションを入れ子にした時に、親セクションの影響を受けないようにする
	--arkb-padding: 4rem 0;
	--arkb-min-height: unset;
	--arkb-svg-height--top: 0;
	--arkb-svg-height--bottom: 0;

	// 普通のCSS
	position: relative;
	padding-top: var(--arkb-svg-height--top);
	padding-bottom: var(--arkb-svg-height--bottom);

	// fix #138
	overflow: hidden;
}

.ark-block-section__media {
	z-index: 0;
}

.ark-block-section__img,
.ark-block-section__video {
	object-position: center;
}

.ark-block-section__color {
	z-index: 1;
}

.ark-block-section__body {
	position: relative;
	z-index: 2;
	display: flex;
	width: 100%;

	:where(.alignfull):not([data-inner="full"]) > & {
		max-width: calc(var(--ark-width--article, 1000px) + var(--ark-padding--container, 0px) * 2);
		margin: 0 auto;
		padding-right: var(--ark-padding--container, 0px);
		padding-left: var(--ark-padding--container, 0px);
	}

	// [data-inner="full"] > & {
	// 	max-width: 100%;
	// }

	[data-height="full"] > & {
		height: var(--ark-height--full, 100vh);
	}

	[data-height="custom"] > & {
		min-height: var(--arkb-min-height);
	}

	&[data-content="top-left"] {
		align-items: flex-start;
		justify-content: flex-start;
	}

	&[data-content="top-center"] {
		align-items: flex-start;
		justify-content: center;
		text-align: center;
	}

	&[data-content="top-right"] {
		align-items: flex-start;
		justify-content: flex-end;
		text-align: right;
	}

	&[data-content="center-left"] {
		align-items: center;
		justify-content: flex-start;
	}

	&[data-content="center-center"] {
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	&[data-content="center-right"] {
		align-items: center;
		justify-content: flex-end;
		text-align: right;
	}

	&[data-content="bottom-left"] {
		align-items: flex-end;
		justify-content: flex-start;
	}

	&[data-content="bottom-center"] {
		align-items: flex-end;
		justify-content: center;
		text-align: center;
	}

	&[data-content="bottom-right"] {
		align-items: flex-end;
		justify-content: flex-end;
		text-align: right;
	}
}

.ark-block-section__bodyInner {
	width: 100%;
	padding: var(--arkb-padding);
}

// fill の詳細度をあげる
.ark-block-section .ark-block-section__svg {
	position: absolute;
	left: 0;
	z-index: 5;
	width: 100%;
	pointer-events: none;
	fill: var(--ark-color--bg, #fff);

	&.-top {
		top: -1px;
		height: var(--arkb-svg-height--top);
	}

	&.-bottom {
		bottom: -1px;
		height: var(--arkb-svg-height--bottom);
		transform: rotate(180deg);
	}
}