.chart {
    display: flex;

    &.chart-legend-bottom {
        flex-direction: column;

        .chart-legend {
            margin-top: 10px;
            justify-content: center;
            width: 100%;
        }
    }

    &.chart-legend-top {
        flex-direction: column-reverse;

        & .chart-legend {
            justify-content: center;
            width: 100%;
        }
    }

    &.chart-legend-right {
        flex-direction: row;

        & .chart-legend {
            flex-direction: column;
        }
    }

    &.chart-legend-left {
        flex-direction: row-reverse;

        & .chart-legend {
            flex-direction: column;
        }
    }


    & .chart-donut, .chart-pie, chart-line {
        display: flex;
        margin: auto;
    }

    & .chart-legend {
        display: flex;
        padding: 10px 0px;
        margin: auto;
        flex-wrap: wrap;

        & .chart-legend-item {
            display: block;
            margin: 2px 5px;

            & .chart-legend-marker {
                height: 12px;
                width: 12px;
                border-radius: 50%;
                position: relative;
                display: inline-flex;
            }

            & .chart-legend-text {
                display: inline-flex;
            }
        }
    }
}

.charts-yaxis {
    fill: var(--palette-text-primary);
}

.charts-xaxis {
    fill: var(--palette-text-primary);
}

.chart-donut {
    & .donut-hole {
        fill: transparent;
        user-select: none;
        pointer-events: unset;
    }

    & .donut-ring {
        fill: transparent;
        stroke-width: 5;
        stroke: white;
        pointer-events: unset;
    }

    & .donut-segment {
        stroke-width: 5;
        fill: transparent;
        pointer-events: stroke;
        -webkit-transition: stroke .2s ease;
        -moz-transition: stroke .2s ease;
        -o-transition: stroke .2s ease;
        transition: stroke .2s ease;
    }
}

.chart-legend-marker {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
}






.chart-marker-color-0 {
    background-color: #008FFB;
}

.chart-marker-color-1 {
    background-color: #00E396;
}

.chart-marker-color-2 {
    background-color: #FEB019;
}

.chart-marker-color-3 {
    background-color: #FF4560;
}

.chart-marker-color-4 {
    background-color: #594ae2;
}