:host([variant=featured]) a,:host([variant=featured]) button{position:relative;z-index:0}:host([variant=featured]) a:after,:host([variant=featured]) a:before,:host([variant=featured]) button:after,:host([variant=featured]) button:before{bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0;inset:0}:host([variant=featured]) a:before,:host([variant=featured]) button:before{background:#91e5fd;opacity:1;opacity:var(--before-opacity,1);z-index:-2}:host([variant=featured]) a:after,:host([variant=featured]) button:after{background:linear-gradient(90deg,#3bd6ff,#1ab4f6 50%,#3bd6ff);opacity:1;opacity:var(--after-opacity,1);transform:translateX(0);transform:translateX(var(--background-translate,0));transition:transform .2s,opacity .2s;width:200%;z-index:-1}:host([variant=featured]) a:hover:after,:host([variant=featured]) button:hover:after{--background-translate:-50%}:host([variant=featured]) a:focus:after,:host([variant=featured]) button:focus:after{--background-translate:0%}:host([variant=featured]) a:active:after,:host([variant=featured]) button:active:after{--after-opacity:0}:host([variant=featured]) a:disabled:after,:host([variant=featured]) button:disabled:after{--after-opacity:0;--before-opacity:0}