@charset "utf-8";

/*
 * エディターのみで読み込むCSS
 */
@import "./mixin/**/*.scss";
@import "./common/**/*.scss";
@import "./editor/**/*.scss";

/* stylelint-disable scss/at-import-no-partial-leading-underscore */
@import "../gutenberg/**/_common.scss";
@import "../gutenberg/**/_editor.scss";

:where(.wp-block) svg:not([fill]),
:where(.arkb-styleBtn) svg:not([fill]) {
	fill: currentColor;
}


[class*="ark-keep-mt"] {

	> .wp-block {
		margin-bottom: 0;
	}

	> .wp-block:not(:first-child) {
		margin-top: var(--ark-mt--inner, 2rem);
	}

	> .lsSelectorPreview + .wp-block {
		margin-top: 0;
	}
}


// アラートメッセージ
.arkb-alert--doubleId {
	color: #fa1414;

	[data-type="arkhe-blocks/tab"] & {
		position: relative;
		top: -24px;
		font-weight: bold;
		font-size: 14px;
	}
}


// ブロックボタンにアイコンを付ける
/* stylelint-disable function-url-quotes */
.components-autocomplete__result[id*="arkhe-blocks"],
[class*="editor-block-list-item-arkhe-blocks-"] > .block-editor-block-types-list__item-icon {
	position: relative;
	--arkhe-icon-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><style>.st0{fill:black}</style><polygon class="st0" points="34.96,1.89 14.29,22.56 14.29,20.34 14.33,20.29 21.09,13.53 19.31,13.53 30.73,2.11 30.95,1.89"/><polygon class="st0" points="26.58,13.32 26.58,15.1 16.12,25.55 15.85,25.82 18.08,25.82 38,5.9 38,1.89"/><polygon class="st0" points="38,12.95 25.44,25.51 26.89,25.51 26.89,38.11 2,38.11 2,13.22 14.29,13.22 14.29,11.5 23.9,1.89 27.9,1.89 27.69,2.11 27.69,2.11 14.29,15.51 14.29,14.71 3.49,14.71 3.49,36.61 25.4,36.61 25.4,25.55 25.13,25.82 22.9,25.82 23.17,25.55 26.57,22.14 26.57,20.36 38,8.94"/><polygon class="st0" points="27.69,2.11 14.29,15.51 27.69,2.11"/><polygon class="st0" points="32.18,25.82 38,20 38,15.99 28.17,25.82 "/><polygon class="st0" points="38,25.82 38,23.04 35.22,25.82"/><polygon class="st0" points="20.86,1.89 20.64,2.11 14.29,8.46 14.29,4.46 16.85,1.89"/></svg>');

	&::after {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 14px;
		height: 14px;
		line-height: 1;
		background: var(--arkhe-icon-svg) no-repeat center / 80%;
		background-color: #fff;
		border-radius: 3px;
		box-shadow: 0 0 0 .5px #000;
		content: "";
	}
}

.components-autocomplete__result[id*="arkhe-blocks"] {

	&::after {
		top: 1px;
		scale: .8;
	}
}