@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/styles/06-components/_components.chart.scss

@@ -0,0 +1,2102 @@
+@use '../01-settings/settings.config' as *;
+@use '../01-settings/settings.chart' as *;
+@use '../01-settings/settings.colors' as *;
+@use '../01-settings/settings.spacing' as *;
+@use '../01-settings/settings.typography' as *;
+@use '../01-settings/settings.border-radius' as *;
+@use '../01-settings/settings.box-shadow' as *;
+@use '../01-settings/settings.maps' as color-maps;
+@use '../02-tools/tools.component' as *;
+@use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.animations' as *;
+
+@use 'sass:map';
+
+.c-chart {
+  $root: &;
+
+  --#{$prefix}chart-primary-color: #{$chart-primary-color};
+  --#{$prefix}chart-secondary-color: #{$chart-secondary-color};
+  --#{$prefix}chart-border-radius: #{$chart-border-radius};
+  --#{$prefix}chart-padding: #{$chart-padding};
+  --#{$prefix}chart-gap: #{$chart-gap};
+  --#{$prefix}chart-border-width: #{$chart-border-width};
+  --#{$prefix}chart-border-color: #{$chart-border-color};
+  --#{$prefix}chart-bg: #{$chart-bg};
+  --#{$prefix}chart-min-height: #{$chart-min-height};
+
+  display: flex;
+  flex-direction: column;
+  border: var(--#{$prefix}chart-border-width) solid var(--#{$prefix}chart-border-color);
+  border-radius: var(--#{$prefix}chart-border-radius);
+  overflow: hidden;
+  box-shadow: $box-shadow-sm;
+  position: relative;
+  min-height: var(--#{$prefix}chart-min-height);
+  width: 100%;
+  max-width: 100%;
+  background-color: var(--#{$prefix}chart-bg);
+  @include basic-transition();
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      135deg,
+      rgba(var(--#{$prefix}primary-rgb), 0.1) 0%,
+      transparent 50%,
+      rgba(var(--#{$prefix}secondary-rgb), 0.05) 100%
+    );
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  &:hover {
+    box-shadow: $box-shadow-lg;
+    border-color: var(--#{$prefix}primary-border-subtle);
+  }
+
+  &:focus-visible {
+    box-shadow:
+      $box-shadow-md,
+      0 0 0 $chart-focus-ring-width var(--#{$prefix}primary-border-subtle);
+  }
+
+  &--xs {
+    --#{$prefix}chart-min-height: #{$chart-min-height-xs};
+    --#{$prefix}chart-padding: #{map.get($spacing-sizes, 2)};
+    font-size: $font-size-xs;
+  }
+
+  &--sm {
+    --#{$prefix}chart-min-height: #{$chart-min-height-sm};
+    --#{$prefix}chart-padding: #{map.get($spacing-sizes, 3)};
+    font-size: $font-size-sm;
+  }
+
+  &--md {
+    --#{$prefix}chart-min-height: #{$chart-min-height-md};
+    --#{$prefix}chart-padding: #{$chart-padding};
+    font-size: $font-size-base;
+  }
+
+  &--lg {
+    --#{$prefix}chart-min-height: #{$chart-min-height-lg};
+    --#{$prefix}chart-padding: #{map.get($spacing-sizes, 6)};
+    font-size: $font-size-md;
+  }
+
+  &--xl {
+    --#{$prefix}chart-min-height: #{$chart-min-height-xl};
+    --#{$prefix}chart-padding: #{map.get($spacing-sizes, 8)};
+    font-size: $font-size-lg;
+  }
+
+  &--2xl {
+    --#{$prefix}chart-min-height: #{$chart-min-height-2xl};
+    --#{$prefix}chart-padding: #{map.get($spacing-sizes, 10)};
+    font-size: $font-size-lg;
+  }
+
+  &--full {
+    height: 100vh;
+    min-height: auto;
+    border-radius: 0;
+  }
+
+  &--auto {
+    height: auto;
+    min-height: $chart-canvas-min-height;
+  }
+
+  @each $color, $value in color-maps.$theme-colors {
+    &--#{$color} {
+      --#{$prefix}chart-primary-color: var(--#{$prefix}#{$color}-6);
+      --#{$prefix}chart-border-color: var(--#{$prefix}#{$color}-border-subtle);
+
+      &:hover {
+        border-color: var(--#{$prefix}#{$color}-border-subtle);
+      }
+    }
+  }
+
+  &--loading {
+    #{$root}__content {
+      position: relative;
+      overflow: hidden;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+        animation: chart-shimmer 2s infinite;
+      }
+    }
+
+    #{$root}__canvas {
+      opacity: 0.3;
+      filter: blur(1px);
+    }
+  }
+
+  &--interactive {
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: $box-shadow-xl;
+    }
+
+    &:active {
+      transform: $chart-active-transform;
+      box-shadow: $box-shadow-md;
+      transition-duration: 0.1s;
+    }
+
+    &:focus-visible {
+      transform: translateY(-1px);
+    }
+  }
+
+  &--disabled {
+    pointer-events: none;
+    opacity: 0.6;
+
+    #{$root}__content {
+      filter: grayscale(80%) opacity(0.6);
+    }
+
+    #{$root}__canvas {
+      pointer-events: none;
+    }
+
+    &:hover {
+      transform: none;
+      box-shadow: $box-shadow-sm;
+    }
+  }
+
+  &--fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999;
+    border-radius: 0;
+    box-shadow: none;
+    background: var(--#{$prefix}primary-bg-default);
+  }
+
+  &--elevated {
+    box-shadow: $box-shadow-lg;
+    transform: translateY(-2px);
+
+    &:hover {
+      box-shadow: $box-shadow-xl;
+      transform: translateY(-4px);
+    }
+  }
+
+  &--flat {
+    box-shadow: none;
+    border: 2px solid var(--#{$prefix}primary-border-subtle);
+
+    &:hover {
+      box-shadow: $box-shadow-sm;
+      transform: none;
+    }
+  }
+
+  &--rounded {
+    border-radius: $border-radius-xl;
+  }
+
+  &--square {
+    border-radius: 0;
+  }
+
+  &__header {
+    padding: var(--#{$prefix}chart-padding);
+    border-bottom: var(--#{$prefix}chart-border-width) solid var(--#{$prefix}brand-bg-subtle);
+    backdrop-filter: blur($chart-header-backdrop-blur);
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--#{$prefix}chart-gap);
+    z-index: 2;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: var(--#{$prefix}chart-padding);
+      right: var(--#{$prefix}chart-padding);
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        var(--#{$prefix}brand-border-subtle),
+        transparent
+      );
+    }
+  }
+
+  &__header-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__title {
+    margin: 0 0 $chart-title-spacer-y 0;
+    font-size: $chart-title-font-size;
+    font-weight: $chart-title-font-weight;
+    color: $chart-title-color;
+    letter-spacing: -0.02em;
+    line-height: 1.3;
+    word-wrap: break-word;
+    hyphens: auto;
+  }
+
+  &__subtitle {
+    margin: 0;
+    color: $chart-subtitle-color;
+    opacity: 0.8;
+    line-height: 1.4;
+    word-wrap: break-word;
+  }
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--#{$prefix}chart-gap);
+    flex-shrink: 0;
+    margin-left: auto;
+    padding: map.get($spacing-sizes, 1);
+    border-radius: $border-radius-md;
+    background: var(--#{$prefix}primary-bg-subtle);
+    backdrop-filter: blur(8px);
+    border: 1px solid var(--#{$prefix}primary-border-subtle);
+    box-shadow: $box-shadow-sm;
+    transition: all $chart-transition-duration $chart-transition-timing;
+
+    &:hover {
+      box-shadow: $box-shadow-md;
+      background: var(--#{$prefix}primary-bg-default);
+    }
+  }
+
+  &__action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: rem(32px);
+    height: rem(32px);
+    border-radius: $border-radius-sm;
+    border: 1px solid transparent;
+    background-color: transparent;
+    color: var(--#{$prefix}secondary-text-emphasis);
+    cursor: pointer;
+    transition: all $chart-transition-duration $chart-transition-timing;
+    position: relative;
+    overflow: hidden;
+    font-size: rem(14px);
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: var(--#{$prefix}primary-6);
+      opacity: 0;
+      border-radius: inherit;
+      transition: opacity $chart-transition-duration $chart-transition-timing;
+    }
+
+    svg {
+      position: relative;
+      z-index: 1;
+      width: rem(16px);
+      height: rem(16px);
+      transition: transform $chart-transition-duration $chart-transition-timing;
+    }
+
+    &:hover {
+      background-color: var(--#{$prefix}primary-bg-subtle);
+      color: var(--#{$prefix}primary-text-emphasis);
+      border-color: var(--#{$prefix}primary-border-subtle);
+      transform: translateY(-1px);
+      box-shadow: $box-shadow-sm;
+
+      &::before {
+        opacity: 0.1;
+      }
+
+      svg {
+        transform: scale(1.1);
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--#{$prefix}primary-6);
+      outline-offset: 2px;
+      border-color: var(--#{$prefix}primary-border-subtle);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+
+      &::before {
+        opacity: 0.2;
+      }
+
+      svg {
+        transform: scale(0.95);
+      }
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+      pointer-events: none;
+      transform: none;
+      box-shadow: none;
+
+      &:hover {
+        transform: none;
+        box-shadow: none;
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+
+    // Variant styles
+    &--primary {
+      background-color: var(--#{$prefix}primary-6);
+      color: white;
+      border-color: var(--#{$prefix}primary-6);
+
+      &:hover {
+        background-color: var(--#{$prefix}primary-7);
+        border-color: var(--#{$prefix}primary-7);
+      }
+
+      &:active {
+        background-color: var(--#{$prefix}primary-8);
+      }
+    }
+
+    &--success {
+      background-color: var(--#{$prefix}success-6);
+      color: white;
+      border-color: var(--#{$prefix}success-6);
+
+      &:hover {
+        background-color: var(--#{$prefix}success-7);
+        border-color: var(--#{$prefix}success-7);
+      }
+    }
+
+    &--warning {
+      background-color: var(--#{$prefix}warning-6);
+      color: white;
+      border-color: var(--#{$prefix}warning-6);
+
+      &:hover {
+        background-color: var(--#{$prefix}warning-7);
+        border-color: var(--#{$prefix}warning-7);
+      }
+    }
+
+    &--danger {
+      background-color: var(--#{$prefix}error-6);
+      color: white;
+      border-color: var(--#{$prefix}error-6);
+
+      &:hover {
+        background-color: var(--#{$prefix}error-7);
+        border-color: var(--#{$prefix}error-7);
+      }
+    }
+  }
+
+  &__export-group {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: map.get($spacing-sizes, 1);
+
+    &:hover {
+      #{$root}__export-dropdown {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+      }
+    }
+  }
+
+  &__export-dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: map.get($spacing-sizes, 1);
+    background: var(--#{$prefix}primary-bg-default);
+    border: 1px solid var(--#{$prefix}primary-border-subtle);
+    border-radius: $border-radius-md;
+    box-shadow: $box-shadow-lg;
+    padding: map.get($spacing-sizes, 1);
+    min-width: rem(120px);
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-8px);
+    transition: all $chart-transition-duration $chart-transition-timing;
+    backdrop-filter: blur(8px);
+  }
+
+  &__export-option {
+    display: block;
+    width: 100%;
+    padding: map.get($spacing-sizes, 2) map.get($spacing-sizes, 3);
+    border: none;
+    background: transparent;
+    color: var(--#{$prefix}primary-text-emphasis);
+    font-size: rem(12px);
+    font-weight: $font-weight-medium;
+    text-align: left;
+    border-radius: $border-radius-sm;
+    cursor: pointer;
+    transition: all $chart-transition-duration $chart-transition-timing;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+
+    &:hover {
+      background-color: var(--#{$prefix}primary-bg-subtle);
+      color: var(--#{$prefix}primary-text-emphasis);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--#{$prefix}primary-6);
+      outline-offset: -2px;
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: map.get($spacing-sizes, 1);
+    }
+  }
+
+  &__content {
+    flex: 1;
+    position: relative;
+    padding: var(--#{$prefix}chart-padding);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: $chart-canvas-min-height;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: radial-gradient(
+        circle at 1px 1px,
+        var(--#{$prefix}primary-border-subtle) 1px,
+        transparent 0
+      );
+      background-size: $chart-pattern-size $chart-pattern-size;
+      opacity: $chart-pattern-opacity;
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.02) 0%,
+        transparent 50%,
+        rgba(0, 0, 0, 0.02) 100%
+      );
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  &__canvas {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    border-radius: $border-radius-sm;
+    z-index: 2;
+
+    svg {
+      width: 100%;
+      height: 100%;
+      shape-rendering: geometricPrecision;
+      text-rendering: optimizeLegibility;
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: crisp-edges;
+    }
+
+    canvas {
+      width: 100%;
+      height: 100%;
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: crisp-edges;
+    }
+  }
+
+  // Enhanced interactive features
+  &__crosshair {
+    pointer-events: none;
+
+    line,
+    &-line {
+      stroke: $chart-primary-border;
+      stroke-width: 1;
+      stroke-dasharray: 4, 4;
+      opacity: 0.7;
+
+      &--vertical,
+      &--horizontal {
+        opacity: 0.7;
+      }
+    }
+  }
+
+  &__zoom-indicator {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 4px 8px;
+    border-radius: $border-radius-sm;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  &__navigator {
+    opacity: 0.8;
+
+    rect {
+      fill: rgba(0, 0, 0, 0.05);
+      stroke: var(--#{$prefix}gray-3);
+      stroke-width: 1;
+    }
+
+    path {
+      stroke-width: 1;
+      fill: none;
+      opacity: 0.6;
+    }
+  }
+
+  &__real-time-indicator {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--#{$prefix}success-bg-subtle);
+    color: var(--#{$prefix}success-text-emphasis);
+    padding: 4px 8px;
+    border-radius: $border-radius-sm;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    border: 1px solid var(--#{$prefix}success-border-subtle);
+
+    &::before {
+      content: '';
+      width: 6px;
+      height: 6px;
+      background: var(--#{$prefix}success-6);
+      border-radius: 50%;
+      animation: chart-pulse-dot 2s ease-in-out infinite;
+    }
+  }
+
+  &__legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $chart-legend-spacer;
+    padding: var(--#{$prefix}chart-padding);
+    border-top: var(--#{$prefix}chart-border-width) solid var(--#{$prefix}brand-border-subtle);
+    z-index: 2;
+  }
+
+  &__legend-item {
+    display: flex;
+    align-items: center;
+    gap: $chart-legend-item-spacer;
+    cursor: pointer;
+    padding: map.get($spacing-sizes, 2) map.get($spacing-sizes, 3);
+    border-radius: $border-radius-md;
+    border: var(--#{$prefix}chart-border-width) solid transparent;
+    background-color: transparent;
+    transition: all $chart-transition-duration $chart-transition-timing;
+    user-select: none;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: var(--#{$prefix}secondary-bg-subtle);
+      opacity: 0;
+      transition: opacity $chart-transition-duration $chart-transition-timing;
+    }
+
+    &:hover {
+      background-color: var(--#{$prefix}secondary-bg-subtle);
+      border-color: var(--#{$prefix}primary-border-subtle);
+      transform: translateY(-1px);
+      box-shadow: $box-shadow-sm;
+
+      &::before {
+        opacity: 1;
+      }
+    }
+
+    &:focus-visible {
+      @include focus-ring;
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+
+    &[data-visible='false'] {
+      opacity: 0.4;
+      filter: grayscale(60%);
+
+      #{$root}__legend-label {
+        text-decoration: line-through;
+      }
+
+      #{$root}__legend-color {
+        opacity: 0.3;
+        filter: grayscale(100%);
+      }
+    }
+  }
+
+  &__legend-color {
+    width: $chart-legend-color-size;
+    height: $chart-legend-color-size;
+    border-radius: $border-radius-sm;
+    border: var(--#{$prefix}chart-border-width) solid var(--#{$prefix}primary-border-subtle);
+    flex-shrink: 0;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    transition: all $chart-transition-duration $chart-transition-timing;
+    position: relative;
+  }
+
+  &__legend-label {
+    color: var(--#{$prefix}primary-text-emphasis);
+    font-weight: $font-weight-medium;
+    letter-spacing: -0.01em;
+    transition: color $chart-transition-duration $chart-transition-timing;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__tooltip {
+    position: fixed;
+    top: 0;
+    left: 0;
+    backdrop-filter: blur($chart-tooltip-backdrop-blur);
+    border-radius: $chart-tooltip-border-radius;
+    padding: $chart-tooltip-padding-y $chart-tooltip-padding-x;
+    box-shadow: var(--atomix-box-shadow);
+    font-size: $chart-tooltip-font-size;
+    color: $chart-primary-text;
+    pointer-events: none;
+    z-index: 1070;
+    max-width: $chart-tooltip-max-width;
+    min-width: $chart-tooltip-min-width;
+    // background: $chart-primary-bg;
+    border: 1px solid $chart-primary-border;
+    opacity: 1;
+
+    &-title {
+      font-weight: $font-weight-bold;
+      margin-bottom: map.get($spacing-sizes, 2);
+      color: $chart-primary-text;
+      font-size: $font-size-sm;
+    }
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+      gap: map.get($spacing-sizes, 1);
+    }
+
+    &-dataset {
+      display: flex;
+      align-items: center;
+      gap: map.get($spacing-sizes, 2);
+    }
+
+    &-color-indicator {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    &-dataset-label {
+      color: $chart-secondary-text;
+      font-size: $font-size-xs;
+    }
+
+    &-value {
+      font-weight: $font-weight-semibold;
+      color: $chart-primary-text;
+      font-size: $font-size-xs;
+    }
+
+    &-metadata {
+      margin-top: map.get($spacing-sizes, 2);
+      padding-top: map.get($spacing-sizes, 2);
+      border-top: 1px solid $chart-primary-border;
+    }
+
+    &-metadata-item {
+      display: flex;
+      justify-content: space-between;
+      font-size: $font-size-xs;
+      margin-bottom: map.get($spacing-sizes, 1);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &-metadata-key {
+      color: $chart-secondary-text;
+    }
+
+    &-metadata-value {
+      color: $chart-primary-text;
+      font-weight: $font-weight-medium;
+    }
+  }
+
+  &__axis {
+    position: relative;
+    z-index: 55;
+
+    &--x {
+      text-anchor: middle;
+      dominant-baseline: hanging;
+    }
+
+    &--y {
+      text-anchor: end;
+      dominant-baseline: middle;
+    }
+  }
+
+  &__axis-line {
+    stroke: $chart-primary-border;
+    stroke-width: $chart-axis-line-stroke-width;
+    opacity: $chart-axis-line-opacity;
+    transition: opacity $chart-transition-duration $chart-transition-timing;
+
+    &--x,
+    &--y {
+      stroke-width: 2;
+    }
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &__tick-line {
+    stroke: $chart-primary-border;
+    stroke-width: 1;
+  }
+
+  &__tick-label {
+    font-size: $font-size-xs;
+    fill: $chart-secondary-text;
+  }
+
+  &__axis-label {
+    font-size: $chart-axis-label-font-size;
+    font-weight: $chart-axis-label-font-weight;
+    fill: $chart-axis-label-color;
+    text-anchor: middle;
+  }
+
+  &__plot-area {
+    fill: rgba(248, 250, 252, 0.5);
+    stroke: $chart-primary-border;
+    stroke-width: 1;
+  }
+
+  &__value-label {
+    font-size: $font-size-xs;
+    fill: $chart-primary-text;
+    pointer-events: none;
+  }
+
+  &__data-label {
+    font-size: $font-size-xs;
+    fill: $chart-secondary-text;
+    pointer-events: none;
+  }
+
+  &__grid {
+    stroke: $chart-primary-border;
+    stroke-width: $chart-grid-stroke-width;
+    stroke-dasharray: 2, 4;
+    // opacity: $chart-grid-opacity;
+    transition: opacity $chart-transition-duration $chart-transition-timing;
+
+    &--major {
+      stroke-width: $chart-grid-major-stroke-width;
+      stroke-dasharray: none;
+      opacity: $chart-grid-major-opacity;
+    }
+
+    &--minor {
+      opacity: $chart-grid-minor-opacity;
+    }
+
+    &--zero {
+      stroke-width: $chart-grid-zero-stroke-width;
+      stroke-dasharray: none;
+      opacity: $chart-grid-zero-opacity;
+    }
+
+    &:hover {
+      opacity: 0.6;
+    }
+  }
+
+  &__data-point {
+    cursor: pointer;
+    transition: all $chart-transition-duration $chart-transition-timing !important;
+    transform-origin: center center;
+
+    &:hover {
+      opacity: 0.8;
+      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--#{$prefix}primary-border-subtle);
+      outline-offset: 2px;
+    }
+
+    &:active {
+      transform: scale(1.05);
+    }
+
+    &[data-highlighted='true'] {
+      transform: scale(1.2);
+      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
+      z-index: 10;
+
+      animation: chart-glow 2s ease-in-out infinite;
+    }
+
+    &[data-selected='true'] {
+      stroke: var(--#{$prefix}primary-border-subtle);
+      stroke-width: 2;
+      filter: drop-shadow(0 0 0 2px var(--#{$prefix}primary-border-subtle));
+    }
+
+    &[data-animated='true'] {
+      animation: chart-scale-in 0.5s ease-out;
+    }
+  }
+
+  &__loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: map.get($spacing-sizes, 4);
+    color: var(--#{$prefix}secondary-text-emphasis);
+    font-size: $font-size-sm;
+    min-height: $chart-canvas-min-height;
+
+    animation: chart-fade-in 0.6s ease-out;
+  }
+
+  &__loading-spinner {
+    width: $chart-loading-spinner-size;
+    height: $chart-loading-spinner-size;
+    border: 3px solid var(--#{$prefix}primary-border-subtle);
+    border-top: 3px solid var(--#{$prefix}primary-text-emphasis);
+    border-radius: 50%;
+    animation: chart-spin 1.2s $chart-transition-timing infinite;
+  }
+
+  &__loading-text {
+    font-weight: $font-weight-medium;
+    opacity: 0.8;
+    animation: chart-pulse 2s ease-in-out infinite;
+  }
+
+  &__error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: map.get($spacing-sizes, 3);
+    color: var(--#{$prefix}error-text-emphasis);
+    font-size: $font-size-sm;
+    text-align: center;
+    padding: map.get($spacing-sizes, 8);
+    min-height: $chart-canvas-min-height;
+    background-color: var(--#{$prefix}error-bg-subtle);
+    border-radius: $border-radius-md;
+    border: var(--#{$prefix}chart-border-width) solid var(--#{$prefix}error-border-subtle);
+
+    animation: chart-fade-in 0.6s ease-out;
+  }
+
+  &__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: map.get($spacing-sizes, 4);
+    color: var(--#{$prefix}secondary-text-emphasis);
+    font-size: $font-size-sm;
+    text-align: center;
+    padding: map.get($spacing-sizes, 8);
+    min-height: $chart-canvas-min-height;
+    opacity: 0.6;
+
+    animation: chart-fade-in 0.6s ease-out;
+  }
+
+  &--line {
+    #{$root}__canvas {
+      .line-path,
+      #{$root}__line-path {
+        fill: none;
+        stroke-width: $chart-line-width;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        transition: all $chart-transition-duration $chart-transition-timing;
+        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+
+        stroke-dasharray: 1000;
+        stroke-dashoffset: 1000;
+        animation: chart-draw-line 2s ease-out forwards;
+
+        &:hover {
+          stroke-width: $chart-line-width-hover;
+          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+        }
+      }
+
+      .trend-line {
+        stroke-dasharray: 5, 5;
+        opacity: 0.7;
+        animation: chart-dash-flow 2s linear infinite;
+      }
+
+      .moving-average {
+        stroke-dasharray: 4, 4;
+        opacity: 0.6;
+        stroke-width: 1;
+        fill: none;
+      }
+
+      .area-path,
+      #{$root}__area-path {
+        opacity: $chart-area-opacity;
+        transition: opacity $chart-transition-duration $chart-transition-timing;
+        animation: chart-area-fade 1.5s ease-out;
+
+        &:hover {
+          opacity: $chart-area-opacity-hover;
+        }
+      }
+
+      .chart-point-label {
+        font-size: $font-size-xs;
+        font-weight: $font-weight-semibold;
+        text-anchor: middle;
+        dominant-baseline: middle;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+
+        &.visible {
+          opacity: 1;
+        }
+      }
+
+      .data-point {
+        r: $chart-data-point-radius;
+        transition: all $chart-transition-duration $chart-transition-timing;
+        cursor: pointer;
+
+        &:hover {
+          r: $chart-data-point-radius-hover;
+          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+        }
+
+        &[data-highlighted='true'] {
+          r: $chart-data-point-radius-highlighted;
+          stroke-width: 3;
+        }
+
+        &:focus-visible {
+          outline: 2px solid $chart-focus-outline-color;
+          outline-offset: 2px;
+        }
+      }
+    }
+  }
+
+  &--area {
+    #{$root}__canvas {
+      .area-path {
+        opacity: 0.3;
+        transition: opacity $chart-transition-duration $chart-transition-timing;
+
+        animation: chart-area-fade 1.5s ease-out;
+
+        &:hover {
+          opacity: 0.45;
+        }
+      }
+
+      .line-path {
+        stroke-width: 2;
+        opacity: 0.9;
+        transition: all $chart-transition-duration $chart-transition-timing;
+
+        animation: chart-draw-line 2s ease-out;
+
+        &:hover {
+          stroke-width: 3;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &--bar,
+  &--horizontal-bar {
+    #{$root}__canvas {
+      .bar,
+      #{$root}__bar {
+        transition: all $chart-transition-duration $chart-transition-timing;
+        cursor: pointer;
+        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+        animation: chart-bar-grow 0.8s ease-out;
+        opacity: 1;
+
+        &:hover,
+        &--hovered {
+          opacity: $chart-bar-opacity-hover;
+          filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
+        }
+
+        &:focus-visible {
+          outline: 2px solid $chart-primary-border;
+          outline-offset: 2px;
+        }
+
+        &[data-animated='true'] {
+          animation: chart-bar-grow 0.8s ease-out;
+        }
+      }
+
+      .bar-group {
+        .bar {
+          animation-delay: calc(var(--bar-index) * 0.1s);
+        }
+      }
+
+      .bar-value-label,
+      #{$root}__bar-value-label {
+        font-size: $font-size-xs;
+        font-weight: $font-weight-medium;
+        fill: $chart-primary-text;
+        text-anchor: middle;
+        opacity: 1;
+        transition: opacity $chart-transition-duration $chart-transition-timing;
+        font-variant-numeric: tabular-nums;
+        pointer-events: none;
+
+        &.visible {
+          opacity: 1;
+        }
+      }
+
+      .bar-gradient {
+        stop {
+          transition: stop-opacity 0.3s ease;
+        }
+      }
+    }
+  }
+
+  &--bar {
+    #{$root}__canvas .bar {
+      transform-origin: bottom center;
+
+      animation: chart-bar-grow 0.8s ease-out;
+
+      &:hover {
+        transform: scaleY(1.05);
+      }
+    }
+  }
+
+  &--horizontal-bar {
+    #{$root}__canvas .bar {
+      transform-origin: left center;
+
+      animation: chart-bar-grow-horizontal 0.8s ease-out;
+
+      &:hover {
+        transform: scaleX(1.05);
+      }
+    }
+  }
+
+  &--pie,
+  &--donut,
+  &--doughnut {
+    #{$root}__canvas {
+      .pie-slice,
+      .donut-slice,
+      #{$root}__pie-slice,
+      #{$root}__donut-slice {
+        transition: all $chart-pie-transition-duration $chart-transition-timing;
+        stroke: $chart-primary-bg;
+        stroke-width: $chart-pie-stroke-width;
+        cursor: pointer;
+        transform-origin: center;
+        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+        opacity: 1;
+
+        animation: chart-pie-draw 1.5s ease-out;
+
+        &:hover,
+        &--hovered {
+          opacity: 0.8;
+          transform: scale(1.05);
+          stroke-width: $chart-pie-stroke-width-hover;
+          filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
+        }
+
+        &--selected {
+          stroke: $chart-primary-border;
+          stroke-width: 3;
+        }
+
+        &:focus-visible {
+          outline: 2px solid $chart-primary-border;
+          outline-offset: 4px;
+        }
+      }
+
+      .pie-label,
+      #{$root}__pie-label,
+      #{$root}__donut-label {
+        font-size: $font-size-xs;
+        font-weight: $font-weight-semibold;
+        fill: $chart-primary-text;
+        text-anchor: middle;
+        pointer-events: none;
+        transition: all $chart-transition-duration $chart-transition-timing;
+        font-variant-numeric: tabular-nums;
+      }
+    }
+  }
+
+  &--donut,
+  &--doughnut {
+    #{$root}__canvas {
+      .donut-slice {
+        animation: chart-donut-draw 1.5s ease-out;
+      }
+
+      .donut-center,
+      #{$root}__donut-center {
+        transition: fill $chart-transition-duration $chart-transition-timing;
+      }
+
+      #{$root}__donut-center-bg {
+        fill: $chart-primary-bg;
+      }
+
+      .donut-center-label,
+      #{$root}__donut-center-label {
+        font-size: $font-size-sm;
+        font-weight: $font-weight-medium;
+        fill: $chart-secondary-text;
+        text-anchor: middle;
+        dominant-baseline: central;
+        font-variant-numeric: tabular-nums;
+      }
+
+      #{$root}__donut-center-value {
+        font-size: $font-size-xl;
+        font-weight: $font-weight-bold;
+        fill: $chart-primary-text;
+        text-anchor: middle;
+        dominant-baseline: central;
+        font-variant-numeric: tabular-nums;
+      }
+    }
+  }
+
+  &--scatter {
+    #{$root}__canvas {
+      .scatter-point,
+      #{$root}__scatter-point {
+        stroke: $chart-primary-border;
+        stroke-width: 1;
+        transition: all $chart-transition-duration $chart-transition-timing;
+        cursor: pointer;
+        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+        animation: chart-fade-in 0.6s ease-out;
+
+        &:hover {
+          filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
+        }
+
+        &:focus-visible {
+          outline: 2px solid $chart-primary-border;
+          outline-offset: 2px;
+        }
+      }
+
+      #{$root}__scatter-label {
+        font-size: $font-size-xs;
+        fill: $chart-primary-text;
+        pointer-events: none;
+      }
+    }
+  }
+
+  &--bubble {
+    #{$root}__canvas {
+      #{$root}__bubble {
+        stroke: $chart-primary-bg;
+        stroke-width: 2;
+        cursor: pointer;
+        transition: all $chart-transition-duration $chart-transition-timing;
+
+        &--animated {
+          transition: all 1s ease-out;
+        }
+
+        &:hover {
+          // transform: scale(1.1);
+          filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
+        }
+      }
+
+      #{$root}__bubble-label {
+        font-size: $font-size-xs;
+        font-weight: $font-weight-medium;
+        fill: $chart-tertiary-text;
+        pointer-events: none;
+
+        &--center {
+          fill: $chart-invert-text;
+          font-weight: $font-weight-bold;
+          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+        }
+      }
+    }
+  }
+
+  &--radar {
+    #{$root}__canvas {
+      #{$root}__radar-grid {
+        stroke: $chart-primary-border;
+        stroke-width: 1;
+        opacity: 0.3;
+      }
+
+      #{$root}__radar-axis {
+        stroke: $chart-primary-border;
+        stroke-width: 1;
+        opacity: 0.5;
+      }
+
+      #{$root}__radar-label {
+        font-size: $font-size-xs;
+        fill: $chart-secondary-text;
+      }
+
+      #{$root}__radar-fill {
+        transition: opacity $chart-transition-duration $chart-transition-timing;
+
+        &:hover {
+          opacity: 0.5 !important;
+        }
+      }
+
+      #{$root}__radar-line {
+        fill: none;
+        transition: stroke-width $chart-transition-duration $chart-transition-timing;
+
+        &:hover {
+          stroke-width: 3 !important;
+        }
+      }
+
+      #{$root}__radar-point {
+        stroke: $chart-primary-bg;
+        stroke-width: 2;
+        cursor: pointer;
+        transition: all $chart-transition-duration $chart-transition-timing;
+
+        &:hover {
+          transform: scale(1.3);
+          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+        }
+      }
+    }
+  }
+
+  &--candlestick {
+    #{$root}__canvas {
+      .candlestick,
+      #{$root}__candlestick {
+        stroke-width: 1;
+        cursor: pointer;
+        transition: all $chart-transition-duration $chart-transition-timing;
+        animation: chart-fade-in 0.6s ease-out;
+
+        &--bullish {
+          opacity: 0.8;
+        }
+
+        &--bearish {
+          opacity: 1;
+        }
+
+        &:hover {
+          opacity: 0.8;
+          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+        }
+      }
+
+      #{$root}__candlestick-highlight {
+        stroke-width: 2;
+        opacity: 0.5;
+      }
+
+      .wick,
+      #{$root}__wick {
+        stroke-width: $chart-candlestick-wick-stroke-width;
+        opacity: $chart-candlestick-wick-opacity;
+
+        &--hovered {
+          stroke-width: 2;
+        }
+      }
+
+      #{$root}__moving-average {
+        stroke-width: 2;
+        opacity: 0.8;
+      }
+
+      .volume-bar {
+        opacity: $chart-volume-bar-opacity;
+        transition: opacity $chart-transition-duration $chart-transition-timing;
+
+        &:hover {
+          opacity: $chart-volume-bar-opacity-hover;
+        }
+      }
+    }
+  }
+
+  &--gauge {
+    #{$root}__canvas {
+      #{$root}__gauge-background {
+        fill: $chart-secondary-bg;
+        stroke: $chart-primary-border;
+        stroke-width: 1;
+      }
+
+      #{$root}__gauge-zone {
+        stroke: $chart-primary-bg;
+        stroke-width: 2;
+      }
+
+      #{$root}__gauge-tick {
+        &--major {
+          stroke: $chart-secondary-text;
+          stroke-width: 2;
+        }
+
+        &--minor {
+          stroke: $chart-tertiary-text;
+          stroke-width: 1;
+        }
+      }
+
+      #{$root}__gauge-tick-label {
+        font-size: $font-size-xs;
+        fill: $chart-secondary-text;
+      }
+
+      #{$root}__gauge-min-max-label {
+        font-size: $font-size-sm;
+        font-weight: $font-weight-bold;
+        fill: $chart-secondary-text;
+      }
+
+      #{$root}__gauge-needle {
+        #{$root}__gauge-needle-line {
+          stroke-width: 3;
+          stroke-linecap: round;
+        }
+
+        #{$root}__gauge-needle-center {
+          stroke: $chart-primary-bg;
+          stroke-width: 2;
+        }
+      }
+
+      #{$root}__gauge-value {
+        font-size: $font-size-2xl;
+        font-weight: $font-weight-bold;
+        fill: $chart-primary-text;
+      }
+
+      #{$root}__gauge-label {
+        font-size: $font-size-sm;
+        fill: $chart-secondary-text;
+      }
+    }
+  }
+
+  &--funnel {
+    #{$root}__canvas {
+      #{$root}__funnel-segment {
+        stroke: $chart-primary-bg;
+        stroke-width: 2;
+        cursor: pointer;
+        transition: all $chart-transition-duration $chart-transition-timing;
+
+        &--animated {
+          transition: all 1s ease-out;
+        }
+
+        &:hover {
+          opacity: 0.8;
+          filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
+        }
+      }
+
+      #{$root}__funnel-label {
+        font-size: $font-size-sm;
+        font-weight: $font-weight-bold;
+        pointer-events: none;
+
+        &--inside {
+          fill: $chart-invert-text;
+          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+        }
+
+        &--outside {
+          fill: $chart-primary-text;
+        }
+      }
+
+      #{$root}__funnel-value {
+        font-size: $font-size-xs;
+        pointer-events: none;
+
+        &--inside {
+          fill: $chart-invert-text;
+          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+        }
+
+        &--outside {
+          fill: $chart-secondary-text;
+        }
+      }
+
+      #{$root}__funnel-conversion {
+        font-size: $font-size-xs;
+        fill: $chart-secondary-text;
+        font-style: italic;
+      }
+    }
+  }
+
+  &--heatmap {
+    #{$root}__canvas {
+      #{$root}__heatmap-axis-label {
+        font-size: $font-size-xs;
+        fill: var(--#{$prefix}gray-7);
+        font-weight: $font-weight-medium;
+        user-select: none;
+      }
+
+      #{$root}__heatmap-cell {
+        cursor: pointer;
+        transition: all 0.2s ease;
+        shape-rendering: crispEdges;
+
+        &--empty {
+          fill: var(--#{$prefix}gray-2);
+          stroke: var(--#{$prefix}gray-3);
+          stroke-width: 0.5;
+          opacity: 0.6;
+        }
+
+        &--hovered {
+          transform: scale(1.1);
+          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+          z-index: 10;
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--#{$prefix}primary-6);
+          outline-offset: 1px;
+        }
+      }
+
+      #{$root}__heatmap-value {
+        font-size: 9px;
+        font-weight: $font-weight-medium;
+        pointer-events: none;
+        user-select: none;
+        font-variant-numeric: tabular-nums;
+
+        &--light {
+          fill: white;
+          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+        }
+
+        &--dark {
+          fill: var(--#{$prefix}gray-8);
+        }
+      }
+
+      // Calendar variant styles
+      &.c-chart--calendar {
+        #{$root}__heatmap-cell {
+          rx: 2;
+        }
+      }
+
+      // Grid variant styles
+      &.c-chart--grid {
+        #{$root}__heatmap-cell {
+          rx: 4;
+        }
+      }
+    }
+  }
+
+  &--treemap {
+    #{$root}__canvas {
+      #{$root}__treemap-node {
+        cursor: pointer;
+        stroke: $chart-primary-bg;
+        stroke-width: 1;
+        transition: all $chart-transition-duration $chart-transition-timing;
+
+        &--animated {
+          transition: all 750ms ease-out;
+        }
+
+        &--hovered {
+          opacity: 0.8;
+        }
+
+        &--selected {
+          stroke-width: 2;
+        }
+      }
+
+      #{$root}__treemap-label {
+        font-size: $font-size-xs;
+        font-weight: $font-weight-bold;
+        fill: $chart-invert-text;
+        pointer-events: none;
+      }
+
+      #{$root}__treemap-value {
+        font-size: $font-size-xs;
+        fill: $chart-invert-text;
+        opacity: 0.8;
+        pointer-events: none;
+      }
+    }
+  }
+
+  &--waterfall {
+    #{$root}__canvas {
+      #{$root}__waterfall-bar {
+        stroke: $chart-primary-bg;
+        stroke-width: 2;
+        cursor: pointer;
+        transition: all $chart-transition-duration $chart-transition-timing;
+
+        &--animated {
+          transition: all 1s ease-out;
+        }
+
+        &:hover {
+          opacity: 0.8;
+          filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
+        }
+      }
+
+      #{$root}__waterfall-value {
+        font-size: $font-size-xs;
+        font-weight: $font-weight-bold;
+        pointer-events: none;
+
+        &--center {
+          fill: $chart-invert-text;
+          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+        }
+
+        &--outside {
+          fill: $chart-primary-text;
+        }
+      }
+
+      #{$root}__waterfall-connector {
+        stroke-width: 2;
+        opacity: 0.7;
+      }
+
+      #{$root}__waterfall-cumulative-line {
+        stroke-width: 3;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      #{$root}__waterfall-cumulative-point {
+        stroke: $chart-primary-bg;
+        stroke-width: 2;
+      }
+    }
+  }
+}
+
+// Animations
+@keyframes chart-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes chart-shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+@keyframes chart-pulse {
+  0%,
+  100% {
+    opacity: 0.8;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes chart-draw-line {
+  0% {
+    stroke-dashoffset: 1000;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes chart-area-fade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.3;
+  }
+}
+
+@keyframes chart-bar-grow {
+  0% {
+    transform: scaleY(0);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}
+
+@keyframes chart-bar-grow-horizontal {
+  0% {
+    transform: scaleX(0);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes chart-pie-draw {
+  0% {
+    stroke-dasharray: 0 628;
+  }
+  100% {
+    stroke-dasharray: 628 628;
+  }
+}
+
+@keyframes chart-donut-draw {
+  0% {
+    stroke-dasharray: 0 628;
+  }
+  100% {
+    stroke-dasharray: 628 628;
+  }
+}
+
+@keyframes chart-fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes chart-scale-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  60% {
+    opacity: 0.8;
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes chart-slide-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes chart-bubble-grow {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes chart-dash-flow {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: 10;
+  }
+}
+
+@keyframes chart-glow {
+  0%,
+  100% {
+    filter: drop-shadow(0 0 5px currentColor);
+  }
+  50% {
+    filter: drop-shadow(0 0 15px currentColor);
+  }
+}
+
+@keyframes chart-pulse-dot {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(1.2);
+  }
+}
+
+@keyframes chart-zoom-in {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes chart-slide-up {
+  0% {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+// Responsive Design
+@media (max-width: $chart-mobile-breakpoint) {
+  .c-chart {
+    --#{$prefix}chart-min-height: #{map.get($spacing-sizes, 40)};
+    border-radius: $border-radius-md;
+
+    &__header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: map.get($spacing-sizes, 2);
+    }
+
+    &__toolbar {
+      width: 100%;
+      justify-content: flex-end;
+      padding: map.get($spacing-sizes, 2);
+      gap: map.get($spacing-sizes, 2);
+
+      // Stack toolbar items on very small screens
+      @media (max-width: 480px) {
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+    }
+
+    &__action {
+      width: rem(36px);
+      height: rem(36px);
+
+      svg {
+        width: rem(18px);
+        height: rem(18px);
+      }
+    }
+
+    &__export-dropdown {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      margin-top: 0;
+      min-width: rem(200px);
+      max-width: 90vw;
+    }
+
+    &__legend {
+      flex-direction: column;
+      gap: map.get($spacing-sizes, 2);
+    }
+
+    &__legend-item {
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    &:hover {
+      transform: none;
+    }
+  }
+}
+
+@media (max-width: $chart-small-mobile-breakpoint) {
+  .c-chart {
+    --#{$prefix}chart-min-height: #{map.get($spacing-sizes, 36)};
+    --#{$prefix}chart-padding: #{map.get($spacing-sizes, 2)};
+    border-radius: $border-radius-sm;
+
+    &__title {
+      font-size: $font-size-md;
+      margin-bottom: map.get($spacing-sizes, 1);
+    }
+
+    &__subtitle {
+      font-size: $font-size-xs;
+    }
+
+    &__toolbar {
+      padding: map.get($spacing-sizes, 1);
+      gap: map.get($spacing-sizes, 1);
+      border-radius: $border-radius-sm;
+    }
+
+    &__action {
+      width: rem(28px);
+      height: rem(28px);
+      font-size: rem(12px);
+
+      svg {
+        width: rem(14px);
+        height: rem(14px);
+      }
+    }
+
+    &__export-option {
+      padding: map.get($spacing-sizes, 1) map.get($spacing-sizes, 2);
+      font-size: rem(11px);
+    }
+  }
+}
+
+// Enhanced accessibility
+@media (prefers-reduced-motion: reduce) {
+  .c-chart {
+    transition: none;
+
+    &:hover {
+      transform: none;
+    }
+
+    * {
+      animation-duration: 0.01s !important;
+      transition-duration: 0.01s !important;
+    }
+
+    &__real-time-indicator::before {
+      animation: none;
+    }
+  }
+}
+
+// Focus management for keyboard navigation
+.c-chart:focus-within {
+  &__data-point:focus {
+    outline: 2px solid var(--#{$prefix}primary-6);
+    outline-offset: 2px;
+    z-index: 10;
+  }
+
+  &__canvas svg {
+    outline: 2px solid var(--#{$prefix}primary-border-subtle);
+    outline-offset: 2px;
+  }
+}
+
+@media (prefers-contrast: high) {
+  .c-chart {
+    border-width: 2px;
+    background-color: white;
+    color: black;
+    backdrop-filter: none;
+
+    &__grid {
+      stroke-width: 2;
+      opacity: 0.8;
+      stroke: black;
+    }
+
+    &__title {
+      color: black;
+    }
+
+    &__data-point {
+      stroke: black;
+      stroke-width: 2;
+    }
+
+    &__crosshair line {
+      stroke: black;
+      opacity: 1;
+    }
+
+    &__zoom-indicator {
+      background: black;
+      color: white;
+      border: 2px solid white;
+    }
+
+    .line-path {
+      stroke-width: 3 !important;
+    }
+
+    .bar {
+      stroke: black;
+      stroke-width: 2;
+    }
+  }
+}
+
+// Print styles
+@media print {
+  .c-chart {
+    break-inside: avoid;
+    box-shadow: none;
+    border: 2px solid black;
+    background: white;
+
+    &__toolbar {
+      display: none;
+    }
+
+    &__crosshair,
+    &__zoom-indicator,
+    &__real-time-indicator {
+      display: none;
+    }
+
+    * {
+      animation: none !important;
+      transition: none !important;
+    }
+  }
+}