.common-btn{display:flex;align-items:center;gap:4px;border:1px solid var(--border);background-color:transparent;padding:12px 16px;line-height:22px;overflow:hidden;transition:color .5s;z-index:1;position:relative;.text{color:var(--text-primary);white-space:nowrap}.icon,.text{position:relative;z-index:1;transition:all .5s ease-in-out}.icon{width:18px}&:before{content:"";position:absolute;inset:50%;background-color:var(--primary);z-index:0;transition:all .5s ease-in-out;border-radius:30px}&:hover{border-color:transparent;.text{color:var(--white)}.icon{transform:rotate(45deg);svg{path{fill:var(--white)}}}&:before{inset:-1px}}}.common-link{display:inline-flex}@media screen and (max-width:575px){.common-btn{padding:8px 12px;.text{font-size:14px;line-height:18px}.icon{width:16px;svg{width:16px;height:16px}}}}@media screen and (max-width:359px){.common-btn{.icon{width:14px;svg{width:14px;height:14px}}}}