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

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

@@ -1,730 +0,0 @@
-/* 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);
-  font-size: var(--ids-chart-legend-text-size);
-  color: var(--ids-chart-legend-text-color);
-  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-focus-border-color);
-  box-shadow: var(--ids-focus-box-shadow);
-}
-.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;
-  border-color: var(--ids-axis-chart-border-color);
-}
-.ids-axis-chart.hidden {
-  display: none;
-}
-.ids-axis-chart .grid {
-  shape-rendering: crispedges;
-  stroke: var(--ids-axis-chart-grid-stroke);
-  stroke-width: 1;
-  stroke-dasharray: 2 2;
-}
-.ids-axis-chart .grid.horizontal-lines line:last-child {
-  stroke: var(--ids-axis-chart-last-line-stroke);
-  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-stroke);
-  stroke-dasharray: none;
-}
-.ids-axis-chart g[tabindex="0"]:focus {
-  outline: var(--ids-axis-chart-focus-group-outline);
-}
-.ids-axis-chart .labels {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: var(--ids-axis-chart-label-font-family);
-  font-size: var(--ids-axis-chart-label-font-size);
-}
-.ids-axis-chart .labels text {
-  fill: var(--ids-axis-chart-label-text-fill);
-}
-.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-label-axis-text-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-spacing-md);
-  text-align: center;
-}
-
-.tooltip.chart-legend {
-  flex-direction: column;
-  margin-block-end: var(--ids-spacing-lg);
-  padding: 0;
-}
-.tooltip.chart-legend .swatch {
-  margin-inline: var(--ids-spacing-md);
-  padding: 0;
-}
-
-.tooltip-row span {
-  padding-inline-start: var(--ids-spacing-sm);
-  padding-inline-end: var(--ids-spacing-md);
-}
-
-: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);
-  font-size: var(--ids-chart-legend-text-size);
-  color: var(--ids-chart-legend-text-color);
-  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-focus-border-color);
-  box-shadow: var(--ids-focus-box-shadow);
-}
-.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;
-  border-color: var(--ids-axis-chart-border-color);
-}
-.ids-axis-chart.hidden {
-  display: none;
-}
-.ids-axis-chart .grid {
-  shape-rendering: crispedges;
-  stroke: var(--ids-axis-chart-grid-stroke);
-  stroke-width: 1;
-  stroke-dasharray: 2 2;
-}
-.ids-axis-chart .grid.horizontal-lines line:last-child {
-  stroke: var(--ids-axis-chart-last-line-stroke);
-  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-stroke);
-  stroke-dasharray: none;
-}
-.ids-axis-chart g[tabindex="0"]:focus {
-  outline: var(--ids-axis-chart-focus-group-outline);
-}
-.ids-axis-chart .labels {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: var(--ids-axis-chart-label-font-family);
-  font-size: var(--ids-axis-chart-label-font-size);
-}
-.ids-axis-chart .labels text {
-  fill: var(--ids-axis-chart-label-text-fill);
-}
-.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-label-axis-text-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-spacing-md);
-  text-align: center;
-}
-
-.tooltip.chart-legend {
-  flex-direction: column;
-  margin-block-end: var(--ids-spacing-lg);
-  padding: 0;
-}
-.tooltip.chart-legend .swatch {
-  margin-inline: var(--ids-spacing-md);
-  padding: 0;
-}
-
-.tooltip-row span {
-  padding-inline-start: var(--ids-spacing-sm);
-  padding-inline-end: var(--ids-spacing-md);
-}
-
-: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-spacing-lg);
-  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-spacing-sm);
-}
-.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;
-  }
-}