:root{--color-blue: #03a9f4;--color-red: #f44336}*{box-sizing:border-box}body{margin:0 auto;padding:2rem;display:flex;align-items:center;width:100vw;max-width:850px;height:100vh;font-family:sans-serif}.thermometer{--bar-color: #9e9e9e;--width: 7rem;--bar-width: 2rem;--height: 90vh;--border-radius: 1rem;--inset: 0.8rem;position:relative;margin:0 auto;height:var(--height);width:var(--width)}.thermometer.positive{--fluid-color: var(--color-red)}.thermometer.negative{--fluid-color: var(--color-blue)}.thermometer .bar-container ul{list-style:none;margin:0;padding:0;padding-block:calc(var(--padding) - .8rem);display:flex;width:5rem;height:100%;flex-direction:column;top:0;position:absolute;justify-content:space-between;left:100%}.thermometer .bar-container ul li::before{content:"━";margin-right:.5rem}.thermometer .bulb{width:var(--width);height:var(--width);bottom:0;position:absolute;z-index:-1;left:50%;transform:translateX(-50%);border-radius:50%;background-color:var(--bar-color)}.thermometer .bar-container{--padding: 1rem;position:absolute;bottom:calc(var(--width) + var(--padding) - var(--inset)/2);left:50%;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);transform:translate(-50%, var(--padding));width:var(--bar-width);height:calc(100% - var(--width));background-color:var(--bar-color);padding-block:var(--padding);display:flex;align-items:end}.thermometer .fluid{background-color:var(--fluid-color);--bar-height: 50%}.thermometer .bar-container .fluid{position:relative;bottom:calc(-1*var(--padding) - var(--inset));width:calc(var(--bar-width) - var(--inset));height:calc(var(--padding) + var(--bar-height) + var(--inset));border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);left:50%;transform:translateX(-50%);transition:height .2s,background-color .05s}.thermometer .bulb .fluid{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:calc(var(--width) - var(--inset));height:calc(var(--width) - var(--inset));border-radius:50%}.thermometer .value{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);z-index:1;color:#fff;font-size:2.5rem}.options{display:flex;flex-direction:column;gap:1rem}.options.left button{background:var(--color-blue)}.options.right button{background:var(--color-red)}.options button{aspect-ratio:1;width:4rem;border-radius:.2rem;color:#fff;cursor:pointer;font-size:1.5rem;border:none}