.button{width:50px;height:50px;border-radius:50%;background-color:#141414;border:none;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 20px rgba(0,0,0,.164);cursor:pointer;overflow:hidden;position:relative;gap:1px}.button,.svgIcon{transition-duration:.3s}.svgIcon{width:12px}.svgIcon path{fill:#fff}.button:hover{width:140px;border-radius:50px;transition-duration:.3s;background-color:#ff4545;align-items:center;gap:0}.button:hover .bin-bottom{width:50px;transition-duration:.3s;transform:translateY(60%)}.bin-top{transform-origin:bottom right}.button:hover .bin-top{width:50px;transition-duration:.3s;transform:translateY(60%) rotate(160deg)}.button:before{position:absolute;top:-20px;content:"Delete";color:#fff;transition-duration:.3s;font-size:2px}.button:hover:before{font-size:13px;opacity:1;transform:translateY(35px);transition-duration:.3s}.Btn{width:130px;height:40px;display:flex;align-items:center;justify-content:center;background-color:#0f0f0f;border:none;color:#fff;font-weight:600;gap:8px;cursor:pointer;box-shadow:5px 5px 10px rgba(0,0,0,.103);position:relative;overflow:hidden;transition-duration:.3s}.svgIconPay{width:16px}.svgIconPay path{fill:#fff}.Btn:before{width:calc(100% + 40px);aspect-ratio:1/1;position:absolute;content:"";background-color:#fff;border-radius:50%;left:-20px;top:50%;transform:translate(-150%,-50%);transition-duration:.5s;mix-blend-mode:difference}.Btn:hover:before{transform:translateY(-50%)}.Btn:active{transform:translateY(4px);transition-duration:.4s}