/* == Apex Charts == */
.apexcharts-canvas {
    * {
        @apply !font-sans;
    }

    .apexcharts-gridline,
    .apexcharts-xaxis line,
    .apexcharts-inner .apexcharts-grid-borders line,
    .apexcharts-yaxis line,
    .apexcharts-xaxis-tick {
        @apply stroke-base-content/15;
    }

    .apexcharts-menu {
        @apply !border-base-300 !bg-base-100;

        .apexcharts-menu-item {
            @apply hover:bg-primary;
        }
    }

    .apexcharts-tooltip {
        @apply !bg-base-100 !border-base-300 !shadow;

        .apexcharts-tooltip-title {
            @apply !bg-base-200 !border-base-300;
        }
    }

    .apexcharts-xaxis,
    .apexcharts-yaxis {
        text {
            @apply !fill-base-content;
        }
    }

    .apexcharts-tooltip-text {
        @apply text-base-content;
    }

    .apexcharts-xaxistooltip {
        @apply !bg-base-100 !border-base-300;

        &:before {
            @apply !border-b-base-300;
        }

        &:after {
            @apply !border-b-base-300;
        }
    }

    .apexcharts-title-text,
    .apexcharts-datalabels-group .apexcharts-text {
        @apply !fill-base-content;
    }

    .apexcharts-legend-marker {
        path.apexcharts-marker {
            @apply stroke-transparent;
        }
    }

    .apexcharts-legend-text {
        @apply !text-base-content;
    }

    .apexcharts-series-markers-wrap {
        .apexcharts-series-markers {
            path {
                @apply stroke-base-200;
            }
        }
    }
}