.htma-mineral-chart {
    --chart-sections-count: 11;
    --chart-color: #aaa;
    /*--chart-highlight-color: hsl(from var(--chart-color) h calc(s + 40) calc(l - 20));*/
    /*--chart-highlight-color: color-mix(in hsl, var(--chart-color) 80%, black 20%);*/
    --chart-highlight-color: oklch(from var(--chart-color) calc(l - 0.1) calc(c + 0.1) h);
    --chart-main-color: var(--chart-color);
    --chart-graphics-color: var(--chart-color);

    --chart-height: 700px;
    --chart-graphics-levels-width: 28px;
    --chart-border-width: 3px;

    --chart-mineral-index-font-size: 23px;

    @media (width > 990px) {
        &[data-chart-mineral-count="5"] { --chart-height: 424px; }
        &[data-chart-mineral-count="6"] { --chart-height: 524px; }
        &[data-chart-mineral-count="7"] { --chart-height: 624px; }
        &[data-chart-mineral-count="8"] { --chart-height: 664px; }
        &[data-chart-mineral-count="9"] { --chart-height: 824px; }
    }

    --chart-section-height: calc((var(--chart-height) - 24px) / var(--chart-sections-count));

    --chart-color-outline: var(--chart-main-color);

    --legend-height-high: 0;
    --legend-height-ideal: 0;
    --legend-height-low: 0;

    --chart-legend-width: 32px;
    --chart-legend-item-font-size: 18px;

    --chart-mineral-min-width: auto;
    --chart-element-name-display: flex;
    --chart-values-padding: 16px 0;
    --chart-values-font-size: 24px;
    --chart-symbol-flex-direction: row;

    --scroll-pages-display: none;

    &[data-is-scrollable="true"] { --scroll-pages-display: flex; }

    --pages-indicator-width-start: 24px;
    --pages-indicator-color-start: rgb(from var(--color-btm-dark-blue) r g b / 0.25);
    --pages-indicator-width-end: 24px;
    --pages-indicator-color-end: rgb(from var(--color-btm-dark-blue) r g b / 0.25);

    &[data-scroll-position="start"] {
        --pages-indicator-width-start: 36px;
        --pages-indicator-color-start: var(--color-dominant);
    }

    &[data-scroll-position="end"] {
        --pages-indicator-width-end: 36px;
        --pages-indicator-color-end: var(--color-dominant);
    }

    @media (width <= 990px) {
        --chart-section-height: 40px;
        --chart-height: calc(var(--chart-section-height) * var(--chart-sections-count) + 24px);
    }

    @media (width <= 880px) {
        --chart-mineral-min-width: 90px;
    }

    @media (width <= 720px) {
        /*--chart-mineral-index-font-size: 19px;*/
        --chart-graphics-bar-width: 20px;
    }

    @media (width <= 640px) {
        /*--chart-element-name-display: none;*/
        --chart-values-padding: 8px 0;
        /*--chart-values-font-size: 18px;*/
        /*--chart-mineral-index-font-size: 19px;*/
    }

    @media (width <= 560px) {
        /*--chart-mineral-min-width: 90px;*/

        --chart-legend-width: 24px;
        --chart-legend-item-font-size: 16px;
    }

    @media (width <= 440px) {
        --chart-symbol-flex-direction: column;
    }

    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    gap: var(--chart-border-width);
    width: 100%;

    .chart-legend {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        width: var(--chart-legend-width);
        height: var(--chart-height);
        border-radius: 16px 0 0 16px;
        background-color: #fff;
        box-shadow: 0 0 0 var(--chart-border-width) var(--chart-main-color);

        .legend-item {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            writing-mode: sideways-lr;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: var(--chart-legend-item-font-size);
            line-height: 1;
            font-weight: 500;
            color: #555;
            font-family: 'Roboto', sans-serif;

            &.legend-high { height: var(--legend-height-high); }
            &.legend-ideal { height: var(--legend-height-ideal); }
            &.legend-low { height: var(--legend-height-low); }

            &:not(:last-child) {
                &:after {
                    content: '';
                    display: block;
                    position: absolute;
                    height: var(--chart-border-width);
                    width: 100%;
                    bottom: -1px;
                    background-color: var(--chart-main-color);
                }
            }
        }
    }

    .chart-body {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 12px;
        width: calc(100% - var(--chart-legend-width));

        .chart-pages {
            position: relative;
            display: var(--scroll-pages-display);
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 12px;
            width: 100%;

            .page-indicator {
                --indicator-width: 36px;
                --indicator-color: rgb(from var(--color-btm-dark-blue) r g b / 0.25);

                width: var(--indicator-width);
                height: 8px;
                border-radius: 8px;
                transition: all .3s linear;
                background-color: var(--indicator-color);

                &:nth-child(1) {
                    --indicator-width: var(--pages-indicator-width-start);
                    --indicator-color: var(--pages-indicator-color-start);
                }

                &:nth-child(2) {
                    --indicator-width: var(--pages-indicator-width-end);
                    --indicator-color: var(--pages-indicator-color-end);
                }
            }
        }
    }

    .chart-values {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: start;
        gap: var(--chart-border-width);
        border-radius: 0 16px 16px 16px;
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
        /*overscroll-behavior-x: contain;*/
        overscroll-behavior-x: none;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 0 0 var(--chart-border-width) var(--chart-main-color);

        .chart-mineral {
            --item-level-start: 0px;
            --item-level-height: 0px;
            --item-level-percent: 0;
            --item-bottom-ofset: 24px;

            --chart-color-high-extremely: rgb(from var(--chart-graphics-color) r g b / 0.35);
            --chart-color-high-very: rgb(from var(--chart-graphics-color) r g b / 0.25);
            --chart-color-high-slightly: rgb(from var(--chart-graphics-color) r g b / 0.15);
            --chart-color-ideal-high: rgb(from var(--chart-graphics-color) r g b / 0.05);
            --chart-color-ideal-low: rgb(from var(--chart-graphics-color) r g b / 0.05);
            --chart-color-low-default: rgb(from var(--chart-graphics-color) r g b / 0.15);
            --chart-color-low-medium: rgb(from var(--chart-graphics-color) r g b / 0.2);
            --chart-color-low-control: rgb(from var(--chart-graphics-color) r g b / 0.35);
            --chart-color-control-zone: rgb(from var(--color-btm-dark-blue) r g b / 0.1);

            &.mineral-not-available {
                --item-bottom-ofset: 0px;
            }

            &.mineral-below-calibration {
                --item-bottom-ofset: 0px;
            }

            &[href] {
                --item-arrow-display: block;

                &:hover {
                    --chart-graphics-color: var(--chart-highlight-color);
                }

                cursor: pointer;
            }

            position: relative;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: start;
            text-decoration: none;
            min-width: var(--chart-mineral-min-width);
            gap: var(--chart-border-width);

            .chart-graphics {
                position: relative;
                z-index: 5;
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-content: start;
                min-height: var(--chart-height);
                transition: all .3s linear;
                background-color: #fff;
                background-position: left top;
                background-repeat: no-repeat;
                background-size: cover;
                box-shadow: 0 0 0 var(--chart-border-width) var(--chart-main-color);

                &:before {
                    content: '';
                    display: block;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 24px;
                    background-color: var(--chart-color-control-zone);
                }

                &:after {
                    content: '';
                    display: block;
                    position: absolute;
                    z-index: -1;
                    bottom: 1px;
                    right: 8px;
                    width: var(--chart-graphics-levels-width);
                    min-height: 8px;
                    border-radius: 4px 4px 0 0;
                    transition: all .3s linear;
                    height: calc(var(--item-bottom-ofset) + var(--item-level-start) + var(--item-level-height) * var(--item-level-percent));
                    box-shadow: 0 0 4px 1px rgb(from var(--chart-main-color) r g b / 0.5);
                    background-image:
                        linear-gradient(
                            to bottom,
                            transparent 0, transparent calc(100% - 1px),
                            #fff calc(100% - 1px), #fff 100%
                        ),
                        repeating-linear-gradient(
                            to bottom,
                            rgb(from var(--chart-graphics-color) r g b / 0.75) 0, rgb(from var(--chart-graphics-color) r g b / 0.75) 14px,
                            rgb(from #fff r g b / 0.5) 14px, rgb(from #fff r g b / 0.5) 16px
                        )
                    ;
                }

                .mineral-index {
                    position: absolute;
                    z-index: 5;
                    left: 0;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    gap: 4px;
                    height: 19px;
                    transform: translateY(-10px);
                    font-size: var(--chart-mineral-index-font-size);
                    font-weight: 500;
                    line-height: 1;
                    color: rgb(from var(--color-btm-dark-blue) r g b / 0.75);
                    font-family: 'Roboto Condensed', sans-serif;
                    text-shadow:
                        0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff,
                        0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff,
                        0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff
                    ;

                    &:before {
                        content: '';
                        position: relative;
                        display: block;
                        width: 6px;
                        height: 3px;
                        background-color: var(--chart-main-color);
                    }
                }
            }

            .chart-element {
                position: relative;
                z-index: 4;
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: var(--chart-values-padding);
                background-color: #fff;
                box-shadow: 0 0 0 var(--chart-border-width) var(--chart-main-color);

                .element-name {
                    position: relative;
                    z-index: 3;
                    flex: 1;
                    display: var(--chart-element-name-display);
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    font-size: 17px;
                    line-height: 1;
                    font-weight: 400;
                    color: var(--color-btm-dark-blue);
                    font-family: 'Roboto Condensed', sans-serif;
                }
            }

            .chart-value {
                position: relative;
                z-index: 3;
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: var(--chart-values-padding);
                background-color: #fff;
                box-shadow: 0 0 0 var(--chart-border-width) var(--chart-main-color);

                &:before {
                    content: attr(data-value-responsive);
                    font-size: var(--chart-values-font-size);
                    line-height: 1;
                    font-weight: 700;
                    /*color: var(--color-dominant);*/
                    color: color-mix(in srgb, var(--chart-main-color) 60%, #000);
                    font-family: 'Roboto', sans-serif;
                }
            }
        }
    }

    &.chart-mineral-nutrients {
        --chart-sections-count: 11;

        --chart-break-point-01: var(--chart-section-height);
        --chart-break-point-02: calc(var(--chart-section-height) * 3);
        --chart-break-point-03: calc(var(--chart-section-height) * 5);
        --chart-break-point-04: calc(var(--chart-section-height) * 6);
        --chart-break-point-05: calc(var(--chart-section-height) * 8);
        --chart-break-point-06: calc(var(--chart-section-height) * 9);
        --chart-break-point-07: calc(var(--chart-section-height) * 11);
        --chart-break-point-ideal: calc(var(--chart-section-height) * 7);

        --legend-height-high: calc(var(--chart-section-height) * 5);
        --legend-height-ideal: calc(var(--chart-section-height) * 4);
        --legend-height-low: calc(var(--chart-section-height) * 2 + 24px);

        .chart-mineral {
            &.item-range-0 { --item-level-start: calc(var(--chart-section-height) * 10); --item-level-height: calc(var(--chart-section-height) * 1); }
            &.item-range-1 { --item-level-start: calc(var(--chart-section-height) * 10); --item-level-height: calc(var(--chart-section-height) * 1); }
            &.item-range-2 { --item-level-start: calc(var(--chart-section-height) * 8); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-3 { --item-level-start: calc(var(--chart-section-height) * 6); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-4 { --item-level-start: calc(var(--chart-section-height) * 4); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-5 { --item-level-start: calc(var(--chart-section-height) * 2); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-6 { --item-level-start: 0px; --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-x { --item-level-start: 0px; --item-level-height: 24px; --item-bottom-ofset: 0px; }
        }

        .chart-graphics {
            background-image:
                repeating-linear-gradient(
                    to bottom,
                    transparent 0%, transparent calc(var(--chart-section-height) - 1px),
                    rgb(from #fff r g b / 0.75) calc(var(--chart-section-height) - 1px), rgb(from #fff r g b / 0.75) var(--chart-section-height)
                ),
                linear-gradient(
                    to bottom,
                    transparent 0%, transparent calc(var(--chart-break-point-ideal) - 1px),
                    rgb(from var(--chart-main-color) r g b / 0.5) calc(var(--chart-break-point-ideal) - 1px), rgb(from var(--chart-main-color) r g b / 0.5) var(--chart-break-point-ideal),
                    transparent var(--chart-section-height), transparent 100%
                ),
                linear-gradient(
                    to bottom,
                    var(--chart-color-high-extremely) 0%, var(--chart-color-high-extremely) var(--chart-break-point-01),
                    var(--chart-color-high-very) var(--chart-break-point-01), var(--chart-color-high-very) var(--chart-break-point-02),
                    var(--chart-color-high-slightly) var(--chart-break-point-02), var(--chart-color-high-slightly) var(--chart-break-point-03),
                    var(--chart-color-ideal-high) var(--chart-break-point-03), var(--chart-color-ideal-high) var(--chart-break-point-04),
                    #fff var(--chart-break-point-04), #fff var(--chart-break-point-05),
                    var(--chart-color-ideal-low) var(--chart-break-point-05), var(--chart-color-ideal-low) var(--chart-break-point-06),
                    var(--chart-color-low-default) var(--chart-break-point-06), var(--chart-color-low-default) 100%
                )
            ;

            .mineral-index {
                &:nth-child(1) { top: var(--chart-break-point-01); }
                &:nth-child(2) { top: var(--chart-break-point-02); }
                &:nth-child(3) { top: var(--chart-break-point-03); }
                &:nth-child(4) { top: var(--chart-break-point-ideal); }
                &:nth-child(5) { top: var(--chart-break-point-06); }
                &:nth-child(6) { top: var(--chart-break-point-07); }
            }
        }
    }

    &.chart-mineral-toxic {
        --chart-sections-count: 14;

        --chart-break-point-01: var(--chart-section-height);
        --chart-break-point-02: calc(var(--chart-section-height) * 3);
        --chart-break-point-03: calc(var(--chart-section-height) * 5);
        --chart-break-point-04: calc(var(--chart-section-height) * 7);
        --chart-break-point-05: calc(var(--chart-section-height) * 9);
        --chart-break-point-06: calc(var(--chart-section-height) * 11);
        --chart-break-point-07: calc(var(--chart-section-height) * 14);

        --legend-height-high: calc(var(--chart-section-height) * 11);
        --legend-height-ideal: calc(var(--chart-section-height) * 3 + 24px);

        .chart-mineral {
            &.item-range-0 { --item-level-start: calc(var(--chart-section-height) * 13); --item-level-height: calc(var(--chart-section-height) * 1); }
            &.item-range-1 { --item-level-start: calc(var(--chart-section-height) * 13); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-2 { --item-level-start: calc(var(--chart-section-height) * 11); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-3 { --item-level-start: calc(var(--chart-section-height) * 9); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-4 { --item-level-start: calc(var(--chart-section-height) * 7); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-5 { --item-level-start: calc(var(--chart-section-height) * 5); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-6 { --item-level-start: calc(var(--chart-section-height) * 3); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-7 { --item-level-start: 0px; --item-level-height: calc(var(--chart-section-height) * 3); }
        }

        .chart-graphics {
            background-image:
                repeating-linear-gradient(
                    to bottom,
                    transparent 0%, transparent calc(var(--chart-section-height) - 1px),
                    rgb(from #fff r g b / 0.75) calc(var(--chart-section-height) - 1px), rgb(from #fff r g b / 0.75) var(--chart-section-height)
                ),
                linear-gradient(
                    to bottom,
                    var(--chart-color-high-extremely) 0%, var(--chart-color-high-extremely) var(--chart-break-point-02),
                    var(--chart-color-high-very) var(--chart-break-point-02), var(--chart-color-high-very) var(--chart-break-point-04),
                    var(--chart-color-high-slightly) var(--chart-break-point-04), var(--chart-color-high-slightly) var(--chart-break-point-06),
                    #fff var(--chart-break-point-06), #fff 100%
                )
            ;

            .mineral-index {
                &:nth-child(1) { top: var(--chart-break-point-01); }
                &:nth-child(2) { top: var(--chart-break-point-02); }
                &:nth-child(3) { top: var(--chart-break-point-03); }
                &:nth-child(4) { top: var(--chart-break-point-04); }
                &:nth-child(5) { top: var(--chart-break-point-05); }
                &:nth-child(6) { top: var(--chart-break-point-06); }
            }
        }
    }

    &.chart-ratio-nutritional {
        --chart-sections-count: 9;

        --chart-break-point-01: var(--chart-section-height);
        --chart-break-point-02: calc(var(--chart-section-height) * 3);
        --chart-break-point-03: calc(var(--chart-section-height) * 5);
        --chart-break-point-04: calc(var(--chart-section-height) * 7);
        --chart-break-point-05: calc(var(--chart-section-height) * 9);
        --chart-break-point-ideal: calc(var(--chart-section-height) * 5);

        --legend-height-high: calc(var(--chart-section-height) * 3);
        --legend-height-ideal: calc(var(--chart-section-height) * 4);
        --legend-height-low: calc(var(--chart-section-height) * 2 + 24px);

        .chart-mineral {
            &.item-range-0 { --item-level-start: calc(var(--chart-section-height) * 8); --item-level-height: calc(var(--chart-section-height) * 1); }
            &.item-range-1 { --item-level-start: calc(var(--chart-section-height) * 8); --item-level-height: calc(var(--chart-section-height) * 1); }
            &.item-range-2 { --item-level-start: calc(var(--chart-section-height) * 6); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-3 { --item-level-start: calc(var(--chart-section-height) * 4); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-4 { --item-level-start: calc(var(--chart-section-height) * 2); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-5 { --item-level-start: 0px; --item-level-height: calc(var(--chart-section-height) * 2); }
        }

        .chart-graphics {
            background-image:
                repeating-linear-gradient(
                    to bottom,
                    transparent 0%, transparent calc(var(--chart-section-height) - 1px),
                    rgb(from #fff r g b / 0.75) calc(var(--chart-section-height) - 1px), rgb(from #fff r g b / 0.75) var(--chart-section-height)
                ),
                linear-gradient(
                    to bottom,
                    transparent 0%, transparent calc(var(--chart-break-point-ideal) - 1px),
                    rgb(from var(--chart-main-color) r g b / 0.75) calc(var(--chart-break-point-ideal) - 1px), rgb(from var(--chart-main-color) r g b / 0.75) var(--chart-break-point-ideal),
                    transparent var(--chart-section-height), transparent 100%
                ),
                linear-gradient(
                    to bottom,
                    var(--chart-color-high-extremely) 0%, var(--chart-color-high-extremely) var(--chart-break-point-01),
                    var(--chart-color-high-very) var(--chart-break-point-01), var(--chart-color-high-very) var(--chart-break-point-02),
                    #fff var(--chart-break-point-02), #fff var(--chart-break-point-04),
                    var(--chart-color-low-medium) var(--chart-break-point-04), var(--chart-color-low-medium) 100%
                )
            ;

            .mineral-index {
                &:nth-child(1) { top: var(--chart-break-point-01); }
                &:nth-child(2) { top: var(--chart-break-point-02); }
                &:nth-child(3) { top: var(--chart-break-point-03); }
                &:nth-child(4) { top: var(--chart-break-point-04); }
            }
        }
    }

    &.chart-ratio-toxic {
        --chart-sections-count: 9;

        --chart-break-point-01: var(--chart-section-height);
        --chart-break-point-02: calc(var(--chart-section-height) * 3);
        --chart-break-point-03: calc(var(--chart-section-height) * 5);
        --chart-break-point-035: calc(var(--chart-section-height) * 6);
        --chart-break-point-04: calc(var(--chart-section-height) * 7);
        --chart-break-point-05: calc(var(--chart-section-height) * 9);

        --legend-height-ideal: calc(var(--chart-section-height) * 5);
        --legend-height-low: calc(var(--chart-section-height) * 4 + 24px);

        .chart-mineral {
            &.item-range-0 { --item-level-start: calc(var(--chart-section-height) * 8); --item-level-height: calc(var(--chart-section-height) * 1); }
            &.item-range-1 { --item-level-start: calc(var(--chart-section-height) * 8); --item-level-height: calc(var(--chart-section-height) * 1); }
            &.item-range-2 { --item-level-start: calc(var(--chart-section-height) * 6); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-3 { --item-level-start: calc(var(--chart-section-height) * 4); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-4 { --item-level-start: calc(var(--chart-section-height) * 2); --item-level-height: calc(var(--chart-section-height) * 2); }
            &.item-range-5 { --item-level-start: 0px; --item-level-height: calc(var(--chart-section-height) * 2); }
        }

        .chart-graphics {
            background-image:
                repeating-linear-gradient(
                    to bottom,
                    transparent 0%, transparent calc(var(--chart-section-height) - 1px),
                    rgb(from #fff r g b / 0.75) calc(var(--chart-section-height) - 1px), rgb(from #fff r g b / 0.75) var(--chart-section-height)
                ),
                linear-gradient(
                    to bottom,
                    transparent 0%, transparent calc(var(--chart-section-height) - 1px),
                    rgb(from var(--chart-main-color) r g b / 0.75) calc(var(--chart-section-height) - 1px), rgb(from var(--chart-main-color) r g b / 0.75) var(--chart-section-height),
                    transparent var(--chart-section-height), transparent calc(var(--chart-section-height) * 3 - 1px),
                    rgb(from var(--chart-main-color) r g b / 0.75) calc(var(--chart-section-height) * 3 - 1px), rgb(from var(--chart-main-color) r g b / 0.75) calc(var(--chart-section-height) * 3),
                    transparent calc(var(--chart-section-height) * 3), transparent 100%
                ),
                linear-gradient(
                    to bottom,
                    #fff 0%, #fff var(--chart-break-point-03),
                    var(--chart-color-high-slightly) var(--chart-break-point-03), var(--chart-color-high-slightly) var(--chart-break-point-035),
                    var(--chart-color-high-very) var(--chart-break-point-035), var(--chart-color-high-very) 100%
                )
            ;

            .mineral-index {
                &:nth-child(1) { top: var(--chart-break-point-01); }
                &:nth-child(2) { top: var(--chart-break-point-02); }
                &:nth-child(3) { top: var(--chart-break-point-03); }
                &:nth-child(4) { top: var(--chart-break-point-04); }
            }
        }
    }
}