:root {
	--arkb-list-icon_color: var(--ark-color--main, #000);
}

// ----------------------------------------
// 画像ブロックのスタイル
// ----------------------------------------
.is-style-ark-media-shadow {

	img,
	video {
		box-shadow: var(--arkb-shadow);
	}

}

.is-style-ark-media-border {

	img,
	video {
		border: solid 1px var(--ark-color--border, rgba(200, 200, 200, .5));
	}

}

.is-style-ark-media-frame {
	width: fit-content;
	margin-right: auto;
	margin-left: auto;
	padding: 12px;
	background-color: #fff;
	box-shadow: var(--arkb-shadow);

	figcaption {
		margin-top: 8px;
		margin-bottom: -4px;
	}
}


// ----------------------------------------
// listブロックのスタイル
// ----------------------------------------
[class*="is-style-ark-list-"] {
	padding: var(--arkb-list-padding, 0) !important;

	&.has-background {
		--arkb-list-padding: 1.25em;
	}

	> li {
		position: relative;
		padding-left: var(--arkb-li-padding--left, 0);
		list-style: none !important;
	}

	::marker {
		color: var(--arkb-list-icon_color);
	}

	// > li > ul {
	// 	list-style: disc;
	// }

	// ul,
	// ol {
	// 	--ark-list-padding: 0 0 0 1.25em;
	// }
}

[class*="is-style-ark-list-icon"] {
	--arkb-li-padding--left: 1.75em;

	> li::before {
		position: absolute;
		top: 0;
		left: .25em;
		display: block;
		width: 1em;
		height: auto;
		background-color: var(--arkb-list-icon_color);
		mask: var(--arkb-list-icon_url, unset) no-repeat center center / contain;
		content: "\00a0"; // テキスト（半角スペース）を入れて、疑似要素高さをリスト内のテキストに合わせる。
	}
}

/* stylelint-disable function-url-quotes */

.is-style-ark-list-icon--dot {

	li::before {
		clip-path: circle(16% at 50%);
		mask: unset;
	}
}

.is-style-ark-list-icon--caret {
	--arkb-list-icon_url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M23.4,14.4L12.9,7C11.6,6,9.7,7,9.7,8.6v14.8c0,1.6,1.8,2.6,3.1,1.6l10.5-7.4C24.5,16.8,24.5,15.2,23.4,14.4z"/></svg>');
}

.is-style-ark-list-icon--check {
	--arkb-list-icon_color: #52cb4c;
	--arkb-list-icon_url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M11.2 20.56l-5.92-5.92c-0.16-0.16-0.4-0.16-0.56 0l-2.8 2.8c-0.16 0.16-0.16 0.4 0 0.56l9.040 9.040c0.16 0.16 0.4 0.16 0.56 0l18.64-18.64c0.16-0.16 0.16-0.4 0-0.56l-2.8-2.8c-0.16-0.16-0.4-0.16-0.56 0l-15.6 15.52z"></path></svg>');
}

.is-style-ark-list-icon--good,
.is-style-ark-list-icon--circle {
	--arkb-list-icon_color: #51b0e7;
	--arkb-list-icon_url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 30.4c-7.92 0-14.4-6.48-14.4-14.4s6.48-14.4 14.4-14.4 14.4 6.48 14.4 14.4-6.48 14.4-14.4 14.4zM16 5.2c-6 0-10.8 4.8-10.8 10.8s4.8 10.8 10.8 10.8 10.8-4.8 10.8-10.8-4.8-10.8-10.8-10.8z"></path></svg>');
}

.is-style-ark-list-icon--triangle {
	--arkb-list-icon_color: #e9d525;
	--arkb-list-icon_url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.9,26.5L17.6,3.6c-0.3-0.6-1-0.9-1.6-0.9c-0.7,0-1.3,0.4-1.6,0.9L1.1,26.5c-0.3,0.6-0.3,1.3,0,1.9c0.3,0.6,1,0.9,1.6,0.9 h26.5c0.7,0,1.3-0.4,1.6-0.9C31.2,27.8,31.2,27.1,30.9,26.5z M26.9,26.1H5.1L16,7.3L26.9,26.1z"/></svg>');
}

.is-style-ark-list-icon--bad,
.is-style-ark-list-icon--x {
	--arkb-list-icon_color: #ee6767;
	--arkb-list-icon_url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M28.88 5.68l-2.48-2.48c-0.16-0.16-0.4-0.16-0.56 0l-9.84 9.76-9.76-9.84c-0.16-0.16-0.4-0.16-0.56 0l-2.56 2.56c-0.16 0.16-0.16 0.4 0 0.56l9.84 9.76-9.84 9.76c-0.16 0.16-0.16 0.4 0 0.56l2.48 2.48c0.16 0.16 0.4 0.16 0.56 0l9.84-9.76 9.76 9.76c0.16 0.16 0.4 0.16 0.56 0l2.48-2.48c0.16-0.16 0.16-0.4 0-0.56l-9.76-9.76 9.84-9.76c0.16-0.16 0.16-0.4 0-0.56z"></path></svg>');
}

.is-style-ark-list-icon--question {
	--arkb-list-icon_color: #5759e7;
	--arkb-list-icon_url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="15.7" cy="27.8" r="2.8"/><path d="M20.6,16.2c1.3-0.8,2.3-1.8,3.2-3C24.6,12.1,25,10.6,25,9c0.1-2.1-0.8-4-2.4-5.4c-1.6-1.5-3.8-2.2-6.5-2.2 c-2.9,0-5.2,0.8-6.7,2.4C7.8,5.4,7.1,7.3,7,9.6l3.6,0c0.1-1.5,0.6-2.7,1.6-3.5c1-0.9,2.2-1.3,3.8-1.3c1.6,0,2.9,0.5,3.7,1.4 c0.9,0.7,1.3,1.9,1.3,3.2c0,1.1-0.3,2-0.8,2.8c-0.6,0.8-1.4,1.5-2.6,2.3c-1.4,0.8-2.5,1.8-3.2,2.8c-0.7,1-1,2.2-1,3.6v1.9h3.7v-1.4 c0-1.1,0.2-2,0.7-2.8C18.4,17.8,19.3,17.1,20.6,16.2z"/></svg>');
}

.is-style-ark-list-note {
	--arkb-li-padding--left: 1em;
	--arkb-list-icon_color: currentColor;

	&:not(.has-text-color) {
		opacity: .85;
	}

	> li::before {
		position: absolute;
		top: 0;
		left: 0;
		transform: scale(.8);
		content: "※";
	}
}

ol.is-style-ark-list-note {
	counter-reset: arkb-ct;
	--arkb-li-padding--left: 1.75em;

	> li::before {
		letter-spacing: 4px;
		content: "※" counter(arkb-ct);
		counter-increment: arkb-ct;
	}

	&[reversed] > li::before {
		counter-increment: arkb-ct -1;
	}
}


.is-style-ark-list-numbered {
	counter-reset: arkb-ct;
	--arkb-the-lh: 1.8;
	--arkb-li-padding--left: calc(1em * var(--arkb-the-lh) + .2em);

	> li {
		position: relative;
		line-height: var(--arkb-the-lh) !important;
		list-style: none !important;

		&::before {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			box-sizing: content-box;
			width: calc(1em * var(--arkb-the-lh)); // line-height に合わせる
			height: calc(1em * var(--arkb-the-lh)); // line-height に合わせる
			padding: 0;
			color: #fff;
			line-height: inherit;
			text-align: center;
			background-color: var(--arkb-list-icon_color);
			border-radius: 50%;
			transform: scale(.8);
			transform-origin: 0% 50%;
			content: counter(arkb-ct);
			counter-increment: arkb-ct;
		}
	}

	&[reversed] > li::before {
		counter-increment: arkb-ct -1;
	}

}