.apexcharts-tooltip,
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};

  background: var(--#{$prefix}popover-bg) !important;
  font-weight: 400 !important;
  box-shadow: var(--#{$prefix}popover-box-shadow) !important;
  border-radius: var(--#{$prefix}popover-border-radius) !important;
  border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color) !important;
}

.apexcharts-tooltip-title {
  font-weight: 500;
  background: var(--#{$prefix}popover-header-bg) !important;
  color: var(--#{$prefix}popover-header-color);
  border-bottom: 1px solid var(--#{$prefix}popover-border-color) !important;
  padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
}

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  border-radius: 4px !important;
}


// Legend
.apexcharts-legend {
  gap: 10px;
}

.apexcharts-legend-series {
  gap: 2px;
}

.apexcharts-legend-marker {
  border-radius: 3px !important;
}