"breakdown" language for breakout sells

src/components/chart/RungBuilder.vue

@@ -18,9 +18,12 @@
                     :disabled="rungsDisabled"
                     style="width: 6.6em; max-height: 2.5em; height: 2.5em"
       />
-      <v-switch v-model="builder.breakout" label="Breakout" persistent-hint :color="color" hide-details/>
+      <v-switch v-model="breakout" :label="order.buy?'Breakout':'Breakdown'"
+                persistent-hint :color="switchColor" :base-color="switchColor" hide-details direction="vertical"
+                density="compact"
+      />
       <div class="mx-auto"><span style="font-size: .7em; vertical-align: top"
-                                 :style="builder.breakout?{color:color}:null">
+                                 :style="builder.breakout?{color:new Color(color).lighten(0.5).string()}:null">
         {{description}}
       </span></div>
     </div>
@@ -66,6 +69,7 @@ import {
   vectorNeg,
   vectorSub
 } from "@/vector.js";
+import {logicalXOR} from "@/common.js";
 
 const co = useChartOrderStore()
 const endpoints = defineModel('modelValue')  // 2-item list of points/values
@@ -111,6 +115,11 @@ watchEffect(()=>{
   }
 })
 
+const breakout = computed({
+  get() {return !logicalXOR(props.builder.breakout, props.order.buy)},
+  set(v) {props.builder.breakout = !logicalXOR(v, props.order.buy)},
+})
+
 function setEndpoints(a, b) {
   endpoints.value = [devectorize(a), devectorize(b)]
 }
@@ -235,6 +244,7 @@ const color = computed({
     props.builder.color = c.saturation <= maxLightness ? v : c.lightness(maxLightness).rgb().string()
   }
 })
+const switchColor = computed(()=>props.builder.breakout ? color.value : null)
 const colorStyle = computed(() => {
   // return {'color': color.value}
   return {}