@odx/ui 5.0.13 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "5.0.13",
+  "version": "5.2.0",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/_color-palettes-dark.scss

@@ -1,53 +1,14 @@
-@use '../abstract/utils';
+@use '../../abstract/utils';
 
 @include utils.theme-selector(dark) {
-  --white: #293642;
-  --white-dark: #060a12;
-  --black: #ffffff;
-  --black-20: #{rgba(#000000, 60%)};
-
-  --focus-bg: #284e68;
-
-  --white-60: #{rgba(var(--white), 0.6)};
-
-  --gray-50: #2e3d49;
-  --gray-100: #344351;
-  --gray-200: #3e5160;
-  --gray-300: #495e6e;
-  --gray-400: #556c7c;
-  --gray-500: #607a8a;
-  --gray-600: #6d8797;
-  --gray-700: #7d94a1;
-  --gray-800: #e9eef4;
-  --gray-900: #9cacb4;
-
-  --blue-50: #455e85;
-  --blue-50-5: #{rgba(#455e85, 0.1)};
-  --blue-100: #043c95;
-  --blue-600: #a8c4f0;
-  --blue-700: #cbe9ff;
-  --blue-700-5: #{rgba(#cbe9ff, 0.1)};
-  --blue-700-10: #{rgba(#cbe9ff, 0.2)};
-  --blue-900: #d5e2f6;
-
-  --cyan-50: #002766;
-  --cyan-100: #003c66;
-  --cyan-200: #00508a;
-  --cyan-300: #0065ad;
-  --cyan-400: #007ad1;
-  --cyan-600: #1fa2ff;
-  --cyan-700: #47b3ff;
-  --cyan-800: #70c4ff;
-  --cyan-900: #9dd7ff;
-
-  --red-00: #4b3138;
-  --red-50: #724956;
-  --red-100: #bc0000;
-  --red-700: #ff9898;
-  --red-800: #ffb4b4;
-  --red-900: #ffe0e3;
-
-  --yellow-50: #5f5439;
-
-  --green-00: #355e54;
+  --odx-charts-series-blue-700: var(--odx-charts-series-blue-100);
+  --odx-charts-series-cyan-700: var(--odx-charts-series-cyan-100);
+  --odx-charts-series-aqua-700: var(--odx-charts-series-aqua-100);
+  --odx-charts-series-ocean-700: var(--odx-charts-series-ocean-100);
+  --odx-charts-series-indigo-700: var(--odx-charts-series-indigo-100);
+  --odx-charts-series-purple-700: var(--odx-charts-series-purple-100);
+  --odx-charts-series-berry-700: var(--odx-charts-series-berry-100);
+  --odx-charts-series-violet-700: var(--odx-charts-series-violet-100);
+  --odx-charts-series-gray-75-dark-700: var(--draeger-cool-gray-15);
+  --odx-charts-series-gray-50-dark-700: var(--draeger-cool-gray-25);
 }

package/scss/_color-palettes.scss

