/* Block: Custom Bar Graph */

.block-custom-bar-graph .content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3.75rem;
}

.legend-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.legend-wrapper .legend-data {
    display: flex;
    align-items: center;
    gap: 0.75rem;
} 

.legend-wrapper .legend-data .legend-color {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.125rem;
    background: var(--legend-color);
} 

.legend-wrapper .legend-data .legend-label {
    font-weight: 600;
    font-size: var(--font-21);
    color: var(--c-secondary);
} 

.graph-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.graph-item {
    display:flex;
    align-items: center;
    gap: 3.625rem;
}

.graph-item .graph-icon svg {
    max-width: 3.125rem;
    width: auto;
    max-height: 3.125rem;
    height: auto;
}

.graph-item .graph-icon svg path {
    fill: var(--graph-color);
}

.graph-item .graph-data {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    gap: 0.75rem;
}

.graph-item .graph-data .graph-label {
    font-weight: 700;
    font-size: var(--font-13);
    columns: var(--c-primary);
}

.graph-item .graph-data .graph-value {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--graph-color);
    width: calc(1% * var(--graph-width));
    color: var(--c-text-light);
    padding: 0.325rem;
    font-size: var(--font-13);
    font-weight: 700;
}