/* =========================================
   Responsive Spacer Size
========================================= */

.mytheme-responsive-spacer-size__note {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 1.6;
	color: #555;
}

/*
	公開画面

	PC:
	Gutenberg標準の height をそのまま使用

	768px〜991px:
	991px以下の高さが入力されていれば、その高さを使用
	空欄ならGutenberg標準のPC高さをそのまま使用

	767px以下:
	767px以下の高さが入力されていれば、その高さを使用
	空欄なら 991px以下の高さを使用
	991px以下も空欄ならGutenberg標準のPC高さをそのまま使用
*/

/* タブレットのみ：768px〜991px */
@media (min-width: 768px) and (max-width: 991px) {
	.wp-block-spacer.has-responsive-spacer-size[style*="--mytheme-spacer-size-tablet"] {
		height: var(--mytheme-spacer-size-tablet) !important;
	}
}

/* スマホ：767px以下 */
@media (max-width: 767px) {
	.wp-block-spacer.has-responsive-spacer-size[style*="--mytheme-spacer-size-sp"] {
		height: var(--mytheme-spacer-size-sp) !important;
	}

	.wp-block-spacer.has-responsive-spacer-size:not([style*="--mytheme-spacer-size-sp"])[style*="--mytheme-spacer-size-tablet"] {
		height: var(--mytheme-spacer-size-tablet) !important;
	}
}

/*
	編集画面
*/

/* タブレットのみ：768px〜991px */
@media (min-width: 768px) and (max-width: 991px) {
	.editor-styles-wrapper .has-responsive-spacer-size.wp-block-spacer[style*="--mytheme-spacer-size-tablet"],
	.editor-styles-wrapper .has-responsive-spacer-size[style*="--mytheme-spacer-size-tablet"] .wp-block-spacer {
		height: var(--mytheme-spacer-size-tablet) !important;
	}
}

/* スマホ：767px以下 */
@media (max-width: 767px) {
	.editor-styles-wrapper .has-responsive-spacer-size.wp-block-spacer[style*="--mytheme-spacer-size-sp"],
	.editor-styles-wrapper .has-responsive-spacer-size[style*="--mytheme-spacer-size-sp"] .wp-block-spacer {
		height: var(--mytheme-spacer-size-sp) !important;
	}

	.editor-styles-wrapper .has-responsive-spacer-size.wp-block-spacer:not([style*="--mytheme-spacer-size-sp"])[style*="--mytheme-spacer-size-tablet"],
	.editor-styles-wrapper .has-responsive-spacer-size:not([style*="--mytheme-spacer-size-sp"])[style*="--mytheme-spacer-size-tablet"] .wp-block-spacer {
		height: var(--mytheme-spacer-size-tablet) !important;
	}
}