@@ -1,96 +1,44 @@
 :root {
-  --white: #ffffff;
-  --black: #00060f;
-  --black-20: #{rgba(#000000, 20%)};
-
-  --white-5: #{rgba(#ffffff, 5%)};
-  --white-60: #{rgba(#ffffff, 60%)};
-
-  --gray-50: #f5f7fa;
-  --gray-100: #e9eef4;
-  --gray-200: #dde5ee;
-  --gray-300: #c7d3e0;
-  --gray-400: #b2c1d2;
-  --gray-500: #9eb0c2;
-  --gray-600: #8b9fb1;
-  --gray-700: #798ea0;
-  --gray-800: #697c8c;
-  --gray-900: #5d6a74;
-
-  --blue-50: #d5e2f6;
-  --blue-100: #a8c4f0;
-  --blue-200: #79a5ec;
-  --blue-300: #4786eb;
-  --blue-400: #1f65d7;
-  --blue-500: #0a51c2;
-  --blue-600: #043c95;
-  --blue-700: #002766;
-  --blue-800: #001433;
-  --blue-900: #000205;
-
-  --blue-700-5: #{rgba(#002766, 5%)};
-  --blue-700-10: #{rgba(#002766, 10%)};
-  --blue-700-15: #{rgba(#002766, 15%)};
-  --blue-800-30: #{rgba(#001433, 30%)};
-
-  --cyan-50: #cbe9ff;
-  --cyan-100: #9dd7ff;
-  --cyan-200: #70c4ff;
-  --cyan-300: #47b3ff;
-  --cyan-400: #1fa2ff;
-  --cyan-500: #0091f7;
-  --cyan-600: #0077cc;
-  --cyan-700: #0065ad;
-  --cyan-800: #00508a;
-  --cyan-900: #003c66;
-
-  --cyan-500-5: #{rgba(#0091f7, 5%)};
-  --cyan-500-15: #{rgba(#0091f7, 15%)};
-  --cyan-500-20: #{rgba(#0091f7, 20%)};
-
-  --red-00: #ffe0e3;
-  --red-50: #ffb4b4;
-  --red-100: #ff9898;
-  --red-200: #ff7b7b;
-  --red-300: #ff5c5c;
-  --red-400: #ff2020;
-  --red-500: #f30303;
-  --red-600: #d70202;
-  --red-700: #bc0000;
-  --red-800: #970000;
-  --red-900: #700000;
-
-  --yellow-50: #fffad7;
-  --yellow-100: #fff7b8;
-  --yellow-200: #fff18a;
-  --yellow-300: #ffed72;
-  --yellow-400: #ffea46;
-  --yellow-500: #ffe300;
-  --yellow-600: #e7cc00;
-  --yellow-700: #bea800;
-  --yellow-800: #988600;
-  --yellow-900: #7c6d00;
-
-  --green-00: #d1ffdf;
-  --green-50: #b7ffc6;
-  --green-100: #93ffaa;
-  --green-200: #6aff8b;
-  --green-300: #36ff62;
-  --green-400: #0bf23e;
-  --green-500: #00dd31;
-  --green-600: #00c92c;
-  --green-700: #00aa25;
-  --green-800: #00851d;
-  --green-900: #006616;
-
-  --orange-50: #fff6ed;
-  --orange-100: #ffebd6;
-  --orange-200: #ffd4a8;
-  --orange-300: #ffd4a8;
-  --orange-400: #ffa64d;
-  --orange-500: #ff8f1f;
-  --orange-600: #f57a00;
-  --orange-700: #cc6600;
-  --orange-800: #a35200;
-  --orange-900: #7a3d00;
+  --odx-charts-series-blue-500: var(--blue-500);
+  --odx-charts-series-cyan-500: var(--cyan-500);
+  --odx-charts-series-aqua-500: #15dcc4;
+  --odx-charts-series-ocean-500: #1cb4d8;
+  --odx-charts-series-indigo-500: #6a53e6;
+  --odx-charts-series-purple-500: #8f32e2;
+  --odx-charts-series-berry-500: #ee1b80;
+  --odx-charts-series-violet-500: #b318d4;
+  --odx-charts-series-gray-medium-50-500: var(--draeger-cool-gray-50);
+  --odx-charts-series-gray-medium-25-500: var(--draeger-cool-gray-25);
+
+  --odx-charts-series-blue-700: var(--blue-700);
+  --odx-charts-series-cyan-700: var(--cyan-700);
+  --odx-charts-series-aqua-700: #09a491;
+  --odx-charts-series-ocean-700: #1c8093;
+  --odx-charts-series-indigo-700: #523cd2;
+  --odx-charts-series-purple-700: #751fc7;
+  --odx-charts-series-berry-700: #cd0b68;
+  --odx-charts-series-violet-700: #9a0aaf;
+  --odx-charts-series-gray-75-dark-700: var(--draeger-cool-gray-75);
+  --odx-charts-series-gray-50-dark-700: var(--draeger-cool-gray-50);
+
+  --odx-charts-series-blue-100: #a8c4f0;
+  --odx-charts-series-cyan-100: #9dd7ff;
+  --odx-charts-series-aqua-100: #9af4ea;
+  --odx-charts-series-ocean-100: #a0dcff;
+  --odx-charts-series-indigo-100: #a99ded;
+  --odx-charts-series-purple-100: #c693f4;
+  --odx-charts-series-violet-100: #e08ff2;
+  --odx-charts-series-berry-100: #f0a7cb;
+
+  --odx-charts-border-color: var(--odx-c-separator);
+  --odx-charts-text-color: var(--odx-c-text);
+  --odx-charts-background-color: var(--odx-c-background-content);
+
+  --odx-charts-font-family: var(--odx-typography-font-family);
+  --odx-charts-font-size: var(--odx-typography-base-size);
+
+  --draeger-cool-gray-15: #cdd2d7;
+  --draeger-cool-gray-25: #b4b9be;
+  --draeger-cool-gray-50: #878c91;
+  --draeger-cool-gray-75: #5a646e;
 }

