/* Bone Flow #045 ToggleButton / Version 1.0.12 / Development */
.bone-togglebutton{
  --btb-on:#16a34a;--btb-off:#475569;--btb-thumb:#fff;--btb-text:#eef6ff;--btb-muted:#94a3b8;
  position:relative;display:grid;place-items:center;min-width:0;max-width:100%;box-sizing:border-box;
}
.bone-togglebutton[data-theme="dark"]{--btb-text:#f8fbff}.bone-togglebutton[data-theme="light"]{--btb-text:#172033}.bone-togglebutton[data-theme="neon"]{filter:drop-shadow(0 0 5px rgba(53,244,255,.12))}
.bone-togglebutton__control{position:relative;display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;padding:4px;border:0;background:transparent;color:var(--btb-text);font:inherit;cursor:pointer;outline:none;box-sizing:border-box}
.bone-togglebutton__control:disabled{cursor:not-allowed;opacity:.48}.bone-togglebutton__control:focus-visible{outline:2px solid #93c5fd;outline-offset:3px;border-radius:12px}
.bone-togglebutton__track{position:relative;display:block;width:72px;height:36px;max-width:100%;max-height:100%;border:1px solid color-mix(in srgb,var(--btb-off) 76%,#fff 24%);border-radius:999px;background:var(--btb-off);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.26);transition:background .16s,border-radius .16s,border-color .16s}
.bone-togglebutton.is-on .bone-togglebutton__track{background:var(--btb-on);border-color:color-mix(in srgb,var(--btb-on) 80%,#fff 20%)}
.bone-togglebutton__thumb{position:absolute;z-index:4;left:4px;right:auto;top:4px;height:calc(100% - 8px);aspect-ratio:1/1;border-radius:999px;background:var(--btb-thumb);box-shadow:0 2px 6px rgba(0,0,0,.35);transition:left .16s,right .16s,border-radius .16s}
.bone-togglebutton.is-on .bone-togglebutton__thumb{left:auto;right:4px}
.bone-togglebutton__pattern-text,.bone-togglebutton__pattern-icon{position:absolute;inset:0;z-index:2;display:none;align-items:center;pointer-events:none;user-select:none;font-weight:800;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.32)}
.bone-togglebutton__pattern-text{padding:0 11px;justify-content:flex-end;font-size:11px}.bone-togglebutton.is-on .bone-togglebutton__pattern-text{justify-content:flex-start}
.bone-togglebutton__pattern-icon{padding:0 11px;justify-content:flex-end;font-size:15px}.bone-togglebutton.is-on .bone-togglebutton__pattern-icon{justify-content:flex-start}
.bone-togglebutton__feedback{position:absolute;top:100%;left:0;right:0;z-index:8;min-height:18px;margin-top:4px;font-size:11px;color:var(--btb-muted);text-align:center;pointer-events:none}.bone-togglebutton__feedback[data-level="warning"]{color:#fbbf24}.bone-togglebutton__feedback[data-level="error"]{color:#fb7185}.bone-togglebutton__feedback[data-level="success"]{color:#55e6a5}
/* #035 completed Switch にある5 Pattern責務を #045 Action UIへ継承。 */
.bone-togglebutton[data-display-pattern="soft-rounded"] .bone-togglebutton__track{border-radius:10px}.bone-togglebutton[data-display-pattern="soft-rounded"] .bone-togglebutton__thumb{border-radius:7px}
/* ToggleButton固有のON/OFF表示文字はstandardでも消さない。soft-roundedも形状差分だけで表示文字契約を維持する。 */
.bone-togglebutton[data-display-pattern="standard"] .bone-togglebutton__pattern-text,.bone-togglebutton[data-display-pattern="soft-rounded"] .bone-togglebutton__pattern-text{display:flex}
.bone-togglebutton[data-display-pattern="text"] .bone-togglebutton__track{width:86px}.bone-togglebutton[data-display-pattern="text"] .bone-togglebutton__pattern-text{display:flex}
.bone-togglebutton[data-display-pattern="icon"] .bone-togglebutton__track{width:76px}.bone-togglebutton[data-display-pattern="icon"] .bone-togglebutton__pattern-icon{display:flex}
.bone-togglebutton[data-display-pattern="button"] .bone-togglebutton__track{width:88px;border-radius:9px}.bone-togglebutton[data-display-pattern="button"] .bone-togglebutton__thumb{display:none}.bone-togglebutton[data-display-pattern="button"] .bone-togglebutton__pattern-text{display:flex;justify-content:center!important;padding:0;font-size:12px;letter-spacing:.08em}
/* FIT / 親依存は不可視rootだけでなく実際のToggle視覚まで親領域へ追従する。 */
.bone-togglebutton[data-fit="true"],.bone-togglebutton[data-inherit-parent="true"]{width:100%!important;height:100%!important;justify-self:stretch!important;align-self:stretch!important}
.bone-togglebutton[data-fit="true"] .bone-togglebutton__control,.bone-togglebutton[data-inherit-parent="true"] .bone-togglebutton__control{width:100%;height:100%;padding:4px}
.bone-togglebutton[data-fit="true"] .bone-togglebutton__track,.bone-togglebutton[data-inherit-parent="true"] .bone-togglebutton__track{width:100%!important;height:100%!important;max-width:none;max-height:none}
.bone-togglebutton[data-inherit-parent="true"] .bone-togglebutton__track{background:color-mix(in srgb,var(--btb-parent-bg,transparent) 55%,var(--btb-off) 45%);border-radius:var(--btb-parent-radius,999px);color:var(--btb-parent-text,var(--btb-text))}.bone-togglebutton[data-inherit-parent="true"].is-on .bone-togglebutton__track{background:color-mix(in srgb,var(--btb-parent-bg,transparent) 35%,var(--btb-on) 65%)}
@media(max-width:640px){.bone-togglebutton__track{width:68px;height:34px}}