<!--
A "RowBar" is used for chart order and builder areas.  It is a flexbox that stretches vertically to hold its contents,
which are layed out in flex columns. -->
<template>
    <v-sheet dense :color="faintColor" class="d-flex align-content-stretch" style="overflow-y: hidden">
      <slot/>
    </v-sheet>
</template>

<script setup>
import {computed} from "vue";
import {lightenColor2} from "@/misc.js";

const props = defineProps(['color'])
const faintColor = computed(() => lightenColor2(props.color,.70))
const computedStyle = computed(() => {
  return {
    'background-color': props.color,
    'border-color': props.color,
    'width': '.67em',
    'border-top-width': '1px',
    'border-bottom-width': '1px',
  }
})
</script>

<style scoped lang="scss">

</style>