/* ============================================
     Chart Component (ApexCharts)
     ============================================ */

/* Chart Tooltip */
.uk-chart .apexcharts-tooltip {
  /* Base Variables */
  --uk-chart-tooltip-radius: var(--uk-global-radius);
  --uk-chart-tooltip-shadow: var(--uk-global-shadow);
  --uk-chart-tooltip-font-size: var(--uk-global-font-size-small);
  --uk-chart-tooltip-leading: var(--uk-global-line-height-small);
  --uk-chart-tooltip-color: var(--uk-bg-f);
  --uk-chart-tooltip-color-o: 100%;

  /* Computed value */
  --uk-chart-tooltip-color-computed: color-mix(
    in srgb,
    var(--uk-chart-tooltip-color) var(--uk-chart-tooltip-color-o),
    transparent
  );

  border-radius: var(--uk-chart-tooltip-radius);
  box-shadow: var(--uk-chart-tooltip-shadow);
  font-size: var(--uk-chart-tooltip-font-size);
  line-height: var(--uk-chart-tooltip-leading);
  color: var(--uk-chart-tooltip-color-computed);
}

.uk-chart .apexcharts-tooltip.apexcharts-theme-light,
.uk-chart .apexcharts-tooltip.apexcharts-theme-dark {
  /* Base Variables */
  --uk-chart-tooltip-border-width: 1px;
  --uk-chart-tooltip-border-color: var(--uk-border);
  --uk-chart-tooltip-border-color-o: 10%;
  --uk-chart-tooltip-bg: var(--uk-bg);
  --uk-chart-tooltip-bg-o: 100%;

  /* Computed values */
  --uk-chart-tooltip-border-color-computed: color-mix(
    in srgb,
    var(--uk-chart-tooltip-border-color) var(--uk-chart-tooltip-border-color-o),
    transparent
  );
  --uk-chart-tooltip-bg-computed: color-mix(
    in srgb,
    var(--uk-chart-tooltip-bg) var(--uk-chart-tooltip-bg-o),
    transparent
  );

  border-width: var(--uk-chart-tooltip-border-width);
  border-style: solid;
  border-color: var(--uk-chart-tooltip-border-color-computed);
  background-color: var(--uk-chart-tooltip-bg-computed);
}

.uk-chart .apexcharts-tooltip-title {
  /* Base Variables */
  --uk-chart-tooltip-title-padding: 6px;
  --uk-chart-tooltip-title-font-size: var(--uk-global-font-size-small);
  --uk-chart-tooltip-title-leading: var(--uk-global-line-height-small);
  --uk-chart-tooltip-title-font-weight: 600;

  padding: var(--uk-chart-tooltip-title-padding);
  font-size: var(--uk-chart-tooltip-title-font-size);
  line-height: var(--uk-chart-tooltip-title-leading);
  font-weight: var(--uk-chart-tooltip-title-font-weight);
}

.uk-chart .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
.uk-chart .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
  /* Base Variables */
  --uk-chart-tooltip-title-border-width: 1px;
  --uk-chart-tooltip-title-bg: var(--uk-bg);
  --uk-chart-tooltip-title-bg-o: 100%;
  --uk-chart-tooltip-title-border-color: var(--uk-border);
  --uk-chart-tooltip-title-border-color-o: 10%;

  /* Computed values */
  --uk-chart-tooltip-title-bg-computed: color-mix(
    in srgb,
    var(--uk-chart-tooltip-title-bg) var(--uk-chart-tooltip-title-bg-o),
    transparent
  );
  --uk-chart-tooltip-title-border-color-computed: color-mix(
    in srgb,
    var(--uk-chart-tooltip-title-border-color)
      var(--uk-chart-tooltip-title-border-color-o),
    transparent
  );

  background-color: var(--uk-chart-tooltip-title-bg-computed);
  border-bottom-width: var(--uk-chart-tooltip-title-border-width);
  border-bottom-style: solid;
  border-bottom-color: var(--uk-chart-tooltip-title-border-color-computed);
}

.uk-chart .apexcharts-tooltip-marker::before {
  font-size: inherit;
}

