/*-------------------------------------------*/

/* CSS
/*-------------------------------------------*/
@use 'components/link-toolbar/styles/slider-item';

.vk_slider_item {
	display: flex;
	position: relative;
	width: 100%;

	// 互換性対応ここから 1.27.6以前
	@for $i from 0 through 10 {
		&.has-background-dim-#{ $i }::before {
			opacity: $i * 0.1;
		}
	}

	&.has-background-dim:not(.wp-block-cover__background)::before {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 1;
		content: "";
		background-color: inherit;
	}

	&.has-background {
		.vk_slider_item-background-area:not([class*=-background-color]) {
			z-index: 0;
		}
	}
	// 互換性対応ここまで

	.has-background-dim:not(.wp-block-cover__background)::before {
		z-index: 1;
		content: "";
	}

	// 背景色が選択されていない時は白
	.vk_slider_item-background-area:not([class*=-background-color]) {
		background-color: #ffffff;
	}

	.vk_slider_item-background-area,
	.has-background-dim:not(.wp-block-cover__background)::before {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 1;
		content: "";
	}

	@for $i from 0 through 10 {
		.has-background-dim-#{ $i } {
			opacity: $i * 0.1;
		}
	}
}

.vk_slider_item-align-vertical- {

	&top {
		justify-content: flex-start;
	}

	&center {
		justify-content: center;
	}

	&bottom {
		justify-content: flex-end;
	}
}


/*-------------------------------------------*/

/* CSS
/*-------------------------------------------*/
$media-sm-up: 576px;
$media-md-up: 768px;
$media-lg-up: 992px;
$media-xl-up: 1200px;
$media-xxl-up: 1400px;
$media-sm-down: 575.98px;
$media-md-down: 767.98px;
$media-lg-down: 991.98px;
$media-xl-down: 1199.98px;
$media-xxl-down: 1399.98px;

.vk_slider_item {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}
.vk_slider_item_container {
	min-height: 24px;
	width: 100%;
	z-index: 1;
	position: relative;
	margin-left:auto;
	margin-right:auto;
	// コアが :root :where(.is-layout-constrained) > * { margin-block-start: var(--wp--custom--spacing--small); } とか付けてくるため打ち消し
	margin-block-start: 0;
}
// :where を無しにすると、テーマが指定する .container の指定より強くなって上書きしてしまうため、:where を指定
:where(.vk_slider_item_container):where(.container) {
	max-width:var(--wp--style--global--content-size);
}

.vk_slider_item-width-full {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
// Fit to content area width
.vk_slider_item-width-full.vk_slider_item-paddingLR-none {
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}
$padding-none: 1.5em;
$padding-sm: 2em;
$padding-md: 2.5em;
$padding-lg: 3em;
$padding-xl: 3.5em;
$padding-xxl: 4em;

.vk_slider_item-paddingLR-use {
	padding-left: $padding-none;
	padding-right: $padding-none;

	@media (min-width: $media-sm-up) {
		padding-left: $padding-sm;
		padding-right: $padding-sm;
	}

	@media (min-width: $media-md-up) {
		padding-left: $padding-md;
		padding-right: $padding-md;
	}

	@media (min-width: $media-lg-up) {
		padding-left: $padding-lg;
		padding-right: $padding-lg;
	}

	@media (min-width: $media-xl-up) {
		padding-left: $padding-xl;
		padding-right: $padding-xl;
	}

	@media (min-width: $media-xxl-up) {
		padding-left: $padding-xxl;
		padding-right: $padding-xxl;
	}
}

.vk_slider_item-paddingLR-zero {
	padding-left: 0;
	padding-right: 0;
}
// .editor-block-list__block-edit{
//   margin: 0!important;
// }
$color-danger: #b52727;