.bars {
  inset: 0;
  transform: none;
  transition: opacity .5s;
  pointer-events: none;

  .bar {
    --x1: calc(var(--offset) - .4 + .8 * (var(--index) + .1) / var(--amount));
    --y1: var(--value);
    --x2: calc(var(--offset) - .4 + .8 * (var(--index) + .9) / var(--amount));
    --y2: var(--min-y);
    max-width: 3rem;
    background-color: var(--color);
    pointer-events: initial;
    css-text {
      --real-x: 50%;
      --real-y: 0%;
      translate: -50% -100%;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s, translate .2s;
      transition-delay: calc(var(--offset) * .04s), calc(var(--offset) * .04s);
    }
  }
  &:has(.bar:hover) css-text {
    opacity: 1;
    translate: -50% calc(-100% - .4rem);
  }
}

css-chart:has(.bars:hover) .bars:not(:hover){
  opacity: .3;
}