package/scss/anchor-navigation.component.scss

@@ -0,0 +1,91 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/utils';
+
+.odx-anchor-navigation {
+  --active-link-indicator-color: var(--odx-control-outline-color);
+
+  $root: &;
+
+  display: flex;
+  gap: dimensions.get-size(math.div(8, 24));
+
+  &:is(:not(#{$root}--vertical)) {
+    border-block-end: var(--odx-v-outline-width-bold) solid var(--odx-control-outline-color);
+    padding-block-start: var(--odx-v-outline-width-bold);
+  }
+
+  &--vertical {
+    border-inline-start: var(--odx-v-outline-width-bold) solid var(--odx-control-outline-color);
+    flex-direction: column;
+  }
+
+  &-item {
+    @include motion.transition(border-color background-color);
+
+    display: inline-flex;
+    min-width: dimensions.get-size(math.div(80, 24));
+
+    &:has([aria-current='page']) {
+      --active-link-indicator-color: var(--odx-c-link-active);
+    }
+
+    .odx-link {
+      @include dimensions.padding-x(math.div(12, 24));
+      @include dimensions.padding-y(math.div(6, 24));
+      @include utils.interactive($with-background: false);
+
+      color: var(--odx-c-text);
+      display: flex;
+      outline-offset: calc(var(--odx-v-outline-width-bold) * -1);
+      outline-width: var(--odx-v-outline-width-bold);
+
+      &:not(:empty) {
+        gap: dimensions.get-size(math.div(4, 24));
+      }
+
+      &[aria-current='page'] {
+        background-color: var(--odx-c-selected);
+      }
+
+      &:focus-visible {
+        background-color: unset;
+      }
+
+      &:hover {
+        color: var(--odx-c-text);
+        text-decoration: none;
+
+        &:not([aria-current='page']) {
+          background-color: var(--gray-100);
+        }
+
+        &:focus-visible {
+          background-color: unset;
+        }
+      }
+
+      #{$root}:is(:not(#{$root}--vertical)) & {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      #{$root}--vertical & {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        inline-size: 100%;
+      }
+    }
+
+    #{$root}:is(:not(#{$root}--vertical)) & {
+      border-block-end: var(--odx-v-outline-width-bold) solid var(--active-link-indicator-color);
+      margin-block-end: calc(var(--odx-v-outline-width-bold) * -1);
+    }
+
+    #{$root}--vertical & {
+      border-inline-start: var(--odx-v-outline-width-bold) solid var(--active-link-indicator-color);
+      margin-inline-start: calc(var(--odx-v-outline-width-bold) * -1);
+    }
+  }
+}

package/scss/chart-footer.component.scss

@@ -0,0 +1,21 @@
+.odx-chart-footer {
+  align-items: center;
+  display: flex;
+  gap: calc(var(--odx-vertical-rythm-base-size) * 0.75);
+  justify-content: flex-end;
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+  width: 100%;
+
+  .legend-item {
+    align-items: center;
+    display: flex;
+    font-size: calc(var(--odx-typography-base-size) * 0.875);
+    gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+  }
+
+  .legend-dot {
+    border-radius: 50%;
+    height: calc(var(--odx-vertical-rythm-base-size) * 0.375);
+    width: calc(var(--odx-vertical-rythm-base-size) * 0.375);
+  }
+}

package/scss/chart-header.component.scss

@@ -0,0 +1,49 @@
+.odx-chart-header {
+  display: flex;
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+  width: 100%;
+
+  .odx-chart-header__actions {
+    display: none;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    margin-left: auto;
+  }
+}
+
+.odx-chart-header--center {
+  align-items: center;
+  display: flex;
+  gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  justify-content: center;
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+}
+
+.odx-chart-header--split,
+.odx-chart-header--controls,
+.odx-chart-header--toggle,
+.odx-chart-header--textlink {
+  align-items: center;
+  display: flex;
+  gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  justify-content: space-between;
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+
+  .odx-chart-header__actions {
+    align-items: center;
+    display: flex;
+  }
+}
+
+.odx-chart-header--controls {
+  .odx-chart-header__actions form {
+    align-items: center;
+    display: flex;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+
+    .odx-select__trigger {
+      padding: 0 calc(var(--odx-vertical-rythm-base-size) * 0.3);
+    }
+  }
+}

package/scss/charts/colors/_color-palettes-dark.scss

