.DemographicsAgeBreakdown {
    padding-right: 25px;
    padding-top: 30px;
    width: 600px;

    &-title {
        font-size: 16px;
        font-weight: $weight_bold;
        line-height: 30px;
        text-align: center;
        white-space: nowrap;
    }

    &-toggleContainer {
        display: flex;
        justify-content: space-between;
    }

    &-toggle {
        width: auto;
    }

    &-no-content {
        margin-bottom: 28px;
        margin-left: 255px;
        margin-top: 20px;
    }

    /* stylelint-disable max-nesting-depth, selector-no-type */

    .GroupedBarChart {
        &-bar-holder {
            rect {
                fill: var(--bluejay);
            }
        }

        &-bar-value {
            font-size: 10px;
            font-weight: $weight_bold;
        }

        &-splitted {
            .GroupedBarChart-bar-holder {
                rect {
                    fill: var(--chameleon);
                }

                & + .GroupedBarChart-bar-holder rect {
                    fill: var(--octopus);
                }
            }
        }
    }
    .GroupedBarChartYaxis {
        &-foreground {
            transform: translate(9px, 4px);
        }

        &-label {
            fill: var(--gray-500);
            font-size: 10px;
        }

        &-line {
            display: none;
        }

        &-tick {
            shape-rendering: crispEdges;
            stroke: var(--gray-200);
            stroke-width: 1;
        }
    }

    .GroupedBarChartXaxis {
        &-label {
            fill: var(--gray-500);
            font-size: 10px;
        }

        &-line {
            stroke: var(--gray-200);
        }
    }
}