.roast-level{--gap:0.5rem;--icon-height:3rem;--icon-width:3rem;align-items:center;display:flex;gap:var(--gap);margin:1rem 0}.roast-level--medium{--left:calc(50% - var(--icon-width)/2)}.roast-level--light{--left:calc(25% - var(--icon-width)/2)}.roast-level--dark{--left:calc(75% - var(--icon-width)/2)}.roast-level__icon{align-items:center;background:#786f64;border-radius:100%;color:#fff;display:flex;height:var(--icon-width,3rem);padding:.5rem;width:var(--icon-width,3rem)}.roast-level__barometer{background:linear-gradient(90deg,#fff,#786f64);border-radius:50px;display:block;height:5px;margin-bottom:7.5px;max-width:100%;position:relative;width:100%;width:150px}.roast-level__barometer:after{background:#786f64;border-radius:10px;content:"";height:20px;left:var(--left);position:absolute;top:0;transform:translateY(calc(-50% + 2.5px));width:5px}.roast-level--size-medium{--icon-height:5rem;--icon-width:5rem}.roast-level--vertical{align-items:unset;flex-direction:column;text-align:center}.roast-level--vertical .roast-level__icon{left:var(--left);margin-bottom:1rem;position:relative}.roast-level--vertical .roast-level__icon:after{background:#786f64;border-radius:10px;bottom:0;content:"";height:30px;left:calc(50% - 2.5px);position:absolute;transform:translateY(calc(100% + 5px));width:5px;z-index:1}.roast-level--vertical .roast-level__barometer{height:10px;margin-bottom:1rem;width:100%}.roast-level--vertical .roast-level__barometer:after{display:none}.roast-level:not(.roast-level--vertical) .roast-level__text-with-barometer{width:calc(100% - var(--icon-width, 3rem) - var(--gap))}