.card{width:250px;height:50px;background-color:hsl(var(--muted));border-radius:115px;padding-inline:15px;justify-content:space-around}.card,.social-icons{display:flex;position:relative}.social-icons{cursor:pointer;transition:all .5s;align-items:center;justify-content:center;color:white;font-weight:700;font-size:small;text-decoration:none}.social-icons>p{--var:-0%;position:absolute;top:var(--var);transition:all .7s;background-color:dodgerblue;border-radius:7px;opacity:0;padding-inline:7px;padding-block:3px;width:max-content}.social-icons>p:after{content:"";position:absolute;border-top:10px solid dodgerblue;border-left:7px solid transparent;border-right:7px solid transparent;top:100%;left:50%;transform:translate(-50%)}.social-icons>span{--var:-0%;position:absolute;bottom:var(--var);width:max-content;transition:all .7s;opacity:0;padding-inline:7px;padding-block:3px;background-color:crimson;border-radius:7px}.social-icons>span:after{content:"";position:absolute;border-bottom:10px solid crimson;border-left:7px solid transparent;border-right:7px solid transparent;bottom:100%;left:50%;transform:translate(-50%)}.social-icons:hover>p,.social-icons:hover>span{--var:-65%;opacity:1}.social-icons:hover{z-index:15}.card:hover>.social-icons:not(:hover){filter:blur(3px);transform:scale(.8)}.card svg{height:30px;fill:hsl(var(--foreground))}