/* ==========================================================================
   @xstate-wizards/spellbook styles
   All classes prefixed with xw-sb__
   ========================================================================== */

/* --- SpellBook ----------------------------------------------------------- */
.xw-sb__spellbook {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.xw-sb__spellbook button,
.xw-sb__spellbook input,
.xw-sb__spellbook select,
.xw-sb__spellbook textarea {
  font-family: inherit;
}

.xw-sb__spellbook *::-webkit-scrollbar {
  display: none;
}

.xw-sb__spellbook * {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.xw-sb__spellbook .xw-sb__spell-editor {
  width: 100%;
  max-width: 100vw;
}

.xw-sb__spellbook .xw-sb__spell-editor .editor__main {
  display: flex;
  justify-content: space-between;
}

.xw-sb__spellbook .xw-sb__spell-editor .editor__flow {
  width: 100%;
}

/* --- Sidebar ------------------------------------------------------------- */
.xw-sb__sidebar {
  height: 100vh;
  display: flex;
  min-width: 200px;
  width: 200px;
  overflow: hidden;
  border-right: 2px solid #000;
}

.xw-sb__sidebar .spells-sidebar-button {
  position: fixed;
  top: 4px;
  left: 4px;
}

.xw-sb__sidebar .xw-sb__spells-list {
  width: 100%;
  height: auto;
  background: #fafafa;
  overflow-y: scroll;
}

.xw-sb__sidebar .xw-sb__spells-list li {
  cursor: pointer;
  font-size: 12px;
  margin-bottom: 2px;
}

.xw-sb__sidebar .xw-sb__spells-list h4 {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.xw-sb__sidebar .xw-sb__spells-list__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8em 1em;
  background-color: #000;
}

.xw-sb__sidebar .xw-sb__spells-list__header button {
  max-width: 40px;
}

.xw-sb__sidebar .xw-sb__spells-list__directory {
  padding: 1em;
  height: auto;
  overflow: scroll;
}

.xw-sb__sidebar.xw-sb__sidebar--skinny {
  width: 48px;
  min-width: 48px;
  cursor: pointer;
}

.xw-sb__sidebar.xw-sb__sidebar--skinny .xw-sb__spells-list {
  width: 48px;
  min-width: 48px;
}

.xw-sb__sidebar.xw-sb__sidebar--collapsed {
  width: 0;
  min-width: 0;
  border-right: none;
}

/* --- Directory ----------------------------------------------------------- */
.xw-sb__directory h4 {
  font-size: 13px;
}

.xw-sb__directory ul {
  margin: 0;
}

.xw-sb__directory ul.xw-sb__spell-directory__spells-list {
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid #ccc;
}

.xw-sb__directory ul.xw-sb__spell-directory__spells-list>li {
  list-style: disc;
  margin-left: -3px;
}

.xw-sb__directory ul.xw-sb__spell-directory__spells-list.top-level ul {
  margin-left: 3px;
}

.xw-sb__directory ul.xw-sb__spell-directory__spells-list.top-level li {
  list-style: none;
}

.xw-sb__directory ul.spell-directory__versions-list {
  margin-left: 12px;
}

.xw-sb__directory li {
  margin: 0;
  font-size: 10px;
  color: #777;
}

.xw-sb__directory li.selected {
  color: black;
  font-weight: 900;
}

.xw-sb__directory.xw-sb__directory--has-dir {
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid #ccc;
}

.xw-sb__directory:not(.xw-sb__directory--has-dir) {
  margin-left: 0;
}

.xw-sb__directory:not(.xw-sb__directory--has-dir)>div,
.xw-sb__directory:not(.xw-sb__directory--has-dir) ul.xw-sb__spell-directory__spells-list {
  margin-left: 0;
  padding-left: 0;
  border: none;
}

/* --- Spell Editor -------------------------------------------------------- */
.xw-sb__editor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.xw-sb__editor .xw-sb__spell-editor__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0;
  background: #fcfcfc;
  border-bottom: 2px solid #f0f0f0;
}

.xw-sb__editor .xw-sb__spell-editor__header__lead {
  display: flex;
}

.xw-sb__editor .xw-sb__spell-editor__header__logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 1em;
  background-color: #000;
}

.xw-sb__editor .xw-sb__spell-editor__header__title {
  display: flex;
  flex-direction: column;
  margin-left: 1em;
}

.xw-sb__editor .xw-sb__spell-editor__header__title h4 {
  position: relative;
  bottom: -3px;
}

.xw-sb__editor .xw-sb__spell-editor__header__title>div {
  display: flex;
}

.xw-sb__editor .xw-sb__spell-editor__header__title>div small {
  margin-right: 0.5em;
  font-size: 10px;
}

.xw-sb__editor .xw-sb__spell-editor__header__directory {
  font-weight: 900;
  text-decoration: underline;
  cursor: pointer;
}

.xw-sb__editor .xw-sb__spell-editor__header__actions {
  margin-right: 1em;
}

.xw-sb__editor .xw-sb__spell-editor__header__actions button {
  margin-left: 0.25em;
}

