/**
 * 段落・グループ・リスト・文字の装飾.
 * 編集画面の「スタイル」と、文字選択時の書式から使う.
 */

.is-style-ax-stripe,
.is-style-ax-grid,
.is-style-ax-fold,
.is-style-ax-stitch,
.is-style-ax-brackets,
.is-style-ax-brackets-lg,
.is-style-ax-inset,
.is-style-ax-outset,
.is-style-ax-left-bar,
.is-style-ax-sticky,
.is-style-ax-bubble,
.is-style-ax-bubble-2,
[class*="is-style-ax-icon-"] {
	border-radius: 8px;
	padding: 1em 1.15em;
}

.is-style-ax-stripe {
	border: 1px solid var(--line, #e4e2dc);
	background: repeating-linear-gradient(-45deg, #fff, #fff 8px, #f3f5f7 8px, #f3f5f7 16px);
}

.is-style-ax-grid {
	border: 1px solid var(--line, #e4e2dc);
	background-color: #fff;
	background-image:
		linear-gradient(#e4e2dc 1px, transparent 1px),
		linear-gradient(90deg, #e4e2dc 1px, transparent 1px);
	background-size: 16px 16px;
}

.is-style-ax-fold {
	position: relative;
	border: 1px solid var(--line, #e4e2dc);
	background: #fff;
	padding-right: 1.6em;
}

.is-style-ax-fold::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	border-style: solid;
	border-width: 0 18px 18px 0;
	border-color: #e7e2d8 #f7f7f5;
}

.is-style-ax-stitch {
	background: #fff;
	border: 2px dashed #24445c;
	box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px #d5dee4;
}

.is-style-ax-brackets,
.is-style-ax-brackets-lg {
	background-color: transparent;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(#24445c, #24445c),
		linear-gradient(#24445c, #24445c),
		linear-gradient(#24445c, #24445c),
		linear-gradient(#24445c, #24445c),
		linear-gradient(#24445c, #24445c),
		linear-gradient(#24445c, #24445c),
		linear-gradient(#24445c, #24445c),
		linear-gradient(#24445c, #24445c);
	background-position:
		left top, left top,
		right top, right top,
		left bottom, left bottom,
		right bottom, right bottom;
}

.is-style-ax-brackets {
	background-size:
		14px 2px, 2px 14px,
		14px 2px, 2px 14px,
		14px 2px, 2px 14px,
		14px 2px, 2px 14px;
}

.is-style-ax-brackets-lg {
	padding: 1.35em 1.5em;
	background-size:
		26px 3px, 3px 26px,
		26px 3px, 3px 26px,
		26px 3px, 3px 26px,
		26px 3px, 3px 26px;
}

.is-style-ax-inset {
	background: #f3f1ec;
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.12);
}

.is-style-ax-outset {
	background: #fff;
	box-shadow: 0 8px 18px rgba(36, 68, 92, 0.12);
}

.is-style-ax-left-bar {
	background: #f4f7f8;
	border-left: 4px solid #24445c;
	border-radius: 0 8px 8px 0;
}

.is-style-ax-sticky {
	background: linear-gradient(#f3d48a, #f3d48a) center top / 42px 8px no-repeat, #fff6d8;
	box-shadow: 2px 3px 0 rgba(122, 82, 0, 0.12);
	padding-top: 1.25em;
}

.is-style-ax-bubble,
.is-style-ax-bubble-2 {
	position: relative;
	background: #fff;
	border: 1px solid #d5dee4;
}

.is-style-ax-bubble {
	border-radius: 12px;
	margin-bottom: 14px;
}

.is-style-ax-bubble::after {
	content: "";
	position: absolute;
	left: 22px;
	bottom: -8px;
	width: 14px;
	height: 14px;
	background: #fff;
	border-right: 1px solid #d5dee4;
	border-bottom: 1px solid #d5dee4;
	transform: rotate(45deg);
}

.is-style-ax-bubble-2 {
	border-radius: 18px;
	margin-right: 16px;
}

.is-style-ax-bubble-2::after {
	content: "";
	position: absolute;
	right: -8px;
	top: 18px;
	width: 14px;
	height: 14px;
	background: #fff;
	border-top: 1px solid #d5dee4;
	border-right: 1px solid #d5dee4;
	transform: rotate(45deg);
}

[class*="is-style-ax-icon-"] {
	position: relative;
}

.is-style-ax-icon-good,
.is-style-ax-icon-bad,
.is-style-ax-icon-info,
.is-style-ax-icon-announce,
.is-style-ax-icon-pencil,
.is-style-ax-icon-book {
	padding-left: 3.15em;
	background-color: #f7f8f8;
	border: 1px solid var(--line, #e4e2dc);
}

.is-style-ax-icon-good::before,
.is-style-ax-icon-bad::before,
.is-style-ax-icon-info::before,
.is-style-ax-icon-announce::before,
.is-style-ax-icon-pencil::before,
.is-style-ax-icon-book::before,
.is-style-ax-icon-idea::before,
.is-style-ax-icon-check::before,
.is-style-ax-icon-cross::before,
.is-style-ax-icon-help::before,
.is-style-ax-icon-alert::before,
.is-style-ax-icon-memo::before {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
}

.is-style-ax-icon-good::before,
.is-style-ax-icon-bad::before,
.is-style-ax-icon-info::before,
.is-style-ax-icon-announce::before,
.is-style-ax-icon-pencil::before,
.is-style-ax-icon-book::before {
	left: 0.75em;
	top: 0.85em;
	width: 1.65em;
	height: 1.65em;
	border-radius: 4px;
	background-color: #24445c;
	background-size: 1.05em;
}

.is-style-ax-icon-idea,
.is-style-ax-icon-check,
.is-style-ax-icon-cross,
.is-style-ax-icon-help,
.is-style-ax-icon-alert,
.is-style-ax-icon-memo {
	padding: 1em 1.15em 1em 4.3em;
	min-height: 3.4em;
}

.is-style-ax-icon-idea::before,
.is-style-ax-icon-check::before,
.is-style-ax-icon-cross::before,
.is-style-ax-icon-help::before,
.is-style-ax-icon-alert::before,
.is-style-ax-icon-memo::before {
	left: 0.8em;
	top: 0.8em;
	width: 2.5em;
	height: 2.5em;
	border-radius: 50%;
	background-size: 1.35em;
}

.is-style-ax-icon-good { --ax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E"); }
.is-style-ax-icon-bad { --ax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E"); }
.is-style-ax-icon-info { --ax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 11.2V17M12 8h.01'/%3E%3C/svg%3E"); }
.is-style-ax-icon-announce { --ax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10v4h3l6 3.5V6.5L8 10H5'/%3E%3Cpath d='M16.5 9.5a3 3 0 0 1 0 5'/%3E%3C/svg%3E"); }
.is-style-ax-icon-pencil { --ax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 6l4 4M4 20l1-4L15 6l3 3L8 19l-4 1z'/%3E%3C/svg%3E"); }
.is-style-ax-icon-book { --ax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5h5.5A2.5 2.5 0 0 1 14 7.5V19H8.5A2.5 2.5 0 0 0 6 21.5V5z'/%3E%3Cpath d='M14 7.5A2.5 2.5 0 0 1 16.5 5H18v14h-4'/%3E%3C/svg%3E"); }
.is-style-ax-icon-idea { --ax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M8 14a4.5 4.5 0 1 1 8 2c-.8.8-1.2 1.4-1.3 2H9.3C9.2 17.4 8.8 16.8 8 16'/%3E%3C/svg%3E"); background: #fff8e8; }
.is-style-ax-icon-check { --ax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E"); background: #e7f3ec; }
.is-style-ax-icon-cross { --ax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E"); background: #f8ecec; }
.is-style-ax-icon-help { --ax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.2 2.4c-.7.3-1.2.8-1.2 1.6V14'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); background: #eaf0f3; }
.is-style-ax-icon-alert { --ax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 3.5 19h17L12 4z'/%3E%3Cpath d='M12 10v4M12 16.5h.01'/%3E%3C/svg%3E"); background: #fbf3e4; }
.is-style-ax-icon-memo { --ax-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h8l4 4v12H7z'/%3E%3Cpath d='M15 4v4h4M9 13h6M9 17h4'/%3E%3C/svg%3E"); background: #f4f4f2; }

.is-style-ax-icon-good::before,
.is-style-ax-icon-bad::before,
.is-style-ax-icon-info::before,
.is-style-ax-icon-announce::before,
.is-style-ax-icon-pencil::before,
.is-style-ax-icon-book::before,
.is-style-ax-icon-idea::before,
.is-style-ax-icon-check::before,
.is-style-ax-icon-cross::before,
.is-style-ax-icon-help::before,
.is-style-ax-icon-alert::before,
.is-style-ax-icon-memo::before {
	background-image: var(--ax-icon);
}

.is-style-ax-icon-idea::before { background-color: #c9a227; }
.is-style-ax-icon-check::before { background-color: #2f6f4e; }
.is-style-ax-icon-cross::before { background-color: #8f3d3d; }
.is-style-ax-icon-help::before { background-color: #24445c; }
.is-style-ax-icon-alert::before { background-color: #8a4f17; }
.is-style-ax-icon-memo::before { background-color: #5b5f63; }

.is-style-ax-list-check,
.is-style-ax-list-cross,
.is-style-ax-list-line {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.is-style-ax-list-check li,
.is-style-ax-list-cross li {
	position: relative;
	padding-left: 1.7em;
	margin: 0.35em 0;
}

.is-style-ax-list-check li::before,
.is-style-ax-list-cross li::before {
	content: "";
	position: absolute;
	left: 0.15em;
	top: 0.45em;
	width: 0.7em;
	height: 0.4em;
	border-left: 2px solid #24445c;
	border-bottom: 2px solid #24445c;
	transform: rotate(-45deg);
}

.is-style-ax-list-cross li::before {
	width: 0.75em;
	height: 0.75em;
	top: 0.35em;
	border: 0;
	background:
		linear-gradient(#8f3d3d, #8f3d3d) center / 100% 2px no-repeat,
		linear-gradient(#8f3d3d, #8f3d3d) center / 2px 100% no-repeat;
	transform: rotate(45deg);
}

.is-style-ax-list-line li {
	padding: 0.45em 0;
	border-bottom: 1px solid var(--line, #e4e2dc);
}

.ax-marker {
	padding: 0 0.12em;
	background-repeat: no-repeat;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.ax-marker-orange { background-image: linear-gradient(transparent 62%, #f3c9a0 62%); }
.ax-marker-yellow { background-image: linear-gradient(transparent 62%, #ffe58a 62%); }
.ax-marker-green { background-image: linear-gradient(transparent 62%, #b7e4c7 62%); }
.ax-marker-blue { background-image: linear-gradient(transparent 62%, #b9d6ea 62%); }

.ax-fz-xs { font-size: 0.75em; }
.ax-fz-sm { font-size: 0.875em; }
.ax-fz-lg { font-size: 1.25em; }
.ax-fz-xl { font-size: 1.5em; line-height: 1.5; }

.ax-note {
	font-size: 0.8em;
	color: var(--muted, #5b5f63);
}