ids-enterprise-wc 1.0.0-beta.11 → 1.0.0-beta.13

package/components/ids-area-chart/ids-area-chart.css

@@ -0,0 +1,728 @@
+/* Ids Area Chart Component */ /* Ids Axis Chart Component */
+.chart-legend {
+  display: flex;
+  padding-inline-start: 8px;
+  flex-direction: row;
+  margin-top: -4px;
+  justify-content: flex-start;
+  width: inherit;
+}
+.chart-legend a {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  align-items: center;
+  border: 1px solid transparent;
+  display: flex;
+  font-family: var(--ids-font-family-default);
+  font-size: var(--ids-chart-legend-font-size);
+  color: var(--ids-chart-legend-color-text);
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
+  padding-block-start: 2px;
+  padding-block-end: 2px;
+  text-decoration: none;
+}
+.chart-legend a:focus {
+  outline: none;
+  border-color: var(--ids-color-border-focus);
+  box-shadow: var(--ids-shadow-focus);
+}
+.chart-legend .swatch {
+  display: inline-flex;
+  margin-inline-end: 8px;
+  height: 12px;
+  width: 12px;
+}
+.chart-legend .swatch.color-1 {
+  background-color: var(--ids-chart-color-1);
+}
+.chart-legend .swatch.color-2 {
+  background-color: var(--ids-chart-color-2);
+}
+.chart-legend .swatch.color-3 {
+  background-color: var(--ids-chart-color-3);
+}
+.chart-legend .swatch.color-4 {
+  background-color: var(--ids-chart-color-4);
+}
+.chart-legend .swatch.color-5 {
+  background-color: var(--ids-chart-color-5);
+}
+.chart-legend .swatch.color-6 {
+  background-color: var(--ids-chart-color-6);
+}
+.chart-legend .swatch.color-7 {
+  background-color: var(--ids-chart-color-7);
+}
+.chart-legend .swatch.color-8 {
+  background-color: var(--ids-chart-color-8);
+}
+.chart-legend .swatch.color-9 {
+  background-color: var(--ids-chart-color-9);
+}
+.chart-legend .swatch.color-10 {
+  background-color: var(--ids-chart-color-10);
+}
+.chart-legend .swatch.color-11 {
+  background-color: var(--ids-chart-color-11);
+}
+.chart-legend .swatch.color-12 {
+  background-color: var(--ids-chart-color-12);
+}
+.chart-legend .swatch.color-13 {
+  background-color: var(--ids-chart-color-13);
+}
+.chart-legend .swatch.color-14 {
+  background-color: var(--ids-chart-color-14);
+}
+.chart-legend .swatch.color-15 {
+  background-color: var(--ids-chart-color-15);
+}
+.chart-legend .swatch.color-16 {
+  background-color: var(--ids-chart-color-16);
+}
+.chart-legend .swatch.color-17 {
+  background-color: var(--ids-chart-color-17);
+}
+.chart-legend .swatch.color-18 {
+  background-color: var(--ids-chart-color-18);
+}
+.chart-legend .swatch.color-19 {
+  background-color: var(--ids-chart-color-19);
+}
+.chart-legend .swatch.color-20 {
+  background-color: var(--ids-chart-color-20);
+}
+.chart-legend .swatch.color-21 {
+  background-color: var(--ids-chart-color-21);
+}
+
+.ids-chart-container {
+  display: flex;
+  flex-direction: column;
+}
+.ids-chart-container.legend-top {
+  margin-block-end: 8px;
+  flex-direction: column-reverse;
+}
+.ids-chart-container.legend-top .chart-legend {
+  margin-inline-start: 0;
+  justify-content: end;
+}
+.ids-chart-container.legend-right, .ids-chart-container.legend-left {
+  flex-direction: row;
+}
+.ids-chart-container.legend-right .chart-legend, .ids-chart-container.legend-left .chart-legend {
+  margin-inline-start: 0;
+  flex-direction: column;
+  justify-content: center;
+}
+.ids-chart-container.legend-right .chart-legend a, .ids-chart-container.legend-left .chart-legend a {
+  margin-block-end: 8px;
+  width: max-content;
+}
+.ids-chart-container.legend-left {
+  flex-direction: row-reverse;
+}
+
+.ids-axis-chart {
+  display: flex;
+}
+.ids-axis-chart.hidden {
+  display: none;
+}
+.ids-axis-chart .grid {
+  shape-rendering: crispedges;
+  stroke: var(--ids-axis-chart-grid-color);
+  stroke-width: 1;
+  stroke-dasharray: 2 2;
+}
+.ids-axis-chart .grid.horizontal-lines line:last-child {
+  stroke: var(--ids-axis-chart-last-line-color-border);
+  stroke-dasharray: none;
+}
+.ids-axis-chart .grid.hidden {
+  stroke-width: 0;
+}
+.ids-axis-chart.horizontal .grid.horizontal-lines line:last-child {
+  stroke: inherit;
+  stroke-dasharray: inherit;
+}
+.ids-axis-chart.horizontal .grid.vertical-lines line:first-child {
+  stroke: var(--ids-axis-chart-first-line-color);
+  stroke-dasharray: none;
+}
+.ids-axis-chart g[tabindex="0"]:focus {
+  outline: var(--ids-axis-chart-outline-focus);
+}
+.ids-axis-chart .labels {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: var(--ids-axis-chart-font-family);
+  font-size: var(--ids-axis-chart-font-size);
+}
+.ids-axis-chart .labels text {
+  fill: var(--ids-axis-chart-color-text);
+}
+.ids-axis-chart .labels.x-labels {
+  text-anchor: middle;
+}
+.ids-axis-chart .labels.y-labels {
+  text-anchor: end;
+}
+.ids-axis-chart .labels.axis-labels text {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: var(--ids-axis-chart-font-weight);
+  text-anchor: middle;
+}
+.ids-axis-chart .audible {
+  opacity: 0;
+}
+
+.ids-chart-container.selectable .audible {
+  font-size: 1px;
+}
+
+ids-empty-message:not([hidden]),
+::slotted(ids-empty-message:not([hidden])) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+ids-empty-message:not([hidden])[hidden],
+::slotted(ids-empty-message:not([hidden]))[hidden] {
+  display: none;
+}
+
+.tooltip-center {
+  margin-block: var(--ids-space-30);
+  text-align: center;
+}
+
+.tooltip.chart-legend {
+  flex-direction: column;
+  margin-block-end: var(--ids-space-40);
+  padding: 0;
+}
+.tooltip.chart-legend .swatch {
+  margin-inline: var(--ids-space-30);
+  padding: 0;
+}
+
+.tooltip-row span {
+  padding-inline-start: var(--ids-space-20);
+  padding-inline-end: var(--ids-space-30);
+}
+
+:host([dir=rtl]) .ids-axis-chart {
+  transform: scale(-1, 1);
+}
+:host([dir=rtl]) .ids-axis-chart:not(.horizontal) .labels.y-labels text {
+  transform: scale(-1, 1) translate(var(--ids-axis-chart-ylabels-x, -45px), 0);
+}
+:host([dir=rtl]) .labels.x-labels {
+  transform: scale(-1, 1);
+  transform-origin: unset;
+}
+
+/* Ids Line Chart Component */ /* Ids Axis Chart Component */
+.chart-legend {
+  display: flex;
+  padding-inline-start: 8px;
+  flex-direction: row;
+  margin-top: -4px;
+  justify-content: flex-start;
+  width: inherit;
+}
+.chart-legend a {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  align-items: center;
+  border: 1px solid transparent;
+  display: flex;
+  font-family: var(--ids-font-family-default);
+  font-size: var(--ids-chart-legend-font-size);
+  color: var(--ids-chart-legend-color-text);
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
+  padding-block-start: 2px;
+  padding-block-end: 2px;
+  text-decoration: none;
+}
+.chart-legend a:focus {
+  outline: none;
+  border-color: var(--ids-color-border-focus);
+  box-shadow: var(--ids-shadow-focus);
+}
+.chart-legend .swatch {
+  display: inline-flex;
+  margin-inline-end: 8px;
+  height: 12px;
+  width: 12px;
+}
+.chart-legend .swatch.color-1 {
+  background-color: var(--ids-chart-color-1);
+}
+.chart-legend .swatch.color-2 {
+  background-color: var(--ids-chart-color-2);
+}
+.chart-legend .swatch.color-3 {
+  background-color: var(--ids-chart-color-3);
+}
+.chart-legend .swatch.color-4 {
+  background-color: var(--ids-chart-color-4);
+}
+.chart-legend .swatch.color-5 {
+  background-color: var(--ids-chart-color-5);
+}
+.chart-legend .swatch.color-6 {
+  background-color: var(--ids-chart-color-6);
+}
+.chart-legend .swatch.color-7 {
+  background-color: var(--ids-chart-color-7);
+}
+.chart-legend .swatch.color-8 {
+  background-color: var(--ids-chart-color-8);
+}
+.chart-legend .swatch.color-9 {
+  background-color: var(--ids-chart-color-9);
+}
+.chart-legend .swatch.color-10 {
+  background-color: var(--ids-chart-color-10);
+}
+.chart-legend .swatch.color-11 {
+  background-color: var(--ids-chart-color-11);
+}
+.chart-legend .swatch.color-12 {
+  background-color: var(--ids-chart-color-12);
+}
+.chart-legend .swatch.color-13 {
+  background-color: var(--ids-chart-color-13);
+}
+.chart-legend .swatch.color-14 {
+  background-color: var(--ids-chart-color-14);
+}
+.chart-legend .swatch.color-15 {
+  background-color: var(--ids-chart-color-15);
+}
+.chart-legend .swatch.color-16 {
+  background-color: var(--ids-chart-color-16);
+}
+.chart-legend .swatch.color-17 {
+  background-color: var(--ids-chart-color-17);
+}
+.chart-legend .swatch.color-18 {
+  background-color: var(--ids-chart-color-18);
+}
+.chart-legend .swatch.color-19 {
+  background-color: var(--ids-chart-color-19);
+}
+.chart-legend .swatch.color-20 {
+  background-color: var(--ids-chart-color-20);
+}
+.chart-legend .swatch.color-21 {
+  background-color: var(--ids-chart-color-21);
+}
+
+.ids-chart-container {
+  display: flex;
+  flex-direction: column;
+}
+.ids-chart-container.legend-top {
+  margin-block-end: 8px;
+  flex-direction: column-reverse;
+}
+.ids-chart-container.legend-top .chart-legend {
+  margin-inline-start: 0;
+  justify-content: end;
+}
+.ids-chart-container.legend-right, .ids-chart-container.legend-left {
+  flex-direction: row;
+}
+.ids-chart-container.legend-right .chart-legend, .ids-chart-container.legend-left .chart-legend {
+  margin-inline-start: 0;
+  flex-direction: column;
+  justify-content: center;
+}
+.ids-chart-container.legend-right .chart-legend a, .ids-chart-container.legend-left .chart-legend a {
+  margin-block-end: 8px;
+  width: max-content;
+}
+.ids-chart-container.legend-left {
+  flex-direction: row-reverse;
+}
+
+.ids-axis-chart {
+  display: flex;
+}
+.ids-axis-chart.hidden {
+  display: none;
+}
+.ids-axis-chart .grid {
+  shape-rendering: crispedges;
+  stroke: var(--ids-axis-chart-grid-color);
+  stroke-width: 1;
+  stroke-dasharray: 2 2;
+}
+.ids-axis-chart .grid.horizontal-lines line:last-child {
+  stroke: var(--ids-axis-chart-last-line-color-border);
+  stroke-dasharray: none;
+}
+.ids-axis-chart .grid.hidden {
+  stroke-width: 0;
+}
+.ids-axis-chart.horizontal .grid.horizontal-lines line:last-child {
+  stroke: inherit;
+  stroke-dasharray: inherit;
+}
+.ids-axis-chart.horizontal .grid.vertical-lines line:first-child {
+  stroke: var(--ids-axis-chart-first-line-color);
+  stroke-dasharray: none;
+}
+.ids-axis-chart g[tabindex="0"]:focus {
+  outline: var(--ids-axis-chart-outline-focus);
+}
+.ids-axis-chart .labels {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: var(--ids-axis-chart-font-family);
+  font-size: var(--ids-axis-chart-font-size);
+}
+.ids-axis-chart .labels text {
+  fill: var(--ids-axis-chart-color-text);
+}
+.ids-axis-chart .labels.x-labels {
+  text-anchor: middle;
+}
+.ids-axis-chart .labels.y-labels {
+  text-anchor: end;
+}
+.ids-axis-chart .labels.axis-labels text {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: var(--ids-axis-chart-font-weight);
+  text-anchor: middle;
+}
+.ids-axis-chart .audible {
+  opacity: 0;
+}
+
+.ids-chart-container.selectable .audible {
+  font-size: 1px;
+}
+
+ids-empty-message:not([hidden]),
+::slotted(ids-empty-message:not([hidden])) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+ids-empty-message:not([hidden])[hidden],
+::slotted(ids-empty-message:not([hidden]))[hidden] {
+  display: none;
+}
+
+.tooltip-center {
+  margin-block: var(--ids-space-30);
+  text-align: center;
+}
+
+.tooltip.chart-legend {
+  flex-direction: column;
+  margin-block-end: var(--ids-space-40);
+  padding: 0;
+}
+.tooltip.chart-legend .swatch {
+  margin-inline: var(--ids-space-30);
+  padding: 0;
+}
+
+.tooltip-row span {
+  padding-inline-start: var(--ids-space-20);
+  padding-inline-end: var(--ids-space-30);
+}
+
+:host([dir=rtl]) .ids-axis-chart {
+  transform: scale(-1, 1);
+}
+:host([dir=rtl]) .ids-axis-chart:not(.horizontal) .labels.y-labels text {
+  transform: scale(-1, 1) translate(var(--ids-axis-chart-ylabels-x, -45px), 0);
+}
+:host([dir=rtl]) .labels.x-labels {
+  transform: scale(-1, 1);
+  transform-origin: unset;
+}
+
+.ids-axis-chart .markers circle {
+  stroke-width: var(--ids-space-40);
+  stroke: transparent;
+}
+.ids-axis-chart .markers circle.color-1 {
+  fill: var(--ids-chart-color-1);
+}
+.ids-axis-chart .markers circle.color-2 {
+  fill: var(--ids-chart-color-2);
+}
+.ids-axis-chart .markers circle.color-3 {
+  fill: var(--ids-chart-color-3);
+}
+.ids-axis-chart .markers circle.color-4 {
+  fill: var(--ids-chart-color-4);
+}
+.ids-axis-chart .markers circle.color-5 {
+  fill: var(--ids-chart-color-5);
+}
+.ids-axis-chart .markers circle.color-6 {
+  fill: var(--ids-chart-color-6);
+}
+.ids-axis-chart .markers circle.color-7 {
+  fill: var(--ids-chart-color-7);
+}
+.ids-axis-chart .markers circle.color-8 {
+  fill: var(--ids-chart-color-8);
+}
+.ids-axis-chart .markers circle.color-9 {
+  fill: var(--ids-chart-color-9);
+}
+.ids-axis-chart .markers circle.color-10 {
+  fill: var(--ids-chart-color-10);
+}
+.ids-axis-chart .markers circle.color-11 {
+  fill: var(--ids-chart-color-11);
+}
+.ids-axis-chart .markers circle.color-12 {
+  fill: var(--ids-chart-color-12);
+}
+.ids-axis-chart .markers circle.color-13 {
+  fill: var(--ids-chart-color-13);
+}
+.ids-axis-chart .markers circle.color-14 {
+  fill: var(--ids-chart-color-14);
+}
+.ids-axis-chart .markers circle.color-15 {
+  fill: var(--ids-chart-color-15);
+}
+.ids-axis-chart .markers circle.color-16 {
+  fill: var(--ids-chart-color-16);
+}
+.ids-axis-chart .markers circle.color-17 {
+  fill: var(--ids-chart-color-17);
+}
+.ids-axis-chart .markers circle.color-18 {
+  fill: var(--ids-chart-color-18);
+}
+.ids-axis-chart .markers circle.color-19 {
+  fill: var(--ids-chart-color-19);
+}
+.ids-axis-chart .markers circle.color-20 {
+  fill: var(--ids-chart-color-20);
+}
+.ids-axis-chart .markers circle.color-21 {
+  fill: var(--ids-chart-color-21);
+}
+.ids-axis-chart .marker-lines {
+  fill: none;
+  stroke-width: var(--ids-space-20);
+}
+.ids-axis-chart .marker-lines .data-line.color-1 {
+  stroke: var(--ids-chart-color-1);
+}
+.ids-axis-chart .marker-lines .data-line.color-2 {
+  stroke: var(--ids-chart-color-2);
+}
+.ids-axis-chart .marker-lines .data-line.color-3 {
+  stroke: var(--ids-chart-color-3);
+}
+.ids-axis-chart .marker-lines .data-line.color-4 {
+  stroke: var(--ids-chart-color-4);
+}
+.ids-axis-chart .marker-lines .data-line.color-5 {
+  stroke: var(--ids-chart-color-5);
+}
+.ids-axis-chart .marker-lines .data-line.color-6 {
+  stroke: var(--ids-chart-color-6);
+}
+.ids-axis-chart .marker-lines .data-line.color-7 {
+  stroke: var(--ids-chart-color-7);
+}
+.ids-axis-chart .marker-lines .data-line.color-8 {
+  stroke: var(--ids-chart-color-8);
+}
+.ids-axis-chart .marker-lines .data-line.color-9 {
+  stroke: var(--ids-chart-color-9);
+}
+.ids-axis-chart .marker-lines .data-line.color-10 {
+  stroke: var(--ids-chart-color-10);
+}
+.ids-axis-chart .marker-lines .data-line.color-11 {
+  stroke: var(--ids-chart-color-11);
+}
+.ids-axis-chart .marker-lines .data-line.color-12 {
+  stroke: var(--ids-chart-color-12);
+}
+.ids-axis-chart .marker-lines .data-line.color-13 {
+  stroke: var(--ids-chart-color-13);
+}
+.ids-axis-chart .marker-lines .data-line.color-14 {
+  stroke: var(--ids-chart-color-14);
+}
+.ids-axis-chart .marker-lines .data-line.color-15 {
+  stroke: var(--ids-chart-color-15);
+}
+.ids-axis-chart .marker-lines .data-line.color-16 {
+  stroke: var(--ids-chart-color-16);
+}
+.ids-axis-chart .marker-lines .data-line.color-17 {
+  stroke: var(--ids-chart-color-17);
+}
+.ids-axis-chart .marker-lines .data-line.color-18 {
+  stroke: var(--ids-chart-color-18);
+}
+.ids-axis-chart .marker-lines .data-line.color-19 {
+  stroke: var(--ids-chart-color-19);
+}
+.ids-axis-chart .marker-lines .data-line.color-20 {
+  stroke: var(--ids-chart-color-20);
+}
+.ids-axis-chart .marker-lines .data-line.color-21 {
+  stroke: var(--ids-chart-color-21);
+}
+.ids-axis-chart .markers [part=marker],
+.ids-axis-chart .marker-lines [part=line] {
+  outline: none;
+}
+
+.ids-chart-container.selectable .ids-axis-chart .markers [part=marker],
+.ids-chart-container.selectable .ids-axis-chart .marker-lines [part=line] {
+  cursor: var(--ids-cursor-pointer);
+}
+.ids-chart-container.selectable .ids-axis-chart .markers [part=marker].selected, .ids-chart-container.selectable .ids-axis-chart .markers [part=marker][selected],
+.ids-chart-container.selectable .ids-axis-chart .marker-lines [part=line].selected,
+.ids-chart-container.selectable .ids-axis-chart .marker-lines [part=line][selected] {
+  opacity: 1;
+}
+.ids-chart-container.selectable .ids-axis-chart .markers [part=marker].not-selected,
+.ids-chart-container.selectable .ids-axis-chart .marker-lines [part=line].not-selected {
+  opacity: 0.35;
+}
+
+@keyframes animate-line {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+.ids-axis-chart .areas {
+  fill-opacity: 0.2;
+}
+.ids-axis-chart .areas [part=area] {
+  outline: none;
+}
+.ids-axis-chart .areas path.color-1 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-1);
+}
+.ids-axis-chart .areas path.color-2 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-2);
+}
+.ids-axis-chart .areas path.color-3 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-3);
+}
+.ids-axis-chart .areas path.color-4 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-4);
+}
+.ids-axis-chart .areas path.color-5 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-5);
+}
+.ids-axis-chart .areas path.color-6 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-6);
+}
+.ids-axis-chart .areas path.color-7 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-7);
+}
+.ids-axis-chart .areas path.color-8 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-8);
+}
+.ids-axis-chart .areas path.color-9 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-9);
+}
+.ids-axis-chart .areas path.color-10 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-10);
+}
+.ids-axis-chart .areas path.color-11 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-11);
+}
+.ids-axis-chart .areas path.color-12 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-12);
+}
+.ids-axis-chart .areas path.color-13 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-13);
+}
+.ids-axis-chart .areas path.color-14 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-14);
+}
+.ids-axis-chart .areas path.color-15 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-15);
+}
+.ids-axis-chart .areas path.color-16 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-16);
+}
+.ids-axis-chart .areas path.color-17 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-17);
+}
+.ids-axis-chart .areas path.color-18 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-18);
+}
+.ids-axis-chart .areas path.color-19 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-19);
+}
+.ids-axis-chart .areas path.color-20 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-20);
+}
+.ids-axis-chart .areas path.color-21 {
+  /* stylelint-disable-next-line custom-property-pattern */
+  fill: var(--ids-chart-color-21);
+}
+.ids-axis-chart .animate {
+  animation: fadein 2.8s cubic-bezier(0.17, 0.04, 0.03, 0.94) forwards;
+}
+
+.ids-chart-container.selectable .ids-axis-chart .areas [part=area] {
+  cursor: pointer;
+}
+.ids-chart-container.selectable .ids-axis-chart .areas [part=area].selected, .ids-chart-container.selectable .ids-axis-chart .areas [part=area][selected] {
+  opacity: 1;
+}
+.ids-chart-container.selectable .ids-axis-chart .areas [part=area].not-selected {
+  opacity: 0.35;
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}