.simple-bar-chart {
    --line-count: 10;
    --line-color: currentcolor;
    --line-opacity: 0.25;
    --item-gap: 2%;
    --item-default-color: #060606;
    height: 10rem;
    display: grid;
    grid-auto-flow: column;
    gap: var(--item-gap);
    align-items: end;
    padding-inline: var(--item-gap);
    --padding-block: 1.5rem; /*space for labels*/
    padding-block: var(--padding-block);
    position: relative;
    isolation: isolate;
}

    .simple-bar-chart::after {
        content: "";
        position: absolute;
        inset: var(--padding-block) 0;
        z-index: -1;
        --line-width: 1px;
        --line-spacing: calc(100% / var(--line-count));
        background-image: repeating-linear-gradient(to top, transparent 0 calc(var(--line-spacing) - var(--line-width)), var(--line-color) 0 var(--line-spacing));
        box-shadow: 0 var(--line-width) 0 var(--line-color);
        opacity: var(--line-opacity);
    }

    .simple-bar-chart > .item {
        height: calc(1% * var(--val));
        background-color: var(--clr, var(--item-default-color));
        position: relative;
        animation: item-height 1s ease forwards;
        border-radius: 8px;
    }

@keyframes item-height {
    from {
        height: 0
    }
}

.simple-bar-chart > .item > * {
    position: absolute;
    text-align: center
}

.simple-bar-chart > .item > .labelsws {
    inset: 100% 0 auto 0
}

.simple-bar-chart > .item > .value {
    inset: auto 0 100% 0
}