/* ❤️ */
/* Property Editor - Conditional Expression Composer. Break expression onto new lines and indent.*/

/* Make expressions indented */
❤️ codelesslove,
.property-editor-2 .viewport .expression-composer .nested {
  display: block;
}
❤️ codelesslove,
.property-editor-2 .viewport .expression-composer .nested .nested .nested {
    margin-left: 1em;
}
/* we need to match a .dynamic which is after a .nested and before a .nested. since we can't do that with css, we do this, then undo the margin below. */
❤️ codelesslove,
.property-editor-2 .viewport .expression-composer .nested + .dynamic {
    margin-left: 2em;/* Indent AND and OR */
}
❤️ codelesslove,
.property-editor-2 .viewport .expression-composer .nested.dynamic + .dynamic,
.property-editor-2 .viewport .expression-composer .nested .parens.dynamic,
.property-editor-2 .viewport .expression-composer .❤️collapsed .nested + .dynamic {
    margin-left: 0;/* undo indentation meant only for AND and OR on their own line*/
}
❤️ codelesslove,
.property-editor-2 .viewport .expression-composer .parens.parens-transparent {
  opacity: 1;
}

.property-editor-2 .viewport .expression-composer .nested.hovering > .parens-left:hover,
.property-editor-2 .viewport .expression-composer .nested.hovering > .parens-left:hover ~ .parens-right {
  color: #cce5ff;
}
/* color when parens are hovered */
❤️ codelesslove,
.property-editor-2 .viewport .expression-composer .nested .❤️collapser:hover,
.property-editor-2 .viewport .expression-composer.hover_fade_out:hover .hovering .❤️collapser:hover,
.property-editor-2 .viewport .expression-composer .nested .❤️collapser:hover ~ .parens-left,
.property-editor-2 .viewport .expression-composer .nested .❤️collapser:hover ~ .parens-right {
  color: rgb(204, 229, 255);
}

/* Collapsing: show collapse icon triangles */
❤️ codelesslove,
.property-editor-2 .viewport .expression-composer .nested .❤️collapser {
  display: inline-block;
  color: #67b3ff;
}
/* Collapsing: when collapsing, make content all in one line and clip the overflow */
❤️ codelesslove,
.property-editor-2 .viewport .expression-composer .nested.❤️collapsed {
    white-space: nowrap;
    width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: clip;
}
❤️ codelesslove,
.property-editor-2 .viewport .expression-composer .nested.❤️collapsed div {
  display: inline;
}
❤️ codelesslove,
.property-editor-2 .viewport .expression-composer .nested.❤️collapsed div .❤️collapser {
  display: none;/* don't show the icons when collapsed */
}
❤️ codelesslove,
.property-editor-2 .viewport .expression-composer .nested.❤️collapsed .nested {
  margin-left: 0; /* undo the gap meant for multi-line */
}
/* Paren color when parent is hovered */
❤️ codelesslove,
.property-editor-2 .viewport .expression-composer.hover_fade_out:hover .hovering .❤️collapser {
    color: #fab515;
    color: rgba(250, 181, 21, 1);
}
/* Paren color when child is hovered */
❤️ codelesslove,
.property-editor-2 .viewport .expression-composer.hover_fade_out:hover .❤️collapser {
    color: rgba(250, 181, 21, 0.6);
}
