.volume{align-self:start;height:4px;margin-top:1px;display:flex;align-items:center;gap:10px}.volume>span{width:20px;height:20px;flex:0 0 20px}.volume>span::before{left:0;top:0;width:20px;height:20px;background:var(--cyan);clip-path:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 10v4h4l5 4V6l-5 4H3zm12.5 2a3.5 3.5 0 0 0-2-3.15v6.3A3.5 3.5 0 0 0 15.5 12zm-2-8.7v2.1a7 7 0 0 1 0 13v2.1a9 9 0 0 0 0-17.2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 10v4h4l5 4V6l-5 4H3zm12.5 2a3.5 3.5 0 0 0-2-3.15v6.3A3.5 3.5 0 0 0 15.5 12zm-2-8.7v2.1a7 7 0 0 1 0 13v2.1a9 9 0 0 0 0-17.2z'/%3E%3C/svg%3E") center/contain no-repeat}.volume>span::after{display:none}.volume input{margin:0;align-self:center}