.text-icon-button{--bg:var(--white);--text:var(--black);--icon-frame:var(--black);--icon:var(--off-white);--button-padding:5px;--button-height:40px;--text-padding-x:12px;--text-size:16px;--icon-wrap-size:calc(var(--button-height) - var(--button-padding) * 2);--transition:0.35s cubic-bezier(0.23,1,0.32,1);width:max-content;background-color:var(--bg);border-radius:var(--radius-sm);cursor:pointer;overflow:hidden;transition:var(--transition)}.text-icon-button.full{width:100%;text-align:center}.text-icon-button.full .content{width:100%;justify-content:center}.text-icon-button .content{position:relative;width:max-content;height:var(--button-height);padding:var(--button-padding);display:flex;align-items:center;transition:var(--transition)}.text-icon-button .content:before{content:attr(data-text);position:absolute;top:50%;right:calc(100% - var(--button-padding));translate:0 -50%;opacity:0}.text-icon-button .content:has(.icon-wrap){right:cal}.text-icon-button .content .text,.text-icon-button .content:before{color:var(--text);font-size:var(--text-size);font-weight:600;font-family:Manrope;white-space:nowrap;padding-inline:var(--text-padding-x);transition:var(--transition)}.text-icon-button .content .text{padding-inline:var(--text-padding-x);opacity:1}.text-icon-button .content .icon-wrap{height:100%;aspect-ratio:1;background-color:var(--icon-frame);border-radius:3px;display:flex;align-items:center;justify-content:center;color:var(--icon);transition:var(--transition)}.text-icon-button:hover{scale:.97}.text-icon-button:hover .content{translate:calc(100% - var(--button-padding)*2) 0}.text-icon-button:hover .content:has(.icon-wrap){translate:calc(100% - var(--icon-wrap-size) - var(--button-padding)*2) 0}.text-icon-button:hover .content .icon-wrap,.text-icon-button:hover .content:before{opacity:1}.text-icon-button:hover .content .text{opacity:0}.text-icon-button.accent{--bg:var(--accent);--text:var(--white);--icon-frame:var(--white);--icon:var(--accent)}.text-icon-button.white{--bg:var(--white);--text:var(--black);--icon-frame:var(--black);--icon:var(--white)}.text-icon-button.off-white{--bg:var(--off-white);--text:var(--black);--icon-frame:var(--black);--icon:var(--off-white)}.text-icon-button.black{--bg:var(--black);--text:var(--white);--icon-frame:var(--white);--icon:var(--black)}.text-icon-button.blurred{--bg:rgba(17,17,17,0.5);--text:var(--white);--icon-frame:var(--white);--icon:var(--black);backdrop-filter:blur(10px)}.text-icon-button.small{--button-height:28px;--text-padding-x:8px;--text-size:12px}