/* Chart Container */
.uk-chart-container {
  /* Base Variables */
  --uk-chart-container-radius: var(--uk-global-radius);
  --uk-chart-container-shadow: var(--uk-global-shadow);
  --uk-chart-container-border-color: var(--uk-border);
  --uk-chart-container-border-color-o: 10%;
  --uk-chart-container-bg: var(--uk-bg);
  --uk-chart-container-bg-o: 100%;
  --uk-chart-container-color: var(--uk-bg-f);
  --uk-chart-container-color-o: 100%;

  /* Computed values */
  --uk-chart-container-border-color-computed: color-mix(
    in srgb,
    var(--uk-chart-container-border-color)
      var(--uk-chart-container-border-color-o),
    transparent
  );
  --uk-chart-container-bg-computed: color-mix(
    in srgb,
    var(--uk-chart-container-bg) var(--uk-chart-container-bg-o),
    transparent
  );
  --uk-chart-container-color-computed: color-mix(
    in srgb,
    var(--uk-chart-container-color) var(--uk-chart-container-color-o),
    transparent
  );

  border-radius: var(--uk-chart-container-radius);
  box-shadow: var(--uk-chart-container-shadow);
  border: 1px solid var(--uk-chart-container-border-color-computed);
  background-color: var(--uk-chart-container-bg-computed);
  color: var(--uk-chart-container-color-computed);
}

.uk-chart-container .text-muted-foreground {
  color: var(--uk-muted-f);
}

/* Chart Series Group */
.uk-chart .apexcharts-tooltip-series-group.apexcharts-active,
.uk-chart .apexcharts-tooltip-series-group:last-child {
  padding-block-end: 0;
}

.uk-chart .apexcharts-tooltip-series-group {
  /* Base Variables */
  --uk-chart-series-group-padding: 0 8px;

  padding: var(--uk-chart-series-group-padding);
}

/* Chart Legend */
.uk-chart .apexcharts-legend-text {
  /* Base Variables */
  --uk-chart-legend-font-size: var(--uk-global-font-size-small);
  --uk-chart-legend-leading: var(--uk-global-line-height-small);
  --uk-chart-legend-padding-inline-start: 18px;
  --uk-chart-legend-margin-inline-start: -16px;
  --uk-chart-legend-color: var(--uk-bg-f);
  --uk-chart-legend-color-o: 100%;

  /* Computed value */
  --uk-chart-legend-color-computed: color-mix(
    in srgb,
    var(--uk-chart-legend-color) var(--uk-chart-legend-color-o),
    transparent
  );

  color: var(--uk-chart-legend-color-computed) !important;
  font-size: var(--uk-chart-legend-font-size);
  line-height: var(--uk-chart-legend-leading);
  padding-inline-start: var(--uk-chart-legend-padding-inline-start);
  margin-inline-start: var(--uk-chart-legend-margin-inline-start);
}

/* ============================================
     Chart Color Themes
     ============================================ */

.uk-theme-red {
  --uk-chart-1: hsl(0 93.5% 81.8%);
  --uk-chart-2: hsl(0 84.2% 60.2%);
  --uk-chart-3: hsl(0 72.2% 50.6%);
  --uk-chart-4: hsl(0 73.7% 41.8%);
  --uk-chart-5: hsl(0 70% 35.3%);
}

.uk-theme-rose {
  --uk-chart-1: hsl(352.6 95.7% 81.8%);
  --uk-chart-2: hsl(349.7 89.2% 60.2%);
  --uk-chart-3: hsl(346.8 77.2% 49.8%);
  --uk-chart-4: hsl(345.3 82.7% 40.8%);
  --uk-chart-5: hsl(343.4 79.7% 34.7%);
}

.uk-theme-orange {
  --uk-chart-1: hsl(30.7 97.2% 72.4%);
  --uk-chart-2: hsl(24.6 95% 53.1%);
  --uk-chart-3: hsl(20.5 90.2% 48.2%);
  --uk-chart-4: hsl(17.5 88.3% 40.4%);
  --uk-chart-5: hsl(15 79.1% 33.7%);
}

.uk-theme-green {
  --uk-chart-1: hsl(141 78.9% 85.1%);
  --uk-chart-2: hsl(142.1 70.6% 45.3%);
  --uk-chart-3: hsl(142.1 76.2% 36.3%);
  --uk-chart-4: hsl(142.4 71.8% 29.2%);
  --uk-chart-5: hsl(142.8 64.2% 24.1%);
}

.uk-theme-yellow {
  --uk-chart-1: hsl(50.4 97.8% 63.5%);
  --uk-chart-2: hsl(45.4 93.4% 47.5%);
  --uk-chart-3: hsl(40.6 96.1% 40.4%);
  --uk-chart-4: hsl(35.5 91.7% 32.9%);
  --uk-chart-5: hsl(31.8 81% 28.8%);
}

