/*
 * Original Editor Parts - Quote Box
 * Version 1.1.0
 *
 * カラープリセット
 *   Blue   : #315fa8
 *   Orange : #d97706
 *
 * 色を変更したい場合は、下記2つの値だけ変更すればOKです。
 */
:root {
	--oep-quote-blue: #315fa8;
	--oep-quote-orange: #d97706;
}

/*
 * 共通デザイン
 * 旧バージョンの is-style-oep-quote-box も互換用に残しています。
 */
.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) {
	width: auto;
	max-width: 100%;
	margin-block: 24px;
	padding: 18px 20px;
	box-sizing: border-box;
	background: #f7f7f7;
	border: 0;
	border-inline-start: 4px solid var(--oep-accent);
	border-radius: 4px;
	font-size: calc(1em - 1px);
	line-height: 1.8;
	overflow-wrap: anywhere;
	word-break: normal;
}

/* 旧プリセット：既存記事は従来通りLightningのキーカラーを利用 */
.wp-block-group.is-style-oep-quote-box {
	--oep-accent: var(--vk-color-primary, var(--wp--preset--color--primary, #315fa8));
}

/* カラープリセット1：ブルー */
.wp-block-group.is-style-oep-quote-box-blue {
	--oep-accent: var(--oep-quote-blue);
}

/* カラープリセット2：オレンジ */
.wp-block-group.is-style-oep-quote-box-orange {
	--oep-accent: var(--oep-quote-orange);
}

.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) > * {
	min-width: 0;
	max-width: 100%;
}

.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) > :first-child {
	margin-top: 0;
}

.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) > :last-child {
	margin-bottom: 0;
}

.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) .oep-quote-box__title {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1em;
	line-height: 1.6;
}

.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) .oep-quote-box__source {
	margin-top: 14px;
	font-size: 0.92em;
	line-height: 1.7;
}

.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) p,
.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) li,
.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) a {
	overflow-wrap: anywhere;
}

.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) ul,
.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) ol {
	padding-inline-start: 1.5em;
}

.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) img,
.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) video,
.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) iframe,
.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) table {
	max-width: 100%;
}

.wp-block-group:is(
	.is-style-oep-quote-box,
	.is-style-oep-quote-box-blue,
	.is-style-oep-quote-box-orange
) pre {
	max-width: 100%;
	overflow-x: auto;
}

@media (max-width: 767px) {
	.wp-block-group:is(
		.is-style-oep-quote-box,
		.is-style-oep-quote-box-blue,
		.is-style-oep-quote-box-orange
	) {
		margin-block: 24px;
		padding: 16px;
	}
}