/**
 * 100%積み上げ横棒グラフ - フロント & エディタ共通スタイル
 *
 * テーマ（SWELL / AFFINGER 等）の既存 CSS と衝突しないよう、
 * すべて .sbb-chart 配下にスコープし、必要な値は明示的に打ち消している。
 */

.sbb-chart {
	margin: 0 0 1.5em;
}

.sbb-chart * {
	box-sizing: border-box;
}

/* --- バー --- */

.sbb-chart__barwrap {
	width: 100%;
}

.sbb-chart.is-justify-left .sbb-chart__barwrap {
	margin-right: auto;
	margin-left: 0;
}

.sbb-chart.is-justify-center .sbb-chart__barwrap {
	margin-right: auto;
	margin-left: auto;
}

.sbb-chart.is-justify-right .sbb-chart__barwrap {
	margin-right: 0;
	margin-left: auto;
}

.sbb-chart__bar {
	display: flex;
	width: 100%;
	height: var(--sbb-height, 48px);
	overflow: hidden;
	background-color: var(--sbb-track, #eef1f5);
	border-radius: var(--sbb-radius, 8px);
}

/*
 * 区画の幅は、アニメーション時は view.js がインラインで直接書き込む。
 * CSS のクラスや変数に頼らないことで、テーマ側の CSS や詳細度に
 * 左右されず、必ず「0% → 最終値」の向きで伸ばせる。
 */
.sbb-chart__seg {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	transition: width var(--sbb-duration, 1200ms) cubic-bezier(0.33, 1, 0.68, 1);
}

/*
 * 初期状態をセットする一瞬だけトランジションを切る。
 * これがないと、読み込み時に「最終値 → 0%」へ縮む動きが見えてしまう。
 */
.sbb-chart.sbb-arming .sbb-chart__seg,
.sbb-chart.sbb-arming .sbb-chart__seglabel {
	transition: none;
}

/*
 * 「せめぎ合い」演出の実行中。
 *
 * 幅は view.js が毎フレーム計算して書き込むため、トランジションは切っておく
 * （残っていると、書き込むたびに補間が始まって動きが濁る）。
 * space-between で各区画を外側へ寄せることで、両端から中央へ伸びる形になる。
 * ぶつかったあとは合計が 100% になるので、この指定は効かなくなる。
 */
.sbb-chart.sbb-clashing .sbb-chart__bar {
	justify-content: space-between;
}

.sbb-chart.sbb-clashing .sbb-chart__seg {
	transition: none;
}

/* --- バー内の文字 --- */

.sbb-chart__seglabel {
	flex: 0 0 auto;
	padding: 0 6px;
	color: var(--sbb-inside-color, #fff);
	font-size: var(--sbb-inside-size, 14px);
	font-weight: var(--sbb-inside-weight, 700);
	line-height: 1.2;
	white-space: nowrap;
	transition: opacity 400ms ease;
}

/* JS が有効なときだけ隠す。JS が動かない環境では最初から見えている。 */
.sbb-chart.sbb-armed .sbb-chart__seglabel {
	opacity: 0;
}

.sbb-chart.sbb-armed.is-visible .sbb-chart__seglabel {
	opacity: 1;
	transition-delay: var(--sbb-label-delay, 700ms);
}

/* 区画が狭すぎて文字が収まらない場合は、凡例に任せて隠す。 */
.sbb-chart__seglabel.is-too-narrow {
	visibility: hidden;
}

.sbb-chart__segname {
	margin-right: 0.4em;
}

.sbb-chart__segsuffix {
	margin-left: 0.1em;
	font-size: 0.8em;
}

/* --- 凡例 --- */

.sbb-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.4em;
	margin: 0.8em 0 0;
	padding: 0;
	font-size: var(--sbb-legend-size, 13px);
	line-height: 1.4;
	list-style: none;
}

.sbb-chart__legend::before,
.sbb-chart__legend::after {
	content: none;
}

.sbb-chart__legenditem {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sbb-chart__legenditem::before,
.sbb-chart__legenditem::after {
	content: none;
}

/*
 * テーマの本文用リスト装飾を確実に打ち消す。
 *
 * SWELL / AFFINGER などは `.post_content ul { padding-left: 30px }` のような
 * 指定を持っている。この形は「クラス1＋要素1」で、上の `.sbb-chart__legend`
 * （クラス1）より詳細度が高いため、こちらのリセットが負けて凡例が右へずれる。
 * 要素セレクタを足して詳細度を上げたうえで、位置に直接効く横方向の指定だけを
 * !important で固定する（縦の余白や色はテーマ側で調整できる余地を残す）。
 */
.sbb-chart ul.sbb-chart__legend,
.sbb-chart ul.sbb-chart__legend > li.sbb-chart__legenditem {
	margin-right: 0 !important;
	margin-left: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
	text-indent: 0 !important;
	list-style: none !important;
	background-image: none !important;
}

.sbb-chart ul.sbb-chart__legend > li.sbb-chart__legenditem::before,
.sbb-chart ul.sbb-chart__legend > li.sbb-chart__legenditem::after {
	content: none !important;
	display: none !important;
}

/*
 * display も同じ理由で守る。テーマに `.post_content li { display: list-item }`
 * があると項目が flex コンテナでなくなり、寄せ方の指定が黙って効かなくなる。
 */
.sbb-chart ul.sbb-chart__legend {
	display: flex;
}

.sbb-chart ul.sbb-chart__legend > li.sbb-chart__legenditem {
	display: flex;
	align-items: center;
}

.sbb-chart__swatch {
	flex: 0 0 auto;
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.45em;
	border-radius: 0.2em;
}

.sbb-chart__legendpercent {
	margin-left: 0.4em;
	font-weight: 700;
}

/* 凡例が上のときは、バーとの余白を逆にする。 */
.sbb-chart__legend:first-child {
	margin: 0 0 0.8em;
}

/*
 * 凡例「区画の幅に合わせる」
 *
 * 各項目に、対応する区画と同じ幅（%）を持たせ、その中で寄せ方を決める。
 * 幅の基準を揃えるため、この形のときは凡例をバーと同じ枠の中に置いている。
 */
.sbb-chart__legend--aligned {
	flex-wrap: nowrap;
	gap: 0;
	overflow: hidden;
}

.sbb-chart__legend--aligned .sbb-chart__legenditem {
	flex: 0 0 auto;
	min-width: 0;
	white-space: nowrap;
}

.sbb-chart__legend--aligned .sbb-chart__legenditem.is-align-left {
	justify-content: flex-start;
}

.sbb-chart__legend--aligned .sbb-chart__legenditem.is-align-center {
	justify-content: center;
}

.sbb-chart__legend--aligned .sbb-chart__legenditem.is-align-right {
	justify-content: flex-end;
}

/* 「視差効果を減らす」設定のときは動かさない（view.js 側でも処理を飛ばしている）。 */
@media (prefers-reduced-motion: reduce) {
	.sbb-chart__seg,
	.sbb-chart__seglabel {
		transition: none;
	}
}