.xw-sb__editor .xw-sb__spell-editor__header__actions .divider {
  margin: 0 4px;
  color: #ccc;
}

/* --- Config Editor ------------------------------------------------------- */
.xw-sb__config-editor {
  display: flex;
  background: white;
  border-bottom: 2px solid #f0f0f0;
  padding: 0.75em 1em;
  margin-bottom: 0;
}

.xw-sb__config-editor label {
  margin: 0 6px;
  font-size: 13px;
  font-weight: 900;
}

.xw-sb__config-editor label:first-of-type {
  margin: 0 6px 0 0;
}

.xw-sb__config-editor input {
  flex-grow: 1;
}

.xw-sb__config-editor .dialog-notes {
  background: white;
  padding: 1em;
  color: #000;
}

.xw-sb__config-editor .dialog-notes p {
  margin: 0 0 0.5em;
}

.xw-sb__config-editor .dialog-notes textarea {
  width: 100%;
}

/* --- Locale Editor / Selector ------------------------------------------- */
.xw-sb__locale-editor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 12px;
}

.xw-sb__locale-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #e8e8e8;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 12px;
}

.xw-sb__locale-tag button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  padding: 0 2px;
  color: #888;
}

.xw-sb__locale-tag button:hover {
  color: #c00;
}

.xw-sb__locale-selector {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.xw-sb__locale-selector small {
  white-space: nowrap;
}

.xw-sb__config-editor .xw-sb__locale-editor {
  flex-shrink: 0;
}

/* --- Schema Editor ------------------------------------------------------- */
.xw-sb__schema-editor {
  position: fixed;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: white;
  border-bottom: 2px solid #f0f0f0;
  padding: 0;
  margin-bottom: 0;
  width: 100vw;
}

.xw-sb__schema-editor .schema-section {
  display: flex;
  border-bottom: 2px solid #ccc;
}

.xw-sb__schema-editor .schema-section__keys {
  font-size: 14px;
  font-weight: 900;
  margin-right: 4px;
  width: 132px;
  min-width: 132px;
  max-width: 132px;
  height: auto;
  padding: 12px;
  background: #eee;
}

.xw-sb__schema-editor .schema-section__keys .custom-property {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.xw-sb__schema-editor .schema-section label {
  font-size: 13px;
}

.xw-sb__schema-editor .schema-section__models-list {
  display: flex;
  width: 100%;
  padding: 8px;
}

.xw-sb__schema-editor .schema-section__models-list>div {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.xw-sb__schema-editor .schema-section__models-list>div label {
  display: flex;
}

.xw-sb__schema-editor .schema-section__states-editor {
  display: flex;
  width: 100%;
  padding: 12px;
}

.xw-sb__schema-editor .schema-section__states-editor__type {
  margin-right: 8px;
}

.xw-sb__schema-editor .schema-section__states-editor__default {
  margin-left: 8px;
}

.xw-sb__schema-editor .schema-section__states-editor__default input {
  margin-left: 8px;
}

.xw-sb__schema-editor .add-property-button {
  cursor: pointer;
}

/* --- States -------------------------------------------------------------- */
.xw-sb__states {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  width: 100%;
}

.xw-sb__states .xw-sb__spell-states__view {
  scroll-behavior: smooth;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 105px);
  overflow-y: scroll;
}

.xw-sb__states .xw-sb__spell-states__view__list {
  display: flex;
  flex-direction: column;
}

.xw-sb__states .xw-sb__spell-states__view__add {
  position: relative;
  left: -60px;
  padding: 1em 0 4em;
  margin: 0 auto;
  text-align: center;
  max-width: 960px;
}

.xw-sb__states .xw-sb__spell-states__view__add button {
  margin: 0 4px;
}

.xw-sb__states .content-node__actions {
  display: flex;
  flex-direction: row;
}

/* --- State --------------------------------------------------------------- */
.xw-sb__state {
  display: flex;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.xw-sb__state .xw-sb__spell-state {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: white;
  border-radius: 4px;
  overflow: visible;
  margin: 1em 0 1.5em;
  box-shadow: 0 4px 16px 0 rgba(228, 228, 230, 1), 0 4px 16px 0 rgba(228, 228, 230, 1),
    0 4px 16px 0 rgba(228, 228, 230, 1), 0 2px 4px 0 rgba(228, 228, 230, 1);
  border: 1px solid #ccc;
}

.xw-sb__state .xw-sb__spell-state__header {
  font-size: 16px;
  font-weight: 900;
  padding: 0.25em 1em;
  background: #000;
  color: white;
  display: flex;
  justify-content: space-between;
}

.xw-sb__state .xw-sb__spell-state__header__tag {
  opacity: 0.5;
}

.xw-sb__state .xw-sb__spell-state__header__buttons button {
  margin-left: 6px;
}

.xw-sb__state .xw-sb__spell-state__body {
  overflow: visible;
}

.xw-sb__state .xw-sb__spell-state__body__events {
  padding: 0 1em;
  background: #e5e5e5;
  overflow-x: scroll;
}

.xw-sb__state .xw-sb__spell-state__body__events small {
  font-size: 10px;
  font-weight: 900;
  color: #999;
}

/* --- Dialog -------------------------------------------------------------- */
.xw-sb__dialog-overlay {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em;
}

.xw-sb__dialog-overlay .dialog {
  height: auto;
  width: 100%;
  min-width: 600px;
  max-width: 920px;
  margin: 0 auto;
  background: white;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: space-between;
}

/* --- Preview Modal ------------------------------------------------------- */
.xw-sb__preview-modal {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  padding: 2em;
}

.xw-sb__preview-modal .xw-sb__preview {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  background: white;
  border-radius: 4px;
  max-width: 1080px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.xw-sb__preview-modal .xw-sb__preview__close {
  width: 100%;
  padding: 0.2em;
  text-align: center;
  cursor: pointer;
  background: #eee;
  border-bottom: 2px solid #ccc;
  font-size: 12px;
}

.xw-sb__preview-modal .xw-sb__preview__wiz {
  width: 100%;
  height: 100%;
  overflow: scroll;
  display: flex;
}

.xw-sb__preview-modal .xw-sb__preview__wiz__runner {
  width: 100%;
  flex-grow: 1;
  overflow-y: scroll;
}

.xw-sb__preview-modal .xw-sb__preview__wiz__inspector {
  background: #e5e5e5;
  min-width: 480px;
  max-width: 480px;
  width: 480px;
  padding: 1em;
  overflow: scroll;
}

.xw-sb__preview-modal .xw-sb__preview__wiz__inspector__header {
  margin-bottom: 0.5em;
  font-size: 12px;
  font-weight: 900;
  color: #999;
}

/* --- Preview Page -------------------------------------------------------- */
.xw-sb__preview-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fafafa;
}

.xw-sb__preview-page .xw-sb__spell-editor__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0;
  background: #111;
  color: white;
}

.xw-sb__preview-page .xw-sb__spell-editor__header__lead {
  display: flex;
}

.xw-sb__preview-page .xw-sb__spell-editor__header__logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 1em;
  background-color: #000;
}

.xw-sb__preview-page .xw-sb__spell-editor__header__title {
  display: flex;
  border-left: 2px solid white;
  padding-left: 1em;
  align-items: center;
  height: 48px;
}

.xw-sb__preview-page .xw-sb__spell-editor__header__title h4 {
  display: flex;
}

.xw-sb__preview-page .xw-sb__spell-editor__header__title h4 select {
  margin-left: 4px;
}

.xw-sb__preview-page .xw-sb__spell-editor__header__title>div {
  display: flex;
  margin-left: 1em;
}

.xw-sb__preview-page .xw-sb__spell-editor__header__title>div small {
  margin-left: 0.5em;
  font-size: 10px;
}

.xw-sb__preview-page .xw-sb__spell-editor__header__title button {
  margin-left: 4px;
}

.xw-sb__preview-page .xw-sb__spell-editor__header__directory {
  font-weight: 900;
  text-decoration: underline;
  cursor: pointer;
}

.xw-sb__preview-page .xw-sb__spell-editor__header__actions {
  margin-right: 1em;
}

.xw-sb__preview-page .xw-sb__spell-editor__header__actions button {
  margin-left: 0.25em;
}

.xw-sb__preview-page .xw-sb__spell-editor__header__actions .xw-sb__divider {
  margin: 0 4px;
  color: #ccc;
}

.xw-sb__preview-page .xw-sb__preview__wiz {
  width: 100%;
  height: 100%;
  overflow: scroll;
  display: flex;
}

.xw-sb__preview-page .xw-sb__preview__wiz__runner {
  width: 100%;
  flex-grow: 1;
  overflow-y: scroll;
}

.xw-sb__preview-page .xw-sb__preview__wiz__inspector {
  background: #e5e5e5;
  min-width: 480px;
  max-width: 480px;
  width: 480px;
  padding: 1em;
  overflow: scroll;
}

.xw-sb__preview-page .xw-sb__preview__wiz__inspector__header {
  margin-bottom: 0.5em;
  font-size: 12px;
  font-weight: 900;
  color: #999;
}

/* --- Preview History Item ------------------------------------------------ */
.xw-sb__preview-history-item {
  margin-bottom: 0.25em;
  border-radius: 4px;
  background: white;
  overflow: hidden;
}

.xw-sb__preview-history-item .xw-sb__preview__inspector__key {
  padding: 0.2em 0.75em;
  width: 100%;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.xw-sb__preview-history-item .xw-sb__preview__inspector__details {
  padding: 0;
}

.xw-sb__preview-history-item .xw-sb__preview__inspector__key__type {
  font-size: 12px;
  font-weight: 900;
}

.xw-sb__preview-history-item .xw-sb__preview__inspector__key__key {
  font-size: 10px;
  font-weight: 900;
  color: #aaa;
}

/* --- Mini Map ------------------------------------------------------------ */
.xw-sb__mini-map {
  position: sticky;
  top: 30px;
  min-width: 240px;
  padding: 1em 0 0 1em;
  user-select: none;
  max-height: calc(100vh - 105px);
  overflow-y: scroll;
}

.xw-sb__mini-map div {
  padding: 0 0.5em 0 0;
  margin: 0.25em 0;
  font-size: 11px;
  letter-spacing: -0.1px;
  font-weight: 900;
  display: flex;
  align-items: center;
}

.xw-sb__mini-map div p {
  margin: 0;
}

.xw-sb__mini-map div svg {
  padding-right: 4px;
  cursor: grab;
}

.xw-sb__mini-map small.sections-bar__trigger {
  display: flex;
  font-size: 11px;
  height: 14px;
  color: #aaa;
  cursor: pointer;
}

.xw-sb__mini-map small.sections-bar__trigger:hover {
  text-decoration: underline;
}

.xw-sb__mini-map a {
  color: gray;
}

/* --- Sections Editor (dialog overlay) ------------------------------------ */
.xw-sb__sections-editor {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em;
}

.xw-sb__sections-editor .xw-sb__preview {
  height: auto;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background: white;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: space-between;
}

.xw-sb__sections-editor .attrs {
  padding: 0.5em;
}

.xw-sb__sections-editor table {
  width: 100%;
  border: 1px solid #ccc;
}

.xw-sb__sections-editor th {
  text-align: left;
  font-size: 12px;
}

.xw-sb__sections-editor tr {
  border: 1px solid #ccc;
}

.xw-sb__sections-editor td input,
.xw-sb__sections-editor td select {
  width: 100%;
}

.xw-sb__sections-editor .attrs__add {
  padding: 0.25em 0.5em;
  display: flex;
}

.xw-sb__sections-editor .attrs__add button {
  width: 100%;
}

/* --- Content Node Editor ------------------------------------------------- */
.xw-sb__content-node-editor {
  display: flex;
  width: 100%;
  padding: 4px 1em;
  border-bottom: 1px solid #ddd;
  position: relative;
  transition: background 0.15s ease;
}

.xw-sb__content-node-editor:nth-child(even) {
  background: #fcfcfc;
}

.xw-sb__content-node-editor:last-of-type {
  border-bottom: none;
}

.xw-sb__content-node-editor:hover {
  background: rgba(0, 0, 0, 0.02);
}

.xw-sb__content-node-editor .content-node__type {
  max-width: 80px;
  width: 100%;
  display: flex;
}

.xw-sb__content-node-editor .content-node__type input,
.xw-sb__content-node-editor .content-node__type select {
  flex-grow: 1;
  width: 100%;
}

.xw-sb__content-node-editor .content-node__config {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.xw-sb__content-node-editor .content-node__config input,
.xw-sb__content-node-editor .content-node__config textarea {
  flex-grow: 1;
}

.xw-sb__content-node-editor .content-node__config__stack {
  display: flex;
  width: 100%;
}

.xw-sb__content-node-editor .content-node__config__stack table {
  flex-grow: 1;
}

.xw-sb__content-node-editor .content-node__config__stack td {
  border: 1px solid #ccc;
  width: 100%;
}

.xw-sb__content-node-editor .content-node__config__stack td input,
.xw-sb__content-node-editor .content-node__config__stack td select {
  width: 100%;
}

.xw-sb__content-node-editor .stack-btn,
.xw-sb__content-node-editor .add-option-button {
  font-size: 7px;
  white-space: nowrap;
}

.xw-sb__content-node-editor .content-node__config__stack td.stack-label {
  max-width: 100px;
  width: 100px;
  font-size: 11px;
  padding-left: 2px;
}

.xw-sb__content-node-editor .content-node__config__stack td.stack-label .stack-label__actions small {
  margin-right: 4px;
  font-size: 10px;
  cursor: pointer;
}

.xw-sb__content-node-editor .content-node__config__event-trigger {
  display: flex;
}

.xw-sb__content-node-editor .content-node__config__event-trigger>small {
  margin: 0 4px;
}

.xw-sb__content-node-editor .content-node__actions {
  display: none;
  align-items: center;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 1;
  background: white;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 1px 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.xw-sb__content-node-editor:hover>.content-node__actions {
  display: flex;
}

.xw-sb__content-node-editor .content-node__actions .content-node__attrs-trigger {
  display: flex;
  height: 100%;
}

.xw-sb__content-node-editor .content-node__actions button {
  font-size: 10px;
  height: 100%;
}

.xw-sb__content-node-editor .content-node__actions .content-node__reorder-arrows {
  display: flex;
  flex-direction: row;
}

.xw-sb__content-node-editor .content-node__config__select-options {
  width: 100%;
}

.xw-sb__content-node-editor .content-node__config__select-options .field {
  width: 48%;
  max-width: 48%;
  min-width: 48%;
}

.xw-sb__content-node-editor .content-node__config__select-options .select-options__header {
  width: 48%;
  max-width: 48%;
  min-width: 48%;
  font-size: 13px;
}

.xw-sb__content-node-editor .content-node__config__select-options .select-options__header small {
  margin-left: 4px;
}

.xw-sb__content-node-editor .content-node__config__select-options small {
  font-size: 10px;
  margin-right: 6px;
}

/* --- Content Node Adder -------------------------------------------------- */
.xw-sb__content-node-adder {
  padding: 0.5em 1em;
}

.xw-sb__content-node-adder select {
  max-width: 110px;
  width: 100%;
}

/* --- Attrs Editor (dialog overlay) --------------------------------------- */
.xw-sb__attrs-editor {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em;
}

.xw-sb__attrs-editor .xw-sb__preview {
  height: auto;
  width: 100%;
  min-width: 600px;
  max-width: 920px;
  margin: 0 auto;
  background: white;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: space-between;
}

.xw-sb__attrs-editor .attrs {
  padding: 0.5em;
}

.xw-sb__attrs-editor table {
  width: 100%;
  border: 1px solid #ccc;
}

.xw-sb__attrs-editor th {
  text-align: left;
  font-size: 12px;
}

.xw-sb__attrs-editor tr {
  border: 1px solid #ccc;
}

.xw-sb__attrs-editor td input,
.xw-sb__attrs-editor td select {
  width: 100%;
}

.xw-sb__attrs-editor .attrs__add {
  padding: 0.25em 0.5em;
  display: flex;
}

.xw-sb__attrs-editor .attrs__add button {
  width: 100%;
}

.xw-sb__attrs-editor .variable-input__object__key {
  display: flex;
  flex-direction: column;
}

/* --- Event Editor -------------------------------------------------------- */
.xw-sb__event-editor {
  padding: 0.5em;
}

.xw-sb__event-editor .event-label {
  min-width: 120px;
  max-width: 120px;
  width: 120px;
}

.xw-sb__event-editor table {
  width: 100%;
}

.xw-sb__event-editor tr {
  display: flex;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 2px solid #ccc;
}

.xw-sb__event-editor tr td:first-of-type {
  display: flex;
  justify-content: flex-start;
}

.xw-sb__event-editor .event-data__editor {
  flex-grow: 1;
}

.xw-sb__event-editor .event-data__editor div {
  width: 100%;
}

.xw-sb__event-editor .event-data__editor input {
  width: 100%;
}

.xw-sb__event-editor .event-data__editor hr {
  margin: 4px 0;
}

.xw-sb__event-editor .event-data__editor__buttons {
  display: flex;
}

/* --- Validation List ----------------------------------------------------- */
.xw-sb__validation-list {
  display: flex;
}

.xw-sb__validation-list select {
  width: 100%;
  max-width: 120px;
}

.xw-sb__validation-list .active-validations {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-left: 4px;
}

.xw-sb__validation-list .active-validations small {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #e8e8e8;
  border-radius: 3px;
  padding: 0px 4px;
  font-size: 11px;
  max-height: 18px;
  white-space: nowrap;
}

.xw-sb__validation-list .active-validations small span {
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  opacity: 0.6;
}

.xw-sb__validation-list .active-validations small span:hover {
  opacity: 1;
}

/* --- JSON Logic Builder -------------------------------------------------- */
.xw-sb__json-logic {
  display: flex;
  padding: 2px 0 2px 2px;
  border-left: 2px solid #6c9bd1;
  margin-left: 2px;
  background: rgba(108, 155, 209, 0.06);
  border-radius: 0 3px 3px 0;
}

/* Alternating nesting colors */
.xw-sb__json-logic .xw-sb__json-logic {
  border-left-color: #d1a06c;
  background: rgba(209, 160, 108, 0.06);
}

.xw-sb__json-logic .xw-sb__json-logic .xw-sb__json-logic {
  border-left-color: #8c6cd1;
  background: rgba(140, 108, 209, 0.06);
}

.xw-sb__json-logic .xw-sb__json-logic .xw-sb__json-logic .xw-sb__json-logic {
  border-left-color: #6cb8a0;
  background: rgba(108, 184, 160, 0.06);
}

.xw-sb__json-logic .logic__operation {
  flex-shrink: 0;
}

.xw-sb__json-logic input,
.xw-sb__json-logic select {
  flex-grow: 1;
  max-width: 160px;
}

.xw-sb__json-logic .logic__args {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xw-sb__json-logic .logic__arg {
  border-left: 2px solid #6c9bd1;
  padding-left: 2px;
  margin-left: 2px;
}

/* Match arg border colors to parent nesting level */
.xw-sb__json-logic .xw-sb__json-logic .logic__arg {
  border-left-color: #d1a06c;
}

.xw-sb__json-logic .xw-sb__json-logic .xw-sb__json-logic .logic__arg {
  border-left-color: #8c6cd1;
}

.xw-sb__json-logic .xw-sb__json-logic .xw-sb__json-logic .xw-sb__json-logic .logic__arg {
  border-left-color: #6cb8a0;
}

.xw-sb__json-logic .logic__args__actions {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}

.xw-sb__json-logic .logic__args__actions u {
  margin: 0 2px;
  cursor: pointer;
}

/* --- JSON View ----------------------------------------------------------- */
.xw-sb__json-view .json-container {
  font-family: menlo, consolas, monospace;
  font-style: normal;
  font-weight: bold;
  line-height: 1.4em;
  font-size: 0.6rem;
  transition: background-color 400ms;
  background-color: white;
}

.xw-sb__json-view a.json-link {
  text-decoration: none;
  border-bottom: 1px solid;
  outline: none;
  color: blue;
}

.xw-sb__json-view a.json-link:hover {
  background-color: transparent;
  outline: none;
  color: blue;
}

.xw-sb__json-view a.json-link:visited {
  color: blue;
}

.xw-sb__json-view a.json-link:active {
  color: blue;
}

.xw-sb__json-view ol.json-lines {
  white-space: normal;
  padding-inline-start: 0;
  margin: 0px;
}

.xw-sb__json-view ol.json-lines>li {
  white-space: pre;
  text-indent: 0.7em;
  line-height: 1.5em;
  padding: 0px;
}

.xw-sb__json-view ol.json-lines>li::marker {
  font-family: system-ui, sans-serif;
  font-weight: normal;
  color: transparent;
}

.xw-sb__json-view ol.json-lines>li:nth-child(odd) {
  background-color: #e9e9e9;
}

.xw-sb__json-view ol.json-lines>li:nth-child(even) {
  background-color: whitesmoke;
}

.xw-sb__json-view ol.json-lines>li:hover {
  background-color: #ffffff;
}

.xw-sb__json-view .json-key {
  color: gray;
}

.xw-sb__json-view .json-string {
  color: #7d40db;
}

.xw-sb__json-view .json-number {
  color: #ff0076;
}

.xw-sb__json-view .json-boolean {
  color: #5971ff;
}

.xw-sb__json-view .json-null {
  color: #a2a2a2;
}

.xw-sb__json-view .json-mark {
  color: black;
}

.xw-sb__json-view .json-key,
.xw-sb__json-view .json-string,
.xw-sb__json-view .json-number,
.xw-sb__json-view .json-boolean,
.xw-sb__json-view .json-null,
.xw-sb__json-view .json-mark,
.xw-sb__json-view a.json-link,
.xw-sb__json-view ol.json-lines>li {
  transition: all 400ms;
}

/* --- Variable Input ------------------------------------------------------ */
.xw-sb__variable-input .variable-input__object {
  display: flex;
  flex-direction: column;
}

.xw-sb__variable-input .variable-input__object__key-value {
  display: flex;
  width: 100%;
}

.xw-sb__variable-input .variable-input__object__key-value>div.variable-input__object__key-value__key {
  display: flex;
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

.xw-sb__variable-input .variable-input__object__key-value>*:not(div.variable-input__object__key-value__key) {
  width: 100%;
}

.xw-sb__variable-input .variable-input__object__key-value>*:not(div.variable-input__object__key-value__key) input {
  width: 100%;
}

.xw-sb__variable-input .variable-input__array__item {
  display: flex;
  margin-bottom: 8px;
  padding: 4px;
  border-left: 2px solid #ccc;
}

.xw-sb__variable-input .variable-input__array__item>div:not(.variable-input__array__item__actions) {
  flex-grow: 1;
}

.xw-sb__variable-input .variable-input__array__item__actions {
  width: 32px;
  margin-right: 4px;
  display: flex;
  flex-direction: column;
}

/* --- Input Assign -------------------------------------------------------- */
.xw-sb__input-assign {
  display: flex;
}

.xw-sb__input-assign .input-assign__type {
  display: flex;
  flex-wrap: nowrap;
}

.xw-sb__input-assign .input-assign__type button {
  font-size: 11px;
}

.xw-sb__input-assign .input-assign__editor {
  display: flex;
  align-items: center;
  margin-left: 8px;
  width: 100%;
}

.xw-sb__input-assign .input-assign__editor label {
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
}

.xw-sb__input-assign .input-assign__editor>div,
.xw-sb__input-assign .input-assign__editor>input,
.xw-sb__input-assign .input-assign__editor>select {
  flex-grow: 1;
  margin: 0 4px;
}

/* --- Select With Other --------------------------------------------------- */
.xw-sb__select-with-other {
  display: flex;
}

.xw-sb__select-with-other select {
  width: 30%;
  max-width: 30%;
}

.xw-sb__select-with-other input {
  flex-grow: 1;
}

/* --- State Content Editor ------------------------------------------------ */
.xw-sb__state-content {
  display: flex;
  flex-direction: column;
  border: 1px solid gray;
}

.xw-sb__state-content .xw-sb__spell-state__content-nodes {
  padding: 0;
}

.xw-sb__state-content .xw-sb__spell-state__content-nodes--none {
  height: 40px;
  margin: 0.5em 1em 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  color: #aaa;
  font-size: 12px;
}

.xw-sb__state-content .xw-sb__spell-state__content-nodes--nested {
  padding: 0.5em;
  width: 100%;
  background: rgba(0, 0, 0, 0.05);
}

.xw-sb__state-content .xw-sb__spell-state__content-nodes--nested .xw-sb__content-node-adder {
  padding: 0 0 0.25em;
}

/* --- State History ------------------------------------------------------- */
.xw-sb__state-history {
  display: flex;
  flex-direction: column;
  width: 120px;
  padding: 1em 0;
  margin-left: 0.5em;
  color: #999;
}

.xw-sb__state-history small {
  line-height: 150%;
  font-size: 11px;
}

.xw-sb__state-history small.section-title {
  font-size: 10px;
  font-weight: 900;
}

.xw-sb__state-history small.section-title:not(:first-of-type) {
  margin-top: 1.25em;
}

.xw-sb__state-history .section-notes {
  line-height: 100%;
  margin-top: 0.75em;
}

.xw-sb__state-history .section-notes small:not(.section-title) {
  font-size: 11px;
}

.xw-sb__state-history .section-notes:hover {
  text-decoration: underline;
  cursor: pointer;
}

.xw-sb__state-history .dialog-notes {
  background: white;
  padding: 1em;
  color: #000;
}

.xw-sb__state-history .dialog-notes p {
  margin: 0 0 0.5em;
}

.xw-sb__state-history .dialog-notes textarea {
  width: 100%;
}

/* --- State Invoke Editor ------------------------------------------------- */
.xw-sb__state-invoke {
  padding: 0.5em 1em 0.5em;
  background: #fff;
  overflow-x: scroll;
}

.xw-sb__state-invoke .invoke__editor {
  display: flex;
  border: 2px solid #f5f5f5;
}

.xw-sb__state-invoke .invoke__editor>div {
  width: 100%;
  flex-grow: 1;
}

.xw-sb__state-invoke .invoke__editor>div:first-of-type {
  width: 100%;
}

.xw-sb__state-invoke .invoke__editor>div:nth-of-type(2) {
  max-width: 150px;
}

.xw-sb__state-invoke .invoke__editor>div:nth-of-type(2) select {
  max-width: 100%;
}

.xw-sb__state-invoke .invoke__editor>div:last-of-type {
  margin-right: 0;
  max-width: 36px;
}

.xw-sb__state-invoke .invoke__editor__header {
  padding: 0 4px;
  background: #f5f5f5;
  border-bottom: 2px solid #f0f0f0;
  border-right: 2px solid #f0f0f0;
  width: 100%;
}

.xw-sb__state-invoke .invoke__editor__header small {
  font-size: 11px;
  font-weight: 800;
}

.xw-sb__state-invoke .invoke__editor__header button {
  font-size: 8px;
}

.xw-sb__state-invoke .invoke__editor__logic {
  padding: 4px 8px;
}

.xw-sb__state-invoke .invoke__add button {
  font-size: 12px;
}

/* --- Invoke State Context Editor ----------------------------------------- */
.xw-sb__invoke-context {
  display: flex;
  padding: 0.5em 1em 0;
}

.xw-sb__invoke-context .context-editor__key {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

.xw-sb__invoke-context .context-editor__key button {
  max-width: 18px;
}

.xw-sb__invoke-context .context-editor__value {
  width: 100%;
}

.xw-sb__invoke-context .context-key {
  display: flex;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #bbb;
  margin-bottom: 0.2em;
}

.xw-sb__invoke-context .context-key__name {
  font-size: 13px;
  padding-top: 0.2em;
  min-width: 40px;
}

.xw-sb__invoke-context .context-key__name select {
  max-width: 100%;
  width: 100%;
}

.xw-sb__invoke-context .context-key__editor {
  display: flex;
  width: 100%;
}

/* --- Invoke State Key Selector ------------------------------------------- */
.xw-sb__invoke-key {
  display: flex;
  flex-direction: column;
  border: 1px solid gray;
}

.xw-sb__invoke-key .xw-sb__spell-state__content-nodes {
  padding: 0.5em 1em;
  display: flex;
}

.xw-sb__invoke-key .xw-sb__select-label {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

.xw-sb__invoke-key .xw-sb__select-key {
  width: 100%;
  display: flex;
}

.xw-sb__invoke-key .xw-sb__select-key>div {
  width: 100%;
}

.xw-sb__invoke-key .xw-sb__spell-state__content-nodes select {
  width: 100%;
}

.xw-sb__invoke-key .select-warning {
  font-size: 10px;
  width: 320px;
}

/* --- Events Editor ------------------------------------------------------- */
.xw-sb__events-editor {
  padding: 0.5em 1em;
  background: #f0f0f0;
  overflow: visible;
}

.xw-sb__events-editor .on-event {
  display: flex;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #bbb;
  margin-bottom: 0.2em;
}

.xw-sb__events-editor .on-event__name {
  min-width: 120px;
  max-width: 120px;
  width: 120px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  padding-top: 0.2em;
  font-weight: 900;
  font-size: 14px;
}

.xw-sb__events-editor .on-event__name div {
  display: flex;
  justify-content: flex-start;
}

.xw-sb__events-editor .on-event__name button {
  font-size: 10px;
}

.xw-sb__events-editor .on-event__transitions {
  display: flex;
  width: 100%;
}

/* --- Event Transitions Editor -------------------------------------------- */
.xw-sb__event-transitions {
  display: flex;
  min-width: 100%;
  flex-direction: column;
}

.xw-sb__event-transitions .transition {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  position: relative;
  padding: 4px 0;
  border-bottom: 1px solid #ccc;
}

.xw-sb__event-transitions .transition:last-of-type {
  border-bottom: none;
}

.xw-sb__event-transitions .transition:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

.xw-sb__event-transitions .transition__details {
  display: flex;
  flex-grow: 1;
}

.xw-sb__event-transitions .transition__details>label {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
}

.xw-sb__event-transitions .transition__details__target {
  max-width: 110px;
}

.xw-sb__event-transitions .transition__details__target select {
  max-width: 100%;
}

.xw-sb__event-transitions .transition__details__logic-holder>small,
.xw-sb__event-transitions .transition__details__actions>small,
.xw-sb__event-transitions .transition__details__target>small {
  font-size: 10px;
  position: relative;
  bottom: -2px;
}

.xw-sb__event-transitions .transition__details__logic-holder {
  min-width: 80px;
}

.xw-sb__event-transitions .transition__details__actions {
  min-width: 80px;
  margin: 0 4px;
}

.xw-sb__event-transitions .transition__details__actions__list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.xw-sb__event-transitions .transition__details__actions__list__item {
  display: flex;
}

.xw-sb__event-transitions .transition__row-buttons {
  display: none;
  align-items: center;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 1;
  background: white;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 1px 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.xw-sb__event-transitions .transition:hover>.transition__row-buttons {
  display: flex;
}

.xw-sb__event-transitions .transition__row-buttons button {
  font-size: 10px;
  height: 100%;
}

.xw-sb__event-transitions .add-transition {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.xw-sb__event-transitions .logic-holder {
  width: 100%;
  min-width: 100%;
}

/* --- Invoke State On Editor ---------------------------------------------- */
.xw-sb__invoke-on {
  padding: 0.5em 1em;
  background: #f0f0f0;
  overflow-x: scroll;
}

.xw-sb__invoke-on .on-event {
  display: flex;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #bbb;
  margin-bottom: 0.2em;
}

.xw-sb__invoke-on .on-event__name {
  min-width: 120px;
  max-width: 120px;
  width: 120px;
  padding-top: 0.2em;
  font-weight: 900;
  font-size: 14px;
}

.xw-sb__invoke-on .on-event__name div {
  display: flex;
  justify-content: flex-start;
}

.xw-sb__invoke-on .on-event__name button {
  font-size: 10px;
}

.xw-sb__invoke-on .on-event__transitions {
  display: flex;
  width: 100%;
}

/* --- Action Editor ------------------------------------------------------- */
.xw-sb__action-editor {
  display: flex;
}

.xw-sb__action-editor .assign-key div {
  display: flex;
}

/* --- Entry Choose Editor ------------------------------------------------- */
.xw-sb__entry-choose {
  padding: 0 1em 0.5em;
  background: #f0f0f0;
  overflow-x: scroll;
}

.xw-sb__entry-choose .on-event {
  display: flex;
  padding-bottom: 0.2em;
  margin-bottom: 0.2em;
}

.xw-sb__entry-choose .on-event__name {
  min-width: 80px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  padding-top: 0.2em;
  font-weight: 900;
  font-size: 14px;
}

.xw-sb__entry-choose .on-event__name div {
  display: flex;
  justify-content: flex-start;
}

.xw-sb__entry-choose .on-event__name button {
  font-size: 10px;
}

.xw-sb__entry-choose .on-event__transitions {
  display: flex;
  width: 100%;
}

.xw-sb__entry-choose .entry__add button {
  font-size: 12px;
}

/* --- JSON Schema Builder ------------------------------------------------- */
.xw-sb__json-schema .json-schema__property {
  display: flex;
  margin-bottom: 8px;
  padding: 0 8px;
  border-left: 2px solid #ccc;
}

.xw-sb__json-schema .json-schema__property__key {
  display: flex;
  min-width: 150px;
  max-width: 150px;
  overflow: hidden;
  font-weight: 900;
}

.xw-sb__json-schema .json-schema__property__key.add-property:hover {
  text-decoration: underline;
  cursor: pointer;
}

.xw-sb__json-schema .json-schema__property__config {
  display: flex;
}

.xw-sb__json-schema .json-schema__property__config__type {
  margin-right: 24px;
}

.xw-sb__json-schema .json-schema__property__config__default {
  font-style: italic;
}

.xw-sb__json-schema .json-schema__property__config__default input {
  margin-left: 8px;
}

.xw-sb__json-schema .json-schema__object-properties-editor {
  margin-left: 64px;
  margin-bottom: 18px;
  border-bottom: 2px dashed #eee;
}

.xw-sb__json-schema .json-schema__property__config__delete {
  margin-right: 24px;
}