@@ -0,0 +1,14 @@
+@use '../../abstract/utils';
+
+@include utils.theme-selector(dark) {
+  --odx-charts-series-blue-700: var(--odx-charts-series-blue-100);
+  --odx-charts-series-cyan-700: var(--odx-charts-series-cyan-100);
+  --odx-charts-series-aqua-700: var(--odx-charts-series-aqua-100);
+  --odx-charts-series-ocean-700: var(--odx-charts-series-ocean-100);
+  --odx-charts-series-indigo-700: var(--odx-charts-series-indigo-100);
+  --odx-charts-series-purple-700: var(--odx-charts-series-purple-100);
+  --odx-charts-series-berry-700: var(--odx-charts-series-berry-100);
+  --odx-charts-series-violet-700: var(--odx-charts-series-violet-100);
+  --odx-charts-series-gray-75-dark-700: var(--draeger-cool-gray-15);
+  --odx-charts-series-gray-50-dark-700: var(--draeger-cool-gray-25);
+}

package/scss/charts/colors/_color-palettes.scss

@@ -0,0 +1,44 @@
+:root {
+  --odx-charts-series-blue-500: var(--blue-500);
+  --odx-charts-series-cyan-500: var(--cyan-500);
+  --odx-charts-series-aqua-500: #15dcc4;
+  --odx-charts-series-ocean-500: #1cb4d8;
+  --odx-charts-series-indigo-500: #6a53e6;
+  --odx-charts-series-purple-500: #8f32e2;
+  --odx-charts-series-berry-500: #ee1b80;
+  --odx-charts-series-violet-500: #b318d4;
+  --odx-charts-series-gray-medium-50-500: var(--draeger-cool-gray-50);
+  --odx-charts-series-gray-medium-25-500: var(--draeger-cool-gray-25);
+
+  --odx-charts-series-blue-700: var(--blue-700);
+  --odx-charts-series-cyan-700: var(--cyan-700);
+  --odx-charts-series-aqua-700: #09a491;
+  --odx-charts-series-ocean-700: #1c8093;
+  --odx-charts-series-indigo-700: #523cd2;
+  --odx-charts-series-purple-700: #751fc7;
+  --odx-charts-series-berry-700: #cd0b68;
+  --odx-charts-series-violet-700: #9a0aaf;
+  --odx-charts-series-gray-75-dark-700: var(--draeger-cool-gray-75);
+  --odx-charts-series-gray-50-dark-700: var(--draeger-cool-gray-50);
+
+  --odx-charts-series-blue-100: #a8c4f0;
+  --odx-charts-series-cyan-100: #9dd7ff;
+  --odx-charts-series-aqua-100: #9af4ea;
+  --odx-charts-series-ocean-100: #a0dcff;
+  --odx-charts-series-indigo-100: #a99ded;
+  --odx-charts-series-purple-100: #c693f4;
+  --odx-charts-series-violet-100: #e08ff2;
+  --odx-charts-series-berry-100: #f0a7cb;
+
+  --odx-charts-border-color: var(--odx-c-separator);
+  --odx-charts-text-color: var(--odx-c-text);
+  --odx-charts-background-color: var(--odx-c-background-content);
+
+  --odx-charts-font-family: var(--odx-typography-font-family);
+  --odx-charts-font-size: var(--odx-typography-base-size);
+
+  --draeger-cool-gray-15: #cdd2d7;
+  --draeger-cool-gray-25: #b4b9be;
+  --draeger-cool-gray-50: #878c91;
+  --draeger-cool-gray-75: #5a646e;
+}

package/scss/charts/components/chart-footer.component.scss

@@ -0,0 +1,21 @@
+.odx-chart-footer {
+  align-items: center;
+  display: flex;
+  gap: calc(var(--odx-vertical-rythm-base-size) * 0.75);
+  justify-content: flex-end;
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+  width: 100%;
+
+  .legend-item {
+    align-items: center;
+    display: flex;
+    font-size: calc(var(--odx-typography-base-size) * 0.875);
+    gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+  }
+
+  .legend-dot {
+    border-radius: 50%;
+    height: calc(var(--odx-vertical-rythm-base-size) * 0.375);
+    width: calc(var(--odx-vertical-rythm-base-size) * 0.375);
+  }
+}

package/scss/charts/components/chart-header.component.scss

