.bar {
  --x1: calc(var(--offset) - .5);
  --y1: var(--max-y);
  --x2: calc(var(--offset) + .5);
  --y2: var(--min-y);
  transition: opacity .3s;
  .top, .median, .bottom {
    --x: .5;
  }
  .top, .bottom {
    width: 1.4rem;
    height: .6rem;
  }
  .connector {
    --x1: .5;
    --y1: var(--top);
    --x2: .5;
    --y2: var(--bottom);
    width: .6rem;
    background: linear-gradient(
      var(--top-color) 0% calc((var(--top) - var(--median)) / (var(--top) - var(--bottom)) * 100%),
      var(--bottom-color) calc((var(--top) - var(--median)) / (var(--top) - var(--bottom)) * 100%) 100%
    );
  }
  .top {
    --y: var(--top);
    background-color: var(--top-color);
  }
  .median {
    --y: var(--median);
    --r: .3rem;
    background-color: white;
    border: 2px solid var(--median-color);
    border-radius: 50%;
  }
  .bottom {
    --y: var(--bottom);
    background-color: var(--bottom-color);
  }
  .top-label, .median-label, .bottom-label {
    --x: .5;
    color: #12324b;
    opacity: 0;
    translate: .6rem -50%;
    z-index: 2;
    transition: opacity .2s, translate .2s;
  }
  .top-label {
    --y: var(--top);
    transition-delay: .1s, .1s;
  }
  .median-label {
    --y: var(--median);
    transition-delay: .05s, .05s;
  }
  .bottom-label {
    --y: var(--bottom);
    transition-delay: 0s, 0s;
  }
  &:hover {
    .top-label, .median-label, .bottom-label {
      translate: 1.2rem -50%;
      opacity: 1;
    }
  }
}

@container css-chart (width < 30rem){
  .bar {
    .top-label, .median-label, .bottom-label {
      display: none;
    }
  }
}