.uk-theme-violet {
  --uk-chart-1: hsl(252.5 94.7% 85.1%);
  --uk-chart-2: hsl(258.3 89.5% 66.3%);
  --uk-chart-3: hsl(262.1 83.3% 57.8%);
  --uk-chart-4: hsl(263.4 70% 50.4%);
  --uk-chart-5: hsl(263.4 69.3% 42.2%);
}

.uk-theme-amber {
  --uk-chart-1: hsl(45.9 96.7% 64.5%);
  --uk-chart-2: hsl(37.7 92.1% 50.2%);
  --uk-chart-3: hsl(32.1 94.6% 43.7%);
  --uk-chart-4: hsl(26 90.5% 37.1%);
  --uk-chart-5: hsl(22.7 82.5% 31.4%);
}

.uk-theme-purple {
  --uk-chart-1: hsl(269.2 97.4% 85.1%);
  --uk-chart-2: hsl(270.7 91% 65.1%);
  --uk-chart-3: hsl(271.5 81.3% 55.9%);
  --uk-chart-4: hsl(272.1 71.7% 47.1%);
  --uk-chart-5: hsl(272.9 67.2% 39.4%);
}

.uk-theme-teal {
  --uk-chart-1: hsl(170.6 76.9% 64.3%);
  --uk-chart-2: hsl(173.4 80.4% 40%);
  --uk-chart-3: hsl(174.7 83.9% 31.6%);
  --uk-chart-4: hsl(175.3 77.4% 26.1%);
  --uk-chart-5: hsl(176.1 69.4% 21.8%);
}

.uk-theme-stone {
  --uk-chart-1: hsl(24 5.7% 82.9%);
  --uk-chart-2: hsl(25 5.3% 44.7%);
  --uk-chart-3: hsl(33.3 5.5% 32.4%);
  --uk-chart-4: hsl(30 6.3% 25.1%);
  --uk-chart-5: hsl(12 6.5% 15.1%);
}

.uk-chart-palette {
  --uk-chart-1: hsl(173 58% 39%);
  --uk-chart-2: hsl(12 76% 61%);
  --uk-chart-3: hsl(197 37% 24%);
  --uk-chart-4: hsl(43 74% 66%);
  --uk-chart-5: hsl(27 87% 67%);
}

.dark.uk-chart-palette {
  --uk-chart-1: hsl(220 70% 50%);
  --uk-chart-2: hsl(340 75% 55%);
  --uk-chart-3: hsl(30 80% 55%);
  --uk-chart-4: hsl(280 65% 60%);
  --uk-chart-5: hsl(160 60% 45%);
}

.uk-chart-sapphire {
  --uk-chart-1: hsl(221.2 83.2% 53.3%);
  --uk-chart-2: hsl(212 95% 68%);
  --uk-chart-3: hsl(216 92% 60%);
  --uk-chart-4: hsl(210 98% 78%);
  --uk-chart-5: hsl(212 97% 87%);
}

.dark.uk-chart-sapphire {
  --uk-chart-1: hsl(221.2 83.2% 53.3%);
  --uk-chart-2: hsl(212 95% 68%);
  --uk-chart-3: hsl(216 92% 60%);
  --uk-chart-4: hsl(210 98% 78%);
  --uk-chart-5: hsl(212 97% 87%);
}

.uk-chart-ruby {
  --uk-chart-1: hsl(347 77% 50%);
  --uk-chart-2: hsl(352 83% 91%);
  --uk-chart-3: hsl(350 80% 72%);
  --uk-chart-4: hsl(351 83% 82%);
  --uk-chart-5: hsl(349 77% 62%);
}

.dark.uk-chart-ruby {
  --uk-chart-1: hsl(347 77% 50%);
  --uk-chart-2: hsl(349 77% 62%);
  --uk-chart-3: hsl(350 80% 72%);
  --uk-chart-4: hsl(351 83% 82%);
  --uk-chart-5: hsl(352 83% 91%);
}

.uk-chart-emerald {
  --uk-chart-1: hsl(139 65% 20%);
  --uk-chart-2: hsl(140 74% 44%);
  --uk-chart-3: hsl(142 88% 28%);
  --uk-chart-4: hsl(137 55% 15%);
  --uk-chart-5: hsl(141 40% 9%);
}

.dark.uk-chart-emerald {
  --uk-chart-1: hsl(142 88% 28%);
  --uk-chart-2: hsl(139 65% 20%);
  --uk-chart-3: hsl(140 74% 24%);
  --uk-chart-4: hsl(137 55% 15%);
  --uk-chart-5: hsl(141 40% 9%);
}