From 59461d6b0639e88f23f430a8a7514d6bd06fb138 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 5 Sep 2024 17:12:07 -0700
Subject: [PATCH] Enhancements for Derived Telemetry object - Closes #7823 -
 Final sanding and polishing. - New discrete item style `c-output-featured`
 added to controls.scss   - Applied to 'Current Output' section of both
 Derived Telemetry and Condition Sets. - TODOs:   - [ ] Check for low-risk
 regressions in Condition Sets browse and edit modes.   - [ ] New tests for
 ObjectPathString.vue component.

---
 src/plugins/comps/components/CompsView.vue    |   47 +-
 src/plugins/comps/components/comps.scss       |   82 +-
 .../condition/components/ConditionSet.vue     |    6 +-
 .../condition/components/conditionals.scss    |   15 +-
 src/styles/_controls.scss                     | 1815 +++++++++--------
 5 files changed, 1014 insertions(+), 951 deletions(-)

diff --git a/src/plugins/comps/components/CompsView.vue b/src/plugins/comps/components/CompsView.vue
index 5dcc55be00..ccc7f2bacb 100644
--- a/src/plugins/comps/components/CompsView.vue
+++ b/src/plugins/comps/components/CompsView.vue
@@ -22,10 +22,10 @@
 
 <template>
   <div class="c-comps" aria-label="Derived Telemetry">
-    <section class="c-cs__current-output c-section">
-      <div class="c-cs__content c-cs__current-output-value">
-        <span class="c-cs__current-output-value__label">Current Output</span>
-        <span class="c-cs__current-output-value__value" aria-label="Current Output Value">
+    <section class="c-section c-comps-output">
+      <div class="c-output-featured">
+        <span class="c-output-featured__label">Current Output</span>
+        <span class="c-output-featured__value" aria-label="Current Output Value">
           <template
             v-if="testDataApplied && currentTestOutput !== undefined && currentTestOutput !== null"
           >
@@ -115,27 +115,30 @@
         Drag in telemetry to add references for an expression.
       </div>
 
-      <div class="c-cs__content">
-        <textarea
-          v-if="parameters?.length && isEditing"
-          v-model="expression"
-          class="expression-input"
-          placeholder="Enter an expression"
-          @change="updateExpression"
-        ></textarea>
-        <div v-else>
+      <textarea
+        v-if="parameters?.length && isEditing"
+        v-model="expression"
+        class="c-comps__expression-value"
+        placeholder="Enter an expression"
+        @change="updateExpression"
+      ></textarea>
+      <div v-else>
+        <div class="c-comps__expression-value">
           {{ expression }}
         </div>
-        <div v-if="expression && expressionOutput && isEditing" class="c-expression-output-bad">
-          {{ expressionOutput }}
-        </div>
-        <div
-          v-else-if="expression && !expressionOutput && isEditing"
-          class="c-expression-output-good"
-        >
-          Valid Expression
-        </div>
       </div>
+      <span
+        v-if="expression && expressionOutput"
+        class="icon-alert-triangle c-comps__expression-msg --bad"
+      >
+        Invalid: {{ expressionOutput }}
+      </span>
+      <span
+        v-else-if="expression && !expressionOutput && isEditing"
+        class="c-comps__expression-msg --good"
+      >
+        Expression valid
+      </span>
     </section>
   </div>
 </template>
