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