/* apexcharts.css */

.apex-charts {
    min-height: 10px !important;

    .apexcharts-canvas {
        margin: 0 auto;
    }
}

.apexcharts-tooltip-title,
.apex-charts text,
.apexcharts-tooltip *,
.apexcharts-tooltip-text,
.apexcharts-xaxistooltip-text,
.apexcharts-datalabels text,
.apexcharts-legend-text,
.apexcharts-title-text,
.apexcharts-subtitle-text,
.apexcharts-yaxis text,
.apexcharts-xaxis text {
    @apply font-secondary!;
}

.apexcharts-tooltip {
    border: 1px solid var(--color-default-300) !important;
    background-color: var(--color-card) !important;
    box-shadow: var(--shadow) !important;

    .apexcharts-tooltip-title {
        @apply !bg-light/75;
        border-bottom: 1px solid var(--color-default-300) !important;
    }
}

.apexcharts-legend-series,
.apexcharts-legend-text {
    font-weight: 600;
}

.apexcharts-gridline {
    pointer-events: none;
    stroke-dasharray: 3;
}

.apexcharts-xaxis-tick,
.apexcharts-gridline,
.apexcharts-grid-borders .apexcharts-gridline + line,
.apexcharts-radar-series polygon,
.apexcharts-radar-series line,
.apexcharts-pie circle,
.apexcharts-pie line {
    stroke: var(--color-default-300);
}

.apexcharts-legend-text {
    color: var(--color-default-600) !important;
    font-size: 13px !important;
    vertical-align: middle;
}

.apexcharts-legend-marker {
    vertical-align: middle;
    margin-inline-end: 5px !important;
    top: 1px !important;
}

.apexcharts-pie-label {
    fill: white !important;
}

.apexcharts-title-text,
.apexcharts-subtitle-text,
.apexcharts-xaxis text,
.apexcharts-yaxis text {
    fill: var(--color-default-400);
}

.apexcharts-yaxis-title {
    font-weight: 50;
}

.apexcharts-annotation-rect {
    fill: var(--color-default-100) !important;
}

.apexcharts-xaxis-annotations,
.apexcharts-yaxis-annotations {
    rect {
        stroke: none;
    }
}

.apex-toolbar {
    .btn-light.active {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: white;
    }
}

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    @apply !bg-card !text-default-600 !border-default-300 !border !shadow;
}

.apexcharts-xaxistooltip-bottom {
    &::before {
        @apply !border-b-default-200;
    }

    &::after {
        border-bottom-color: var(--color-card) !important;
    }
}

.apexcharts-xaxistooltip-top {
    &::before {
        @apply !border-t-default-200;
    }

    &::after {
        border-top-color: var(--color-card) !important;
    }
}

.apexcharts-yaxistooltip-left {
    &::before {
        @apply !border-s-default-200;
    }

    &::after {
        border-left-color: var(--color-card) !important;
    }
}

.apexcharts-datalabel-value,
.apexcharts-datalabel-label {
    @apply !fill-body-color;
}

.apexcharts-menu {
    @apply !bg-card !border-default-300 !border !p-1 !text-center !shadow;

    .apexcharts-menu-item {
        &:hover {
            @apply !text-default-700 !bg-default-100;
        }
    }
}

.apexcharts-track {
    path {
        stroke: var(--color-default-100);
    }
}

.apexcharts-marker {
    @apply stroke-body-bg;
}

.apexcharts-grid {
    rect {
        fill: none;
    }
}

.apex-charts .apexcharts-heatmap-series rect,
.apex-charts .apexcharts-treemap rect,
.apex-charts .apexcharts-bar-series path,
.apex-charts .apexcharts-pie-series path {
    @apply stroke-card;
}

.apexcharts-data-labels {
    padding-inline-start: 10px !important;
}

.apexcharts-svg:focus {
    outline: none;
}