diff --git a/src/plugins/comps/components/comps.scss b/src/plugins/comps/components/comps.scss
index 27ea64ab98..3003c577d6 100644
--- a/src/plugins/comps/components/comps.scss
+++ b/src/plugins/comps/components/comps.scss
@@ -19,13 +19,34 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+@mixin expressionMsg($fg, $bg) {
+  $op: 0.4;
+  color: rgba($fg, $op * 1.5);
+  background: rgba($bg, $op);
+}
+
 .c-comps {
+  display: flex;
+  flex-direction: column;
+  gap: $interiorMarginLg;
+
   .is-editing & {
     padding: $interiorMargin;
   }
 
-  &__refs-and-controls {
+  &__output {
+    display: flex;
+    align-items: baseline;
+    gap: $interiorMargin;
 
+    &-label {
+      flex: 0 0 auto;
+      text-transform: uppercase;
+    }
+
+    &-value {
+      flex: 0 1 auto;
+    }
   }
 
   &__section,
@@ -42,20 +63,6 @@
     grid-template-columns: max-content max-content min-content 1fr;
     padding: $interiorMargin;
     line-height: 170%; // Aligns text with controls like selects
-
-    //&__definition,
-    //&__test-value {
-    //  display: flex;
-    //  align-items: flex-start;
-    //  gap: $interiorMargin;
-    //}
-    //
-    //&__definition {
-    //}
-    //
-    //&__test-value {
-    //
-    //}
   }
 
   &__path-and-field {
@@ -65,10 +72,37 @@
   }
 
   &__expression {
-    textarea {
-      resize: vertical;
+    *[class*=value] {
+      font-family: monospace;
+      //font-size: 1.1em;
+      resize: vertical; // Only applies to textarea
+    }
+    div[class*=value] {
+      padding: $interiorMargin;
+    }
+  }
+
+  &__expression-msg {
+    @include expressionMsg($colorOkFg, $colorOk);
+    border-radius: $basicCr;
+    display: flex; // Creates hanging indent from :before icon
+    padding: $interiorMarginSm $interiorMarginLg $interiorMarginSm $interiorMargin;
+    //text-wrap: normal;
+    max-width: max-content;
+
+    &:before {
+      content: $glyph-icon-check;
+      font-family: symbolsfont;
+      margin-right: $interiorMarginSm;
     }
 
+    &.--bad {
+      @include expressionMsg($colorErrorFg, $colorError);
+
+      &:before {
+        content: $glyph-icon-alert-triangle;
+      }
+    }
   }
 
   .--em {
@@ -76,17 +110,3 @@
     //font-weight: bold;
   }
 }
-
-
-/************************************ OLD */
-.c-expression-output-good {
-  width: 100%;
-  margin-right: 10px;
-  color: green;
-}
-
-.c-expression-output-bad {
-  width: 100%;
-  margin-right: 10px;
-  color: red;
-}
diff --git a/src/plugins/condition/components/ConditionSet.vue b/src/plugins/condition/components/ConditionSet.vue
index bdefc5ff5c..cb473c10b9 100644
--- a/src/plugins/condition/components/ConditionSet.vue
+++ b/src/plugins/condition/components/ConditionSet.vue
@@ -23,9 +23,9 @@
 <template>
   <div class="c-cs" :class="{ 'is-stale': isStale }" aria-label="Condition Set">
     <section class="c-cs__current-output c-section">
-      <div class="c-cs__content c-cs__current-output-value">
-        <span class="c-cs__current-output-value__label">Current Output</span>
-        <span class="c-cs__current-output-value__value" aria-label="Current Output Value">
+      <div class="c-output-featured">
+        <span class="c-output-featured__label">Current Output</span>
+        <span class="c-output-featured__value" aria-label="Current Output Value">
           <template v-if="currentConditionOutput">
             {{ currentConditionOutput }}
           </template>
diff --git a/src/plugins/condition/components/conditionals.scss b/src/plugins/condition/components/conditionals.scss
index 10ea1169aa..090cd41f67 100644
--- a/src/plugins/condition/components/conditionals.scss
+++ b/src/plugins/condition/components/conditionals.scss
@@ -51,6 +51,7 @@
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
+  gap: $interiorMargin;
   height: 100%;
   overflow: hidden;
 
@@ -89,23 +90,24 @@
   &__conditions {
     flex: 1 1 auto;
 
-    > * + * {
-      margin-top: $interiorMarginSm;
-    }
+    //> * + * {
+    //  margin-top: $interiorMarginSm;
+    //}
   }
 
   &__content {
     display: flex;
     flex-direction: column;
+    gap: $interiorMarginSm;
     flex: 0 1 auto;
     overflow: hidden;
 
     > * {
       flex: 0 0 auto;
       overflow: hidden;
-      + * {
-        margin-top: $interiorMarginSm;
-      }
+      //+ * {
+      //  margin-top: $interiorMarginSm;
+      //}
     }
 
     .c-button {
@@ -121,6 +123,7 @@
   section {
     display: flex;
     flex-direction: column;
+    gap: $interiorMargin;
     overflow: hidden;
   }
 
diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss
index 45cbca3ac9..a6800c1e62 100644
--- a/src/styles/_controls.scss
+++ b/src/styles/_controls.scss
@@ -24,234 +24,235 @@
 
 /******************************************************** CONTROL-SPECIFIC MIXINS */
 @mixin menuOuter() {
-  border-radius: $basicCr;
-  box-shadow: $shdwMenu;
-  @if $shdwMenuInner != none {
-    box-shadow: $shdwMenuInner, $shdwMenu;
-  }
-  background: $colorMenuBg;
-  backdrop-filter: blur($formRowCtrlsH);
-  color: $colorMenuFg;
-  text-shadow: $shdwMenuText;
-  padding: $interiorMarginSm;
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  z-index: 100;
+    border-radius: $basicCr;
+    box-shadow: $shdwMenu;
+    @if $shdwMenuInner != none {
+        box-shadow: $shdwMenuInner, $shdwMenu;
+    }
+    background: $colorMenuBg;
+    backdrop-filter: blur($formRowCtrlsH);
+    color: $colorMenuFg;
+    text-shadow: $shdwMenuText;
+    padding: $interiorMarginSm;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    z-index: 100;
 
-  > * {
-    flex: 0 0 auto;
-  }
+    > * {
+        flex: 0 0 auto;
+    }
 }
 
 @mixin menuPositioning() {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  z-index: 100;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    z-index: 100;
 
-  > * {
-    flex: 0 0 auto;
-  }
+    > * {
+        flex: 0 0 auto;
+    }
 }
 
 @mixin menuInner() {
-  li {
-    @include cControl();
-    justify-content: start;
-    cursor: pointer;
-    display: flex;
-    padding: nth($menuItemPad, 1) nth($menuItemPad, 2);
-    white-space: nowrap;
+    li {
+        @include cControl();
+        justify-content: start;
+        cursor: pointer;
+        display: flex;
+        padding: nth($menuItemPad, 1) nth($menuItemPad, 2);
+        white-space: nowrap;
 
-    @include hover {
-      background: $colorMenuHovBg;
-      color: $colorMenuHovFg;
-      &:before {
-        color: $colorMenuHovIc !important;
-      }
+        @include hover {
+            background: $colorMenuHovBg;
+            color: $colorMenuHovFg;
+            &:before {
+                color: $colorMenuHovIc !important;
+            }
+        }
+
+        &:not(.c-menu--no-icon &) {
+            &:before {
+                color: $colorMenuIc;
+                font-size: 1em;
+                margin-right: $interiorMargin;
+                min-width: 1em;
+            }
+
+            &:not([class*='icon']):before {
+                content: ''; // Enable :before so that menu items without an icon still indent properly
+            }
+        }
     }
-
-    &:not(.c-menu--no-icon &) {
-      &:before {
-        color: $colorMenuIc;
-        font-size: 1em;
-        margin-right: $interiorMargin;
-        min-width: 1em;
-      }
-
-      &:not([class*='icon']):before {
-        content: ''; // Enable :before so that menu items without an icon still indent properly
-      }
-    }
-  }
 }
 
 /******************************************************** BUTTONS */
 // Optionally can include icon in :before via markup
 button {
-  @include htmlInputReset();
+    @include htmlInputReset();
 }
 
 .c-button,
 .c-button--menu {
-  @include cButton();
+    @include cButton();
 }
 
 .c-button {
-  &--menu {
-    &:after {
-      content: $glyph-icon-arrow-down;
-      font-family: symbolsfont;
-      opacity: 0.5;
-    }
-  }
-
-  &--swatched {
-    // Used with c-button--menu: a visual button with a larger swatch element adjacent to an icon
-    .c-swatch {
-      $d: 12px;
-      margin-left: $interiorMarginSm;
-      height: $d;
-      width: $d;
-    }
-  }
-
-  &[class*='__collapse-button'] {
-    box-shadow: none;
-    background: $splitterBtnColorBg;
-    color: $splitterBtnColorFg;
-    border-radius: $smallCr;
-    line-height: 90%;
-    padding: 3px 10px;
-
-    @include desktop() {
-      font-size: 6px;
+    &--menu {
+        &:after {
+            content: $glyph-icon-arrow-down;
+            font-family: symbolsfont;
+            opacity: 0.5;
+        }
     }
 
-    &:before {
-      content: $glyph-icon-arrow-down;
-      font-size: 1.1em;
+    &--swatched {
+        // Used with c-button--menu: a visual button with a larger swatch element adjacent to an icon
+        .c-swatch {
+            $d: 12px;
+            margin-left: $interiorMarginSm;
+            height: $d;
+            width: $d;
+        }
     }
-  }
 
-  &.is-active {
-    background: $colorBtnActiveBg;
-    color: $colorBtnActiveFg;
-  }
+    &[class*='__collapse-button'] {
+        box-shadow: none;
+        background: $splitterBtnColorBg;
+        color: $splitterBtnColorFg;
+        border-radius: $smallCr;
+        line-height: 90%;
+        padding: 3px 10px;
 
-  &.is-selected {
-    background: $colorBtnSelectedBg;
-    color: $colorBtnSelectedFg;
-  }
+        @include desktop() {
+            font-size: 6px;
+        }
+
+        &:before {
+            content: $glyph-icon-arrow-down;
+            font-size: 1.1em;
+        }
+    }
+
+    &.is-active {
+        background: $colorBtnActiveBg;
+        color: $colorBtnActiveFg;
+    }
+
+    &.is-selected {
+        background: $colorBtnSelectedBg;
+        color: $colorBtnSelectedFg;
+    }
 }
 
 /********* Icon Buttons and Links */
 .c-click-icon {
-  @include cClickIcon();
+    @include cClickIcon();
 
-  &--section-collapse {
-    color: inherit;
-    display: block;
-    transition: transform $transOutTime;
-    &:before {
-      content: $glyph-icon-arrow-down;
-      font-family: symbolsfont;
-    }
+    &--section-collapse {
+        color: inherit;
+        display: block;
+        transition: transform $transOutTime;
 
-    &.is-collapsed {
-      transform: rotate(180deg);
+        &:before {
+            content: $glyph-icon-arrow-down;
+            font-family: symbolsfont;
+        }
+
+        &.is-collapsed {
+            transform: rotate(180deg);
+        }
     }
-  }
 }
 
 .c-click-link,
 .c-icon-link {
-  // A clickable element, typically inline, with an icon and label
-  @include cControl();
-  cursor: pointer;
+    // A clickable element, typically inline, with an icon and label
+    @include cControl();
+    cursor: pointer;
 }
 
 .c-icon-button,
 .c-click-swatch {
-  @include cClickIconButton();
+    @include cClickIconButton();
 
-  &--menu {
-    @include hasMenu();
-  }
+    &--menu {
+        @include hasMenu();
+    }
 }
 
 .c-icon-button--disabled {
-  @include cClickIconButtonLayout();
+    @include cClickIconButtonLayout();
 }
 
 .c-icon-link {
-  &:before {
-    // Icon
-    //color: $colorBtnMajorBg;
-  }
+    &:before {
+        // Icon
+        //color: $colorBtnMajorBg;
+    }
 }
 
 .c-icon-button {
-  [class*='label'] {
-    padding: 1px 0;
-  }
-
-  &--mixed {
-    @include mixedBg();
-  }
-
-  &--swatched {
-    // Color control, show swatch element
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: center;
-    justify-content: center;
-
-    > [class*='swatch'] {
-      box-shadow: inset rgba($editUIBaseColorFg, 0.2) 0 0 0 1px;
-      flex: 0 0 auto;
-      height: 5px;
-      width: 100%;
-      margin-top: 1px;
+    [class*='label'] {
+        padding: 1px 0;
     }
 
-    &:before {
-      // Reduce size of icon to make a bit of room
-      flex: 1 1 auto;
-      font-size: 1.1em;
+    &--mixed {
+        @include mixedBg();
     }
-  }
 
-  &--sm {
-    padding: $interiorMarginSm $interiorMargin;
-  }
+    &--swatched {
+        // Color control, show swatch element
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        justify-content: center;
+
+        > [class*='swatch'] {
+            box-shadow: inset rgba($editUIBaseColorFg, 0.2) 0 0 0 1px;
+            flex: 0 0 auto;
+            height: 5px;
+            width: 100%;
+            margin-top: 1px;
+        }
+
+        &:before {
+            // Reduce size of icon to make a bit of room
+            flex: 1 1 auto;
+            font-size: 1.1em;
+        }
+    }
+
+    &--sm {
+        padding: $interiorMarginSm $interiorMargin;
+    }
 }
 
 .c-list-button {
-  @include cControl();
-  color: $colorBodyFg;
-  cursor: pointer;
-  justify-content: start;
-  padding: $interiorMargin;
+    @include cControl();
+    color: $colorBodyFg;
+    cursor: pointer;
+    justify-content: start;
+    padding: $interiorMargin;
 
-  > * + * {
-    margin-left: $interiorMargin;
-  }
+    > * + * {
+        margin-left: $interiorMargin;
+    }
 
-  @include hover() {
-    background: $colorItemTreeHoverBg;
-  }
+    @include hover() {
+        background: $colorItemTreeHoverBg;
+    }
 
-  .c-button {
-    flex: 0 0 auto;
-  }
+    .c-button {
+        flex: 0 0 auto;
+    }
 }
 
 .c-not-button {
-  // Use within a holder that's clickable; use to indicate interactability
-  @include cButtonLayout();
-  cursor: pointer;
+    // Use within a holder that's clickable; use to indicate interactability
+    @include cButtonLayout();
+    cursor: pointer;
 }
 
 /******************************************************** DISCLOSURE CONTROLS */
@@ -259,97 +260,100 @@ button {
 // Provides a downward arrow icon that when clicked displays additional options and/or info.
 // Always placed AFTER an element
 .c-disclosure-button {
-  @include cClickIcon();
-  margin-left: $interiorMarginSm;
+    @include cClickIcon();
+    margin-left: $interiorMarginSm;
 
-  &:before {
-    content: $glyph-icon-arrow-down;
-    font-family: symbolsfont;
-    font-size: 0.7em;
-  }
+    &:before {
+        content: $glyph-icon-arrow-down;
+        font-family: symbolsfont;
+        font-size: 0.7em;
+    }
 }
+
 /********* Disclosure Triangle */
 // Provides an arrow icon that when clicked expands an element to reveal its contents.
 // Used in tree items, plot legends. Always placed BEFORE an element.
 .c-disclosure-triangle {
-  $d: 12px;
-  color: $colorDisclosureCtrl;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  width: $d;
-  position: relative;
-  visibility: hidden;
+    $d: 12px;
+    color: $colorDisclosureCtrl;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: $d;
+    position: relative;
+    visibility: hidden;
 
-  &.is-enabled {
-    cursor: pointer;
-    visibility: visible;
+    &.is-enabled {
+        cursor: pointer;
+        visibility: visible;
 
-    &:hover {
-      color: $colorDisclosureCtrlHov;
+        &:hover {
+            color: $colorDisclosureCtrlHov;
+        }
+
+        &:before {
+            $s: 0.65;
+            content: $glyph-icon-arrow-right-equilateral;
+            display: block;
+            font-family: symbolsfont;
+            font-size: 1rem * $s;
+        }
     }
 
-    &:before {
-      $s: 0.65;
-      content: $glyph-icon-arrow-right-equilateral;
-      display: block;
-      font-family: symbolsfont;
-      font-size: 1rem * $s;
+    &--expanded {
+        &:before {
+            transform: rotate(90deg);
+        }
     }
-  }
-
-  &--expanded {
-    &:before {
-      transform: rotate(90deg);
-    }
-  }
 }
 
 /******************************************************** DRAG AFFORDANCES */
 .c-grippy {
-  $d: 10px;
-  @include grippy($c: $colorItemTreeVC, $dir: 'y');
-  width: $d;
-  height: $d;
+    $d: 10px;
+    @include grippy($c: $colorItemTreeVC, $dir: 'y');
+    width: $d;
+    height: $d;
 
-  &--vertical-drag {
-    cursor: ns-resize;
-  }
+    &--vertical-drag {
+        cursor: ns-resize;
+    }
 }
 
 /******************************************************** SECTION */
 section {
-  flex: 0 1 auto;
-  overflow: hidden;
-  + section {
-    margin-top: $interiorMargin;
-  }
+    flex: 0 1 auto;
+    overflow: hidden;
 
-  .c-section__header {
-    @include propertiesHeader();
-    display: flex;
-    flex: 0 0 auto;
-    align-items: center;
-    margin-bottom: $interiorMargin;
-
-    > * + * {
-      margin-left: $interiorMarginSm;
+    + section {
+        //margin-top: $interiorMargin;
     }
-  }
 
-  > [class*='__label'] {
-    flex: 1 1 auto;
-    text-transform: uppercase;
-  }
+    .c-section__header {
+        @include propertiesHeader();
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        gap: $interiorMarginSm;
+        //margin-bottom: $interiorMargin;
+        //
+        //> * + * {
+        //    margin-left: $interiorMarginSm;
+        //}
+    }
+
+    > [class*='__label'] {
+        flex: 1 1 auto;
+        text-transform: uppercase;
+    }
 }
 
 /******************************************************** FORM ELEMENTS */
 input,
 textarea {
-  font-family: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
 }
 
 input[type='text'],
@@ -358,10 +362,11 @@ input[type='number'],
 input[type='password'],
 input[type='date'],
 textarea {
-  @include reactive-input();
-  &.numeric {
-    text-align: right;
-  }
+    @include reactive-input();
+
+    &.numeric {
+        text-align: right;
+    }
 }
 
 input[type='text'],
@@ -369,848 +374,880 @@ input[type='search'],
 input[type='password'],
 input[type='date'],
 textarea {
-  padding: $inputTextP;
+    padding: $inputTextP;
 }
 
 .c-input {
-  &--flex {
-    width: 100%;
-    min-width: 20px;
-  }
-
-  &--datetime {
-    // Sized for values such as 2018-09-28 22:32:33.468Z
-    width: 160px;
-  }
-
-  &--hrs-min-sec {
-    // Sized for values such as 00:25:00
-    width: 60px;
-  }
-
-  &-inline,
-  &--inline {
-    // A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
-    @include inlineInput;
-
-    &:hover,
-    &:focus {
-      background: $colorInputBg;
-      padding-left: $inputTextPLeftRight;
-      padding-right: $inputTextPLeftRight;
+    &--flex {
+        width: 100%;
+        min-width: 20px;
     }
-  }
 
-  &--labeled {
-    // TODO: replace .c-labeled-input with this
+    &--datetime {
+        // Sized for values such as 2018-09-28 22:32:33.468Z
+        width: 160px;
+    }
+
+    &--hrs-min-sec {
+        // Sized for values such as 00:25:00
+        width: 60px;
+    }
+
+    &-inline,
+    &--inline {
+        // A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
+        @include inlineInput;
+
+        &:hover,
+        &:focus {
+            background: $colorInputBg;
+            padding-left: $inputTextPLeftRight;
+            padding-right: $inputTextPLeftRight;
+        }
+    }
+
+    &--labeled {
+        // TODO: replace .c-labeled-input with this
+        // An input used in the Toolbar
+        // Assumes label is before the input
+        @include cControl();
+
+        input {
+            margin-left: $interiorMarginSm;
+        }
+    }
+
+    &--sm {
+        // Small inputs, like small numerics
+        width: 40px;
+    }
+
+    &--md {
+        // Smallish inputs, like numerics or short text
+        width: 80px;
+    }
+
+    &--autocomplete {
+        &__wrapper {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            overflow: hidden;
+            width: 100%;
+        }
+
+        &__input {
+            min-width: 100px;
+            width: 100%;
+
+            // Fend off from afford-arrow
+            padding-right: 2.5em !important;
+        }
+
+        &__options {
+            @include menuOuter();
+            @include menuInner();
+            display: flex;
+
+            ul {
+                flex: 1 1 auto;
+                overflow: auto;
+            }
+
+            li {
+                &:before {
+                    color: var(--optionIconColor) !important;
+                    font-size: 0.8em !important;
+                }
+            }
+        }
+
+        &__afford-arrow {
+            $p: 2px;
+            font-size: 0.8em;
+            padding-bottom: $p;
+            padding-top: $p;
+            position: absolute;
+            right: 2px;
+            z-index: 2;
+        }
+    }
+}
+
+input[type='number'].c-input-number--no-spinners {
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    -moz-appearance: textfield;
+}
+
+.c-labeled-input {
     // An input used in the Toolbar
     // Assumes label is before the input
     @include cControl();
 
     input {
-      margin-left: $interiorMarginSm;
+        margin-left: $interiorMarginSm;
     }
-  }
-
-  &--sm {
-    // Small inputs, like small numerics
-    width: 40px;
-  }
-
-  &--md {
-    // Smallish inputs, like numerics or short text
-    width: 80px;
-  }
-
-  &--autocomplete {
-    &__wrapper {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      overflow: hidden;
-      width: 100%;
-    }
-
-    &__input {
-      min-width: 100px;
-      width: 100%;
-
-      // Fend off from afford-arrow
-      padding-right: 2.5em !important;
-    }
-
-    &__options {
-      @include menuOuter();
-      @include menuInner();
-      display: flex;
-
-      ul {
-        flex: 1 1 auto;
-        overflow: auto;
-      }
-
-      li {
-        &:before {
-          color: var(--optionIconColor) !important;
-          font-size: 0.8em !important;
-        }
-      }
-    }
-
-    &__afford-arrow {
-      $p: 2px;
-      font-size: 0.8em;
-      padding-bottom: $p;
-      padding-top: $p;
-      position: absolute;
-      right: 2px;
-      z-index: 2;
-    }
-  }
-}
-
-input[type='number'].c-input-number--no-spinners {
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  -moz-appearance: textfield;
-}
-
-.c-labeled-input {
-  // An input used in the Toolbar
-  // Assumes label is before the input
-  @include cControl();
-
-  input {
-    margin-left: $interiorMarginSm;
-  }
 }
 
 .c-scrollcontainer {
-  @include nice-input();
-  margin-top: $interiorMargin;
-  background: $scrollContainer;
-  border-radius: $controlCr;
-  overflow: auto;
-  padding: $interiorMarginSm;
+    @include nice-input();
+    margin-top: $interiorMargin;
+    background: $scrollContainer;
+    border-radius: $controlCr;
+    overflow: auto;
+    padding: $interiorMarginSm;
 }
 
 // SELECTS
 select {
-  @include appearanceNone();
-  background-color: $colorSelectBg;
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{svgColorFromHex($colorSelectArw)}' d='M5 5l5-5H0z'/%3e%3c/svg%3e");
-  color: $colorSelectFg;
-  box-shadow: $shdwSelect;
-  background-repeat: no-repeat, no-repeat;
-  background-position:
-    right 0.4em top 80%,
+    @include appearanceNone();
+    background-color: $colorSelectBg;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{svgColorFromHex($colorSelectArw)}' d='M5 5l5-5H0z'/%3e%3c/svg%3e");
+    color: $colorSelectFg;
+    box-shadow: $shdwSelect;
+    background-repeat: no-repeat, no-repeat;
+    background-position: right 0.4em top 80%,
     0 0;
-  border: none;
-  border-radius: $controlCr;
-  padding: 2px 20px 2px $interiorMargin;
+    border: none;
+    border-radius: $controlCr;
+    padding: 2px 20px 2px $interiorMargin;
 
-  *,
-  option {
-    background: $colorBtnBg;
-    color: $colorBtnFg;
-  }
+    *,
+    option {
+        background: $colorBtnBg;
+        color: $colorBtnFg;
+    }
 }
 
 // CHECKBOX LISTS
 // __input followed by __label
 .c-checkbox-list {
-  // Rows
-  &__row + &__row {
-    margin-top: $interiorMarginSm;
-  }
-
-  // input and label in each __row
-  &__row {
-    > * + * {
-      margin-left: $interiorMargin;
+    // Rows
+    &__row + &__row {
+        margin-top: $interiorMarginSm;
     }
-  }
 
-  li {
-    white-space: nowrap;
-  }
+    // input and label in each __row
+    &__row {
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+    }
+
+    li {
+        white-space: nowrap;
+    }
 }
 
 /******************************************************** TABS */
 .c-tabs {
-  // Single horizontal strip of tabs, with a bottom divider line
-  @include userSelectNone();
-  display: flex;
-  flex: 0 0 auto;
-  flex-wrap: wrap;
-  position: relative; // Required in case this is applied to a <ul>
+    // Single horizontal strip of tabs, with a bottom divider line
+    @include userSelectNone();
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    position: relative; // Required in case this is applied to a <ul>
 
-  &:before {
-    // Separator line at bottom of tabs
-    content: '';
-    display: block;
-    height: 1px;
-    width: 100%;
-    background: $colorTabsBaseline;
-    position: absolute;
-    bottom: 0px;
-    z-index: 1;
-  }
+    &:before {
+        // Separator line at bottom of tabs
+        content: '';
+        display: block;
+        height: 1px;
+        width: 100%;
+        background: $colorTabsBaseline;
+        position: absolute;
+        bottom: 0px;
+        z-index: 1;
+    }
 }
 
 .c-tab {
-  // Used in Tab View, generic tabs
-  $notchSize: 7px;
-  $clipPath: polygon(
-    0% 0%,
-    calc(100% - #{$notchSize}) 0%,
-    100% #{$notchSize},
-    100% calc(100% - #{$notchSize}),
-    100% 100%,
-    0% 100%
-  );
-  background: $colorTabBg;
-  color: $colorTabFg;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  flex: 1 1 auto;
-  margin: 1px 1px 0 0;
-  padding: $interiorMargin $interiorMarginLg;
-  white-space: nowrap;
-  clip-path: $clipPath;
-  -webkit-clip-path: $clipPath; // Safari
+    // Used in Tab View, generic tabs
+    $notchSize: 7px;
+    $clipPath: polygon(
+                    0% 0%,
+                    calc(100% - #{$notchSize}) 0%,
+                    100% #{$notchSize},
+                    100% calc(100% - #{$notchSize}),
+                    100% 100%,
+                    0% 100%
+    );
+    background: $colorTabBg;
+    color: $colorTabFg;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    margin: 1px 1px 0 0;
+    padding: $interiorMargin $interiorMarginLg;
+    white-space: nowrap;
+    clip-path: $clipPath;
+    -webkit-clip-path: $clipPath; // Safari
 
-  > * + * {
-    margin-left: $interiorMargin;
-  }
+    > * + * {
+        margin-left: $interiorMargin;
+    }
 
-  @include hover() {
-    box-shadow: $shdwBtnHov;
-  }
+    @include hover() {
+        box-shadow: $shdwBtnHov;
+    }
 
-  &.is-current {
-    background: $colorTabCurrentBg;
-    color: $colorTabCurrentFg;
-  }
+    &.is-current {
+        background: $colorTabCurrentBg;
+        color: $colorTabCurrentFg;
+    }
 }
 
 /******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */
 .c-hyperlink {
-  display: inline-block;
-  color: $colorKey;
+    display: inline-block;
+    color: $colorKey;
 
-  &--button {
-    @include cButton();
-  }
+    &--button {
+        @include cButton();
+    }
 }
 
 .c-so-view--hyperlink.c-so-view--no-frame {
-  .c-hyperlink--button {
-    @include abs();
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-  }
+    .c-hyperlink--button {
+        @include abs();
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+    }
 
-  .c-so-view__frame-controls {
-    display: none;
-  }
+    .c-so-view__frame-controls {
+        display: none;
+    }
 }
 
 /******************************************************** MENUS */
 .c-menu {
-  @include menuOuter();
-  @include menuPositioning();
-  @include menuInner();
+    @include menuOuter();
+    @include menuPositioning();
+    @include menuInner();
 
-  &__section-hint {
-    $m: $interiorMargin;
-    margin: 0 0 $m 0;
-    padding: $m nth($menuItemPad, 2) 0 nth($menuItemPad, 2);
+    &__section-hint {
+        $m: $interiorMargin;
+        margin: 0 0 $m 0;
+        padding: $m nth($menuItemPad, 2) 0 nth($menuItemPad, 2);
 
-    opacity: 0.6;
-    font-size: 0.9em;
-    font-style: italic;
-  }
+        opacity: 0.6;
+        font-size: 0.9em;
+        font-style: italic;
+    }
 
-  &__section-separator {
-    $m: $interiorMargin;
-    border-top: 1px solid $colorInteriorBorder;
-    margin: $m 0;
-    padding: 0 nth($menuItemPad, 2) 0 nth($menuItemPad, 2);
-  }
+    &__section-separator {
+        $m: $interiorMargin;
+        border-top: 1px solid $colorInteriorBorder;
+        margin: $m 0;
+        padding: 0 nth($menuItemPad, 2) 0 nth($menuItemPad, 2);
+    }
 }
 
 .c-super-menu {
-  // Two column layout, menu items on left with detail of hover element on right
-  $m: $interiorMarginLg;
-  @include menuOuter();
-  @include menuPositioning();
-  display: flex;
-  height: auto;
-  padding: $interiorMarginLg;
-  flex-direction: row;
-
-  > [class*='__'] {
-    //flex: 1 1 50%;
-    //&:first-child {
-    //  margin-right: $m;
-    //}
-
-    &:last-child {
-      //border-left: 1px solid $colorInteriorBorder;
-      //padding-left: $m;
-    }
-  }
-
-  &__menu {
-    @include menuInner();
-    flex: 1 1 50%;
-    margin-right: $m;
-    overflow: auto;
-
-    ul {
-      margin-right: $interiorMarginSm; // Fend off scrollbar
-    }
-
-    li {
-      border-radius: $controlCr;
-    }
-  }
-
-  &__item-description {
-    border-left: 1px solid $colorInteriorBorder;
-    flex: 1 1 50%;
-    padding-left: $m;
+    // Two column layout, menu items on left with detail of hover element on right
+    $m: $interiorMarginLg;
+    @include menuOuter();
+    @include menuPositioning();
     display: flex;
-    flex-direction: column;
-    justify-content: stretch;
+    height: auto;
+    padding: $interiorMarginLg;
+    flex-direction: row;
 
-    > * + * {
-      margin-top: $interiorMarginLg;
+    > [class*='__'] {
+        //flex: 1 1 50%;
+        //&:first-child {
+        //  margin-right: $m;
+        //}
+
+        &:last-child {
+            //border-left: 1px solid $colorInteriorBorder;
+            //padding-left: $m;
+        }
     }
 
-    .l-item-description {
-      &__icon {
-        min-height: 20%;
-        margin: 10% 25%;
-      }
+    &__menu {
+        @include menuInner();
+        flex: 1 1 50%;
+        margin-right: $m;
+        overflow: auto;
 
-      &__name {
-        color: $colorMenuFg;
-        flex: 0 0 auto;
-        font-size: 1.25em;
-      }
+        ul {
+            margin-right: $interiorMarginSm; // Fend off scrollbar
+        }
 
-      &__description {
-        font-size: $fontBaseSize;
-      }
+        li {
+            border-radius: $controlCr;
+        }
+    }
+
+    &__item-description {
+        border-left: 1px solid $colorInteriorBorder;
+        flex: 1 1 50%;
+        padding-left: $m;
+        display: flex;
+        flex-direction: column;
+        justify-content: stretch;
+
+        > * + * {
+            margin-top: $interiorMarginLg;
+        }
+
+        .l-item-description {
+            &__icon {
+                min-height: 20%;
+                margin: 10% 25%;
+            }
+
+            &__name {
+                color: $colorMenuFg;
+                flex: 0 0 auto;
+                font-size: 1.25em;
+            }
+
+            &__description {
+                font-size: $fontBaseSize;
+            }
+        }
     }
-  }
 }
 
 .c-super-menu--sm {
-  // Small version of the super menu, used by the compact Time Conductor
-  height: 120px;
-  width: 500px;
+    // Small version of the super menu, used by the compact Time Conductor
+    height: 120px;
+    width: 500px;
 
-  .c-super-menu__menu {
-    flex: 1 1 30%;
-  }
-
-  .c-super-menu__item-description {
-    flex: 1 1 70%;
-
-    [class*='__icon'] {
-      display: none !important;
+    .c-super-menu__menu {
+        flex: 1 1 30%;
     }
 
-    [class*='__name'] {
-      margin-top: 0 !important;
-    }
+    .c-super-menu__item-description {
+        flex: 1 1 70%;
 
-    [class*='__item-description'] {
-      min-width: 200px;
+        [class*='__icon'] {
+            display: none !important;
+        }
+
+        [class*='__name'] {
+            margin-top: 0 !important;
+        }
+
+        [class*='__item-description'] {
+            min-width: 200px;
+        }
     }
-  }
 }
 
 /******************************************************** CONTROL BARS */
 .c-control-bar {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 
-  > * + * {
-    margin-left: $interiorMarginSm;
-  }
+    > * + * {
+        margin-left: $interiorMarginSm;
+    }
 
-  &__label {
-    display: inline-block;
-    white-space: nowrap;
-  }
+    &__label {
+        display: inline-block;
+        white-space: nowrap;
+    }
 }
 
 /******************************************************** PALETTES */
 .c-palette {
-  display: flex;
-  flex-flow: column nowrap;
-  line-height: normal;
-
-  &__items {
-    display: grid;
-    grid-gap: 1px;
-    grid-template-columns: repeat(auto-fill, 12px);
-    flex: 1 1 auto;
-
-    .c-menu & {
-      min-width: $paletteMenuMinW;
-    }
-  }
-
-  &__item {
-    $d: 12px;
-    border: 1px solid transparent;
-    cursor: pointer;
     display: flex;
-    align-items: center;
-    align-content: center;
-    width: $d;
-    height: $d;
-    text-align: center;
+    flex-flow: column nowrap;
+    line-height: normal;
 
-    &.is-selected {
-      border-width: 1px;
-    }
-  }
+    &__items {
+        display: grid;
+        grid-gap: 1px;
+        grid-template-columns: repeat(auto-fill, 12px);
+        flex: 1 1 auto;
 
-  &__item-none {
-    @include userSelectNone();
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    margin-bottom: $interiorMarginSm;
-
-    .c-palette__item {
-      @include noColor();
-      border-color: $paletteItemBorderInnerColor;
-      margin-right: $interiorMarginSm;
-    }
-  }
-
-  &--color {
-    .c-palette__item {
-      &:hover {
-        border-color: rgba($paletteItemBorderOuterColorSelected, 0.7);
-        box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 0.7) 0 0 0 1px;
-      }
-
-      &.is-selected {
-        border-color: $paletteItemBorderOuterColorSelected !important;
-        box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 1) 0 0 0 1px;
-      }
-    }
-  }
-
-  &--icon {
-    .c-palette__items {
-      grid-gap: 3px;
+        .c-menu & {
+            min-width: $paletteMenuMinW;
+        }
     }
 
-    .c-palette__item {
-      border-radius: $smallCr;
-      font-size: 0.6rem;
+    &__item {
+        $d: 12px;
+        border: 1px solid transparent;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        align-content: center;
+        width: $d;
+        height: $d;
+        text-align: center;
 
-      &:before {
-        display: block;
-        width: 100%;
-      }
-
-      &:hover {
-        box-shadow: rgba($paletteItemBorderInnerColorSelected, 0.3) 0 0 0 1px;
-      }
-
-      &.is-selected {
-        box-shadow: rgba($paletteItemBorderInnerColorSelected, 0.6) 0 0 0 1px;
-      }
+        &.is-selected {
+            border-width: 1px;
+        }
+    }
+
+    &__item-none {
+        @include userSelectNone();
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        margin-bottom: $interiorMarginSm;
+
+        .c-palette__item {
+            @include noColor();
+            border-color: $paletteItemBorderInnerColor;
+            margin-right: $interiorMarginSm;
+        }
+    }
+
+    &--color {
+        .c-palette__item {
+            &:hover {
+                border-color: rgba($paletteItemBorderOuterColorSelected, 0.7);
+                box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 0.7) 0 0 0 1px;
+            }
+
+            &.is-selected {
+                border-color: $paletteItemBorderOuterColorSelected !important;
+                box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 1) 0 0 0 1px;
+            }
+        }
+    }
+
+    &--icon {
+        .c-palette__items {
+            grid-gap: 3px;
+        }
+
+        .c-palette__item {
+            border-radius: $smallCr;
+            font-size: 0.6rem;
+
+            &:before {
+                display: block;
+                width: 100%;
+            }
+
+            &:hover {
+                box-shadow: rgba($paletteItemBorderInnerColorSelected, 0.3) 0 0 0 1px;
+            }
+
+            &.is-selected {
+                box-shadow: rgba($paletteItemBorderInnerColorSelected, 0.6) 0 0 0 1px;
+            }
+        }
     }
-  }
 }
 
 /******************************************************** SWATCHES */
 .c-color-swatch {
-  border: 1px solid rgba(#fff, 0.2);
-  box-shadow: rgba(#000, 0.2) 0 0 0 1px;
+    border: 1px solid rgba(#fff, 0.2);
+    box-shadow: rgba(#000, 0.2) 0 0 0 1px;
 }
 
 /******************************************************** TOOLBAR */
 .c-ctrl-wrapper {
-  @include cCtrlWrapper();
+    @include cCtrlWrapper();
 }
 
 .c-toolbar,
 .c-toolbar .c-ctrl-wrapper {
-  display: flex;
-  align-items: stretch;
+    display: flex;
+    align-items: stretch;
 }
 
 @mixin cToolbarSeparator() {
-  $m: 1px;
-  $b: 1px;
-  display: block;
-  width: $m + $b; // Allow for border
-  border-right: $b solid $colorInteriorBorder;
-  margin-right: $m;
+    $m: 1px;
+    $b: 1px;
+    display: block;
+    width: $m + $b; // Allow for border
+    border-right: $b solid $colorInteriorBorder;
+    margin-right: $m;
 }
 
 .c-separator {
-  @include cToolbarSeparator();
-  height: 100%;
+    @include cToolbarSeparator();
+    height: 100%;
 }
 
 .c-row-separator {
-  border-top: 1px solid $colorInteriorBorder;
-  height: 1px;
+    border-top: 1px solid $colorInteriorBorder;
+    height: 1px;
 }
 
 .c-toolbar {
-  display: flex;
-  align-items: center;
-
-  > * {
-    // First level items
     display: flex;
+    align-items: center;
 
-    > * + * {
-      margin-left: 2px;
-    }
-  }
+    > * {
+        // First level items
+        display: flex;
 
-  &__separator {
-    @include cToolbarSeparator();
-  }
-
-  .c-icon-button,
-  .c-labeled-input {
-    color: $editUIBaseColorFg;
-  }
-
-  .c-icon-button {
-    @include cControl();
-    $pLR: $interiorMargin - 1;
-    $pTB: 2px;
-    padding: $pTB $pLR;
-
-    @include hover() {
-      background: $editUIBaseColorHov !important;
-      color: $editUIBaseColorFg !important;
-    }
-
-    &--menu {
-      $p: 4px;
-      padding-top: $p;
-      padding-bottom: $p;
-    }
-
-    &--swatched {
-      padding-bottom: floor(math.div($pTB, 2));
-      width: 2em; // Standardize the width
-    }
-
-    &[class*='--caution'] {
-      &:before {
-        color: $colorBtnCautionBg;
-      }
-
-      @include hover() {
-        background: rgba($colorBtnCautionBgHov, 0.2);
-        :before {
-          color: $colorBtnCautionBgHov;
+        > * + * {
+            margin-left: 2px;
         }
-      }
-    }
-  }
-
-  .c-labeled-input {
-    font-size: 0.9em;
-    input[type='number'] {
-      width: 40px; // Number input sucks and must have size set using this method
     }
 
-    + .c-labeled-input {
-      margin-left: $interiorMargin;
+    &__separator {
+        @include cToolbarSeparator();
+    }
+
+    .c-icon-button,
+    .c-labeled-input {
+        color: $editUIBaseColorFg;
+    }
+
+    .c-icon-button {
+        @include cControl();
+        $pLR: $interiorMargin - 1;
+        $pTB: 2px;
+        padding: $pTB $pLR;
+
+        @include hover() {
+            background: $editUIBaseColorHov !important;
+            color: $editUIBaseColorFg !important;
+        }
+
+        &--menu {
+            $p: 4px;
+            padding-top: $p;
+            padding-bottom: $p;
+        }
+
+        &--swatched {
+            padding-bottom: floor(math.div($pTB, 2));
+            width: 2em; // Standardize the width
+        }
+
+        &[class*='--caution'] {
+            &:before {
+                color: $colorBtnCautionBg;
+            }
+
+            @include hover() {
+                background: rgba($colorBtnCautionBgHov, 0.2);
+                :before {
+                    color: $colorBtnCautionBgHov;
+                }
+            }
+        }
+    }
+
+    .c-labeled-input {
+        font-size: 0.9em;
+
+        input[type='number'] {
+            width: 40px; // Number input sucks and must have size set using this method
+        }
+
+        + .c-labeled-input {
+            margin-left: $interiorMargin;
+        }
     }
-  }
 }
 
 /********* Button Sets */
 .c-button-set {
-  display: inline-flex;
-  flex: 0 0 auto;
-
-  > * {
-    // Assume buttons are immediate descendants
+    display: inline-flex;
     flex: 0 0 auto;
-  }
 
-  &[class*='--strip'] {
-    // Buttons are smashed together with minimal margin
-    // c-buttons don't have border-radius between buttons, creates a tool-button-strip look
-    // c-icon-buttons get grouped more closely together
-    [class^='c-button'] {
-      // Only apply the following to buttons that have background, eg. c-button
-      border-radius: 0;
-    }
-  }
-
-  &[class*='--strip-h'] {
-    // Horizontal strip
-
-    + .c-button-set {
-      margin-left: $interiorMargin;
+    > * {
+        // Assume buttons are immediate descendants
+        flex: 0 0 auto;
     }
 
-    [class^='c-button'] {
-      + * {
-        margin-left: 1px;
-      }
-
-      &:first-child {
-        border-top-left-radius: $controlCr;
-        border-bottom-left-radius: $controlCr;
-      }
-
-      &:last-child {
-        border-top-right-radius: $controlCr;
-        border-bottom-right-radius: $controlCr;
-      }
+    &[class*='--strip'] {
+        // Buttons are smashed together with minimal margin
+        // c-buttons don't have border-radius between buttons, creates a tool-button-strip look
+        // c-icon-buttons get grouped more closely together
+        [class^='c-button'] {
+            // Only apply the following to buttons that have background, eg. c-button
+            border-radius: 0;
+        }
+    }
+
+    &[class*='--strip-h'] {
+        // Horizontal strip
+
+        + .c-button-set {
+            margin-left: $interiorMargin;
+        }
+
+        [class^='c-button'] {
+            + * {
+                margin-left: 1px;
+            }
+
+            &:first-child {
+                border-top-left-radius: $controlCr;
+                border-bottom-left-radius: $controlCr;
+            }
+
+            &:last-child {
+                border-top-right-radius: $controlCr;
+                border-bottom-right-radius: $controlCr;
+            }
+        }
     }
-  }
 }
 
 /******************************************************** STYLE EDITING */
 .c-style {
-  display: flex;
-  flex: 1 1 auto;
-  align-items: center;
-  justify-content: space-between;
-
-  &__controls {
-    // Holds thumb, icon buttons
     display: flex;
-    flex: 1 0 auto;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: space-between;
 
-    > * + * {
-      margin-left: $interiorMargin;
-    }
-  }
+    &__controls {
+        // Holds thumb, icon buttons
+        display: flex;
+        flex: 1 0 auto;
 
-  &__button-save,
-  &__button-delete {
-    // Holds save and delete buttons accordingly
-    flex: 0 0 auto;
-  }
-
-  &--saved {
-    border-radius: $controlCr;
-    padding: $interiorMargin !important;
-    cursor: pointer;
-
-    @include hover {
-      background: rgba($editUIBaseColorHov, 0.3);
-    }
-
-    .c-style__controls {
-      [class*='button'] {
-        pointer-events: none;
-
-        &:before {
-          opacity: $controlDisabledOpacity;
+        > * + * {
+            margin-left: $interiorMargin;
+        }
+    }
+
+    &__button-save,
+    &__button-delete {
+        // Holds save and delete buttons accordingly
+        flex: 0 0 auto;
+    }
+
+    &--saved {
+        border-radius: $controlCr;
+        padding: $interiorMargin !important;
+        cursor: pointer;
+
+        @include hover {
+            background: rgba($editUIBaseColorHov, 0.3);
+        }
+
+        .c-style__controls {
+            [class*='button'] {
+                pointer-events: none;
+
+                &:before {
+                    opacity: $controlDisabledOpacity;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 .c-style-thumb {
-  background-size: cover;
-  border: 1px solid transparent;
-  border-radius: $basicCr;
-  box-shadow: rgba($colorBodyFg, 0.4) 0 0 3px;
-  flex: 0 0 auto;
-  padding: $interiorMargin;
-  text-align: center;
-  width: 50px;
+    background-size: cover;
+    border: 1px solid transparent;
+    border-radius: $basicCr;
+    box-shadow: rgba($colorBodyFg, 0.4) 0 0 3px;
+    flex: 0 0 auto;
+    padding: $interiorMargin;
+    text-align: center;
+    width: 50px;
 
-  &--mixed {
-    @include mixedBg();
-  }
+    &--mixed {
+        @include mixedBg();
+    }
 }
 
 /******************************************************** SLIDERS */
 .c-slider {
-  @include cControl();
-  > * + * {
-    margin-left: $interiorMargin;
-  }
+    @include cControl();
+
+    > * + * {
+        margin-left: $interiorMargin;
+    }
 }
 
 /******************************************************** SLIDERS AND RANGE */
 @mixin sliderKnobRound($h: 12px) {
-  @include themedButton();
-  cursor: pointer;
-  width: $h;
-  height: $h;
-  border-radius: 50% !important;
+    @include themedButton();
+    cursor: pointer;
+    width: $h;
+    height: $h;
+    border-radius: 50% !important;
 }
 
 @mixin sliderTrack($bg: $scrollbarTrackColorBg, $knobH: 12px, $trackH: 3px) {
-  border-radius: 2px;
-  $breakPointPx: floor(math.div($knobH - $trackH, 2));
-  $bp1: $breakPointPx;
-  $bp2: $breakPointPx + $trackH;
-  box-sizing: border-box;
-  // For cross-browser compatibility, the track needs to be the same height as the knob.
-  height: $knobH;
-  // Gradient visually adds a horizontal line smaller than the knob
-  background: linear-gradient(0deg, rgba($bg, 0) $bp1, $bg $bp1, $bg $bp2, rgba($bg, 0) $bp2);
+    border-radius: 2px;
+    $breakPointPx: floor(math.div($knobH - $trackH, 2));
+    $bp1: $breakPointPx;
+    $bp2: $breakPointPx + $trackH;
+    box-sizing: border-box;
+    // For cross-browser compatibility, the track needs to be the same height as the knob.
+    height: $knobH;
+    // Gradient visually adds a horizontal line smaller than the knob
+    background: linear-gradient(0deg, rgba($bg, 0) $bp1, $bg $bp1, $bg $bp2, rgba($bg, 0) $bp2);
 }
 
 input[type='range'] {
-  // HTML5 range inputs
-  $knobH: 11px;
-  $trackH: 3px;
-  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
-  background: transparent; /* Otherwise white in Chrome */
+    // HTML5 range inputs
+    $knobH: 11px;
+    $trackH: 3px;
+    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+    background: transparent; /* Otherwise white in Chrome */
 
-  &:focus {
-    outline: none; /* Removes the blue border. */
-  }
+    &:focus {
+        outline: none; /* Removes the blue border. */
+    }
 
-  // Thumb
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    @include sliderKnobRound($knobH);
-  }
-  &::-moz-range-thumb {
-    border: none;
-    @include sliderKnobRound($knobH);
-  }
-  &::-ms-thumb {
-    border: none;
-    @include sliderKnobRound($knobH);
-  }
+    // Thumb
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        @include sliderKnobRound($knobH);
+    }
 
-  // Track
-  &::-webkit-slider-runnable-track {
-    width: 100%;
-    @include sliderTrack($knobH: $knobH, $trackH: $trackH);
-  }
+    &::-moz-range-thumb {
+        border: none;
+        @include sliderKnobRound($knobH);
+    }
 
-  &::-moz-range-track {
-    width: 100%;
-    @include sliderTrack($knobH: $knobH, $trackH: $trackH);
-  }
+    &::-ms-thumb {
+        border: none;
+        @include sliderKnobRound($knobH);
+    }
+
+    // Track
+    &::-webkit-slider-runnable-track {
+        width: 100%;
+        @include sliderTrack($knobH: $knobH, $trackH: $trackH);
+    }
+
+    &::-moz-range-track {
+        width: 100%;
+        @include sliderTrack($knobH: $knobH, $trackH: $trackH);
+    }
 }
 
 /******************************************************** LOCAL CONTROLS */
 .h-local-controls {
-  // Holder for local controls
-  &--horz {
-    // Horizontal layout be
-    display: inline-flex;
-    align-items: center;
-  }
+    // Holder for local controls
+    &--horz {
+        // Horizontal layout be
+        display: inline-flex;
+        align-items: center;
+    }
 
-  [class*='--menus-aligned'] {
-    // Contains top level elements that hold dropdown menus
-    // Top level elements use display: contents to allow their menus to compactly align
-    // 03-18-22: used in ImageControls.vue
-    display: flex;
-    flex-direction: row;
-  }
+    [class*='--menus-aligned'] {
+        // Contains top level elements that hold dropdown menus
+        // Top level elements use display: contents to allow their menus to compactly align
+        // 03-18-22: used in ImageControls.vue
+        display: flex;
+        flex-direction: row;
+    }
 }
 
 .c-local-controls {
-  // Controls that are in close proximity to an element they effect
-  &--show-on-hover {
-    // Hidden by default; requires a hover 1 - 3 levels above to display
-    @include transition(opacity, $transOutTime);
-    opacity: 0;
-    pointer-events: auto;
-  }
+    // Controls that are in close proximity to an element they effect
+    &--show-on-hover {
+        // Hidden by default; requires a hover 1 - 3 levels above to display
+        @include transition(opacity, $transOutTime);
+        opacity: 0;
+        pointer-events: auto;
+    }
 }
 
 .has-local-controls:hover {
-  > .c-local-controls--show-on-hover,
-  > * > .c-local-controls--show-on-hover,
-  > * > * > .c-local-controls--show-on-hover,
-  > * > * > * > .c-local-controls--show-on-hover {
-    @include transition(opacity);
-    opacity: 1;
-    pointer-events: inherit;
+    > .c-local-controls--show-on-hover,
+    > * > .c-local-controls--show-on-hover,
+    > * > * > .c-local-controls--show-on-hover,
+    > * > * > * > .c-local-controls--show-on-hover {
+        @include transition(opacity);
+        opacity: 1;
+        pointer-events: inherit;
 
-    &[disabled] {
-      opacity: $controlDisabledOpacity;
+        &[disabled] {
+            opacity: $controlDisabledOpacity;
+        }
     }
-  }
 }
 
 /***************************************************** DRAG AND DROP */
 .c-drop-hint {
-  // Used in Tabs View, Flexible Grid Layouts
-  @include abs();
-  @include transition($prop: background-color, $dur: $transOutTime);
-  background-color: $colorDropHintBg;
-  color: $colorDropHintFg;
-  border-radius: $basicCr;
-  border: 1px dashed $colorDropHintFg;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  z-index: 50;
+    // Used in Tabs View, Flexible Grid Layouts
+    @include abs();
+    @include transition($prop: background-color, $dur: $transOutTime);
+    background-color: $colorDropHintBg;
+    color: $colorDropHintFg;
+    border-radius: $basicCr;
+    border: 1px dashed $colorDropHintFg;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 50;
 
-  &:not(.c-drop-hint--always-show) {
-    opacity: 0; // Must use this (rather than display: none) to enable transition effects
-    pointer-events: none;
-  }
+    &:not(.c-drop-hint--always-show) {
+        opacity: 0; // Must use this (rather than display: none) to enable transition effects
+        pointer-events: none;
+    }
 
-  &:before {
-    $h: 80%;
-    $mh: 25px;
-    background: $bg-icon-plus;
-    background-size: contain;
-    background-position: center center;
-    background-repeat: no-repeat;
-    content: '';
-    display: block;
-    filter: $colorKeyFilterHov;
-    height: $h;
-    width: $h;
-    max-height: $mh;
-    max-width: $mh;
-  }
+    &:before {
+        $h: 80%;
+        $mh: 25px;
+        background: $bg-icon-plus;
+        background-size: contain;
+        background-position: center center;
+        background-repeat: no-repeat;
+        content: '';
+        display: block;
+        filter: $colorKeyFilterHov;
+        height: $h;
+        width: $h;
+        max-height: $mh;
+        max-width: $mh;
+    }
 
-  .is-dragging &,
-  &.is-dragging {
-    pointer-events: inherit;
-    opacity: 0.8;
-  }
+    .is-dragging &,
+    &.is-dragging {
+        pointer-events: inherit;
+        opacity: 0.8;
+    }
 
-  .is-mouse-over &,
-  &.is-mouse-over {
-    background-color: $colorDropHintBgHov;
-    opacity: 0.9;
-  }
+    .is-mouse-over &,
+    &.is-mouse-over {
+        background-color: $colorDropHintBgHov;
+        opacity: 0.9;
+    }
+}
+
+/***************************************************** DISCRETE ITEMS */
+// OUTPUT
+// Element that showcases an output value. Used in Condition Sets and Derived Telemetry
+
+.c-output-featured {
+    display: flex;
+    gap: $interiorMargin;
+    padding: 0 $interiorMargin;
+
+    > * {
+        padding: $interiorMargin;
+    }
+
+    &__label {
+        flex: 0 0 auto;
+        text-transform: uppercase;
+    }
+
+    &__value {
+        $p: $interiorMargin * 2;
+        //font-size: 1.25em;
+        padding-left: $p;
+        padding-right: $p;
+        background: rgba(black, 0.2);
+        border-radius: $basicCr;
+    }
 }
 
 /***************************************************** LEGACY */
 .l-btn-set {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 }