.comman-button{display:flex;align-items:center;gap:8px;padding:8px 24px;background-color:transparent;border:1px solid var(--primary);position:relative;transition:all .5s ease-in-out;&:before{content:"";position:absolute;top:50%;left:0;border-radius:50px;transform:translateY(-50%);height:0;width:0;background-color:var(--primary);transition:all .5s ease-in-out}&:hover{border-color:transparent;&:before{height:100%;width:100%}span{color:var(--white)}i{background-color:var(--primary);svg{path{fill:var(--white)}}}}span{line-height:var(--lh-26);font-size:var(--fs-14);position:relative;z-index:2;transition:all .5s ease-in-out;text-transform:capitalize}i{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;border-radius:50%;transition:all .5s ease-in-out;svg{path{transition:all .5s ease-in-out}}}}.disabled-button{opacity:.5;pointer-events:none;border-color:#ccc!important;background-color:#eaeaea!important;span{color:#999!important}i svg path{fill:#999!important}}@media(max-width:767px){.comman-button{padding:7px 20px;span{line-height:var(--lh-24);font-size:var(--fs-14)}i{svg{width:20px;height:20px}}}}@media(max-width:575px){.comman-button{padding:6px 18px;i{svg{width:18px;height:18px}}}}