.hw-button-container{position:relative;width:fit-content}.hw-button{position:relative;display:flex;flex-direction:row;align-items:center;padding:.5rem;border:1px solid;gap:.5rem;overflow:hidden;box-sizing:border-box;border-image-slice:1;width:fit-content}.hw-button.add-button-bg{background-color:var(--second-text-color)}.hw-button.button-simple{border-color:#fff0}.hw-button.button-border{border-color:var(--border-color)}.hw-button>i{display:flex;align-items:center;justify-content:center;position:absolute}.hw-button.button-simple>i{padding:0 .5rem}.hw-button.button-border>i{padding:.62rem;background:var(--button-arrow-background)}.hw-button.hw-button-hover i{width:calc(100% - 1rem);animation:button-arrow-right 0.4s ease-out}.hw-button.hw-button-simple i{animation:button-arrow-left 0.4s ease-out forwards}.hw-button>i svg{width:1.2rem;height:1.2rem}.hw-button.button-simple>i svg{color:var(--main-text-color)}.hw-button.button-border>i svg{color:var(--second-text-color)}.hw-button>span{position:relative;right:0;display:flex;align-items:center;font-weight:500;color:var(--main-text-color);font-size:.875rem;line-height:100%;padding:0 .75rem;margin-left:3rem;transition:right 0.4s ease-out;white-space:nowrap}.hw-button.button-border>span{height:2.5rem}.hw-button.hw-button-hover>span{right:-100%}@media (max-width:768px){.hw-button i{right:.62rem}.hw-button span{margin-left:0;margin-right:3rem}}@keyframes button-arrow-right{0%{width:2.5rem}80%{width:100%}100%{width:calc(100% - 1rem)}}@keyframes button-arrow-left{0%{width:calc(100% - 1rem)}80%{width:2.3rem}100%{width:2.5rem}}