.bubble-component{--size-letter:1rem;font-size:var(--size-letter);background-color:var(--button-color);border:calc(var(--size-letter)/6)solid var(--button-color);cursor:pointer;border-radius:.2em;padding:.5em 1em;transition:all .15s cubic-bezier(.83,0,.17,1);position:relative;overflow:hidden}.bubble-component.outline{border:calc(var(--size-letter)/6)solid var(--button-color);background-color:#0000}.bubble-component.with-shadow{box-shadow:0 4px 15px #a2e30b4d}.bubble-component>.bubble-text{color:var(--text-color);z-index:1;font-weight:700;transition:color .5s cubic-bezier(.83,0,.17,1);position:relative}.bubble-component:before{top:0;left:0}.bubble-component:after{top:100%;left:100%}.bubble-component:before,.bubble-component:after{content:"";aspect-ratio:1;background-color:var(--bubble-color);border-radius:50%;width:150%;transition:all .5s cubic-bezier(.76,0,.24,1);position:absolute;translate:-50% -50%;scale:0}.bubble-component:hover>.bubble-text{color:var(--hover-text-color)}.bubble-component:hover:before,.bubble-component:hover:after{scale:1}.bubble-component:active{filter:brightness(.9);scale:.98}