.con-kit-component-button[data-kit-transparent-button-effect=bg-change]{transition:background-color .3s;padding:0 var(--one-kit-padding-horizontal,16px);padding-top:var(--one-kit-padding-vertical,8px);padding-bottom:var(--one-kit-padding-vertical,8px);overflow:hidden}.con-kit-component-button[data-kit-transparent-button-effect=bg-change] .con-kit-component-button__text,.con-kit-component-button[data-kit-transparent-button-effect=bg-change] .con-kit-component-icon{z-index:1}.con-kit-component-button[data-kit-transparent-button-effect=bg-change]:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;transform:translate3d(-100%,0,0);background-color:rgba(var(--color-border),var(--alpha-border));transition:transform .2s ease-in-out;transform-origin:left center;border-radius:var(--one-kit-radius);opacity:0}@media(hover:hover){.con-kit-component-button[data-kit-transparent-button-effect=bg-change].con-kit-component-button--hover,.con-kit-component-button[data-kit-transparent-button-effect=bg-change]:hover{color:rgba(var(--color-text--hover),var(--alpha-text))}.con-kit-component-button[data-kit-transparent-button-effect=bg-change].con-kit-component-button--hover:before,.con-kit-component-button[data-kit-transparent-button-effect=bg-change]:hover:before{transform:translateZ(0);opacity:1}.con-kit-component-button[data-kit-transparent-button-effect=bg-change].con-kit-component-button--hover .con-kit-component-icon [data-fill],.con-kit-component-button[data-kit-transparent-button-effect=bg-change]:hover .con-kit-component-icon [data-fill]{fill:rgba(var(--color-text--hover),var(--alpha-text))}.con-kit-component-button[data-kit-transparent-button-effect=bg-change].con-kit-component-button--hover .con-kit-component-icon [data-stroke],.con-kit-component-button[data-kit-transparent-button-effect=bg-change]:hover .con-kit-component-icon [data-stroke]{stroke:rgba(var(--color-text--hover),var(--alpha-text))}}