/* The bar chart container establishes a common min and max */
x-bar-chart {
  --min: 0;
  --max: 100;
  display: block;
}

x-bar {
  /* Each bar has its own value */
  --value: 0;
  
  /* And its size is a variable so that we can use it any property,
     or even set directly. This should be a number between 0 and 1. */
  --size: calc((var(--value) - var(--min)) / (var(--max) - var(--min))));

  display: block;
  margin-bottom: .5em;
}

/* If you render the bar itself as generated content,
   then the content (e.g. text labels) can flow independently
   of the element's own bounding box, precluding the need for
   overflow: visible */
x-bar::after {
  background: slateblue;
  content: "";
  display: block;
  /* by default, a bar has a percentage width based on its size */
  height: 1em;
  width: calc(100% * var(--size));
}

/* bars can get their value from the value attribute */
x-bar[value] {
  /* this syntax parses the value attribute as a number,
     rather than using a unit length */
  --value: attr(value number);
}

/* charts *and* bars could establish their own min and max */
x-bar-chart[min],
x-bar[min] {
  --min: attr(min number);
}

x-bar-chart[max],
x-bar[max] {
  --max: attr(max number);
}

@media screen and (min-width: 640px) {
  /* then, if we want to get *really* fancy, we can
     make the chart go vertical on wider screens */
  x-bar-chart {
    display: flex;
  }
  
  x-bar {
    align-self: bottom;
    flex: 1;
    position: relative;
    margin-bottom: 0;
  }
  
  /* spacing between bars */
  x-bar + x-bar {
    margin-left: .5em;
  }
  
  x-bar::after {
    position: absolute;
    bottom: 0;
    height: calc(100% * var(--size));
    width: 100%;
  }
}