/*
 * 旧ブロック「吹き出し」（snow-monkey-blocks/balloon）
 * SMB 26.0.3 dist/blocks/balloon/style-index.css と同じ規則。
 */
.smb-balloon {
	--smb-balloon--border-radius: var(--_global--border-radius);
	--smb-balloon--background-color: var(--_lightest-color-gray);
	--smb-balloon--border-color: var(--_lightest-color-gray);
	--smb-balloon--border-style: solid;
	--smb-balloon--border-width: 0px;
	--smb-balloon--color: inherit;
	--smb-balloon--avatar-border-color: var(--_lighter-color-gray);
	--smb-balloon--avatar-border-style: solid;
	--smb-balloon--avatar-border-width: 3px;
	--smb-balloon--gap: calc(var(--_margin-1) + var(--smb-balloon--border-width));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border-style: none;
}
.smb-balloon__person { margin: 0 0 var(--smb-balloon--gap) var(--smb-balloon--border-width); display: inline-flex; align-items: center; justify-content: center; }
.smb-balloon__person .smb-balloon__name { margin: 0 0 0 5px; }
.smb-balloon__figure {
	position: relative;
	flex: 0 0 auto;
	border-radius: 100%;
	height: 60px;
	width: 60px;
	overflow: hidden;
	box-sizing: initial;
	border: var(--smb-balloon--avatar-border-width) var(--smb-balloon--avatar-border-style) var(--smb-balloon--avatar-border-color);
}
.smb-balloon__figure img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 50%; }
.smb-balloon__name { --_font-size-level: -2; font-size: var(--_font-size); line-height: var(--_line-height); white-space: nowrap; }
.smb-balloon__body {
	position: relative;
	flex: 1 1 auto;
	border-radius: var(--smb-balloon--border-radius);
	background-color: var(--smb-balloon--background-color);
	border: var(--smb-balloon--border-width) var(--smb-balloon--border-style) var(--smb-balloon--border-color);
	color: var(--smb-balloon--color);
	overflow-wrap: break-word;
	padding: var(--_padding1);
}
.smb-balloon__body:after, .smb-balloon__body:before {
	content: ""; display: block; position: absolute; margin-left: 0; height: 0; width: 0; border-color: #0000; border-style: solid;
}
.smb-balloon__body:before {
	top: calc(-10px - var(--smb-balloon--border-width)*2);
	left: calc(25px + var(--smb-balloon--avatar-border-width)*2/2 - var(--smb-balloon--border-width)*2/2);
	border-bottom-color: var(--smb-balloon--border-color);
	border-width: 0 calc(5px + var(--smb-balloon--border-width)) calc((5px + var(--smb-balloon--border-width))*2);
}
.smb-balloon__body:after {
	top: -10px;
	left: calc(25px + var(--smb-balloon--avatar-border-width)*2/2);
	border-bottom-color: var(--smb-balloon--background-color);
	border-width: 0 5px 10px;
}
.smb-balloon--reverse { align-items: flex-end; }
.smb-balloon--reverse .smb-balloon__person { margin: 0 var(--smb-balloon--border-width) var(--smb-balloon--gap) 0; }
.smb-balloon--reverse .smb-balloon__person .smb-balloon__name { margin-right: 5px; order: -1; }
.smb-balloon--reverse .smb-balloon__body:after, .smb-balloon--reverse .smb-balloon__body:before { left: auto; }
.smb-balloon--reverse .smb-balloon__body:before { right: calc(25px + var(--smb-balloon--avatar-border-width)*2/2 - var(--smb-balloon--border-width)*2/2); }
.smb-balloon--reverse .smb-balloon__body:after { right: calc(25px + var(--smb-balloon--avatar-border-width)*2/2); }
:where(.smb-balloon__body.is-layout-constrained > *) { --wp--style--global--content-size: 100%; --wp--style--global--wide-size: 100%; }
.smb-balloon:where([style*=border-width]) { border: none; }
@media (min-width: 640px) {
	.smb-balloon { flex-direction: row; flex-wrap: nowrap; align-items: center; }
	.smb-balloon__person { margin: 0 var(--smb-balloon--gap) 0 0; flex-direction: column; }
	.smb-balloon__person .smb-balloon__name { margin: 5px 0 0; }
	.smb-balloon__body:after, .smb-balloon__body:before { border-color: #0000; }
	.smb-balloon__body:before {
		top: calc(50% - 5px - var(--smb-balloon--border-width));
		left: calc(-10px - var(--smb-balloon--border-width)*2);
		border-right-color: var(--smb-balloon--border-color);
		border-width: calc(5px + var(--smb-balloon--border-width)) calc((5px + var(--smb-balloon--border-width))*2) calc(5px + var(--smb-balloon--border-width)) 0;
	}
	.smb-balloon__body:after { top: calc(50% - 5px); left: -10px; border-right-color: var(--smb-balloon--background-color); border-width: 5px 10px 5px 0; }
	.smb-balloon--reverse { flex-direction: row-reverse; align-items: center; }
	.smb-balloon--reverse .smb-balloon__person { margin: 0 0 0 var(--smb-balloon--gap); }
	.smb-balloon--reverse .smb-balloon__person .smb-balloon__name { margin-right: 0; order: 0; }
	.smb-balloon--reverse .smb-balloon__body:after, .smb-balloon--reverse .smb-balloon__body:before { border-color: #0000; }
	.smb-balloon--reverse .smb-balloon__body:before {
		right: calc(-10px - var(--smb-balloon--border-width)*2);
		border-left-color: var(--smb-balloon--border-color);
		border-width: calc(5px + var(--smb-balloon--border-width)) 0 calc(5px + var(--smb-balloon--border-width)) calc((5px + var(--smb-balloon--border-width))*2);
	}
	.smb-balloon--reverse .smb-balloon__body:after { right: -10px; border-left-color: var(--smb-balloon--background-color); border-width: 5px 0 5px 10px; }
}