@@ -0,0 +1,49 @@
+.odx-chart-header {
+  display: flex;
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+  width: 100%;
+
+  .odx-chart-header__actions {
+    display: none;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    margin-left: auto;
+  }
+}
+
+.odx-chart-header--center {
+  align-items: center;
+  display: flex;
+  gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  justify-content: center;
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+}
+
+.odx-chart-header--split,
+.odx-chart-header--controls,
+.odx-chart-header--toggle,
+.odx-chart-header--textlink {
+  align-items: center;
+  display: flex;
+  gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  justify-content: space-between;
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+
+  .odx-chart-header__actions {
+    align-items: center;
+    display: flex;
+  }
+}
+
+.odx-chart-header--controls {
+  .odx-chart-header__actions form {
+    align-items: center;
+    display: flex;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+
+    .odx-select__trigger {
+      padding: 0 calc(var(--odx-vertical-rythm-base-size) * 0.3);
+    }
+  }
+}

package/scss/charts/components/circle-chart-table.component.scss

@@ -0,0 +1,46 @@
+.odx-circle-chart-table {
+  $root: &;
+
+  display: block;
+
+  &__container {
+    display: flex;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+    padding: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    width: 100%;
+  }
+
+  &__chart {
+    flex: 0 0 auto;
+    height: calc(var(--odx-vertical-rythm-base-size) * 5.375);
+    position: relative;
+    width: calc(var(--odx-vertical-rythm-base-size) * 5.375);
+
+    &-center {
+      left: 50%;
+      position: absolute;
+      text-align: center;
+      top: 50%;
+      transform: translate(-50%, -50%);
+
+      &-main {
+        font-size: calc(var(--odx-typography-base-size) * 1.375);
+        font-weight: var(--odx-typography-font-weight-bold);
+      }
+    }
+  }
+
+  #{$root}__table {
+    flex: 1 1 auto;
+    min-width: 0;
+
+    .color-dot {
+      border-radius: 50%;
+      display: inline-block;
+      height: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+      margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+      vertical-align: middle;
+      width: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    }
+  }
+}

package/scss/charts/components/gantt-chart.component.scss

@@ -0,0 +1,24 @@
+.odx-gantt-chart {
+  display: flex;
+  flex-direction: column;
+
+  &__line {
+    height: calc(var(--odx-vertical-rythm-base-size) * 5.625);
+    position: relative;
+
+    canvas {
+      height: 100% !important;
+      width: 100% !important;
+    }
+  }
+
+  &__bar {
+    height: calc(var(--odx-vertical-rythm-base-size) * 14.0625);
+    position: relative;
+
+    canvas {
+      height: 100% !important;
+      width: 100% !important;
+    }
+  }
+}

package/scss/charts/components/line-timeframes-chart.component.scss

@@ -0,0 +1,59 @@
+.odx-line-timeframes-chart {
+  .odx-line-timeframes-chart__container {
+    display: flex;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+    width: 100%;
+  }
+
+  &__chart {
+    flex: 1 0 80%;
+    height: auto;
+    max-width: 80%;
+  }
+
+  &__timeframe {
+    min-width: calc(20% - var(--odx-vertical-rythm-base-size));
+
+    &-title {
+      font-weight: var(--odx-typography-font-weight-bold);
+      margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    }
+
+    &-items {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    }
+
+    &-item {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--odx-vertical-rythm-base-size) * 0.125);
+
+      &-header {
+        align-items: center;
+        display: flex;
+        gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+      }
+
+      &-dot {
+        border-radius: 50%;
+        flex-shrink: 0;
+        height: calc(var(--odx-vertical-rythm-base-size) * 0.3125);
+        width: calc(var(--odx-vertical-rythm-base-size) * 0.3125);
+      }
+
+      &-label {
+        font-size: calc(var(--odx-typography-base-size) * 0.875);
+        line-height: 1.2;
+      }
+
+      &-value {
+        font-size: calc(var(--odx-typography-base-size) * 0.875);
+        font-weight: var(--odx-typography-font-weight-bold);
+        line-height: 1.2;
+        padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5 + 8px);
+      }
+    }
+  }
+}

package/scss/charts/components/mirror-bar-chart.component.scss

@@ -0,0 +1,34 @@
+.odx-mirror-bar-chart {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+  width: 100%;
+
+  &__title {
+    color: var(--odx-c-text-primary);
+    font-size: var(--odx-typography-base-size);
+    font-weight: var(--odx-typography-font-weight-medium);
+    margin: 0;
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__wrapper {
+    height: calc(var(--odx-vertical-rythm-base-size) * 9.375);
+    position: relative;
+    width: 100%;
+  }
+
+  &__controls {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  }
+}
+
+.odx-mirror-bar-chart__wrapper:nth-child(2) {
+  height: calc(var(--odx-vertical-rythm-base-size) * 9.375 - 40px);
+}