.ui-nav{display:inline-flex;border:1px solid #ddd;border-radius: 1.3rem;overflow:hidden;background:#fff}
.ui-nav-btn{width: 6rem;height: 3.6rem;display:flex;align-items:center;justify-content:center;background:#fff;border:none;cursor:pointer;color:#9aa0a6;transition:background .15s,color .15s}
.ui-nav-btn+ .ui-nav-btn{border-left:1px solid #eee}
.ui-nav-btn.is-prev::before{content:"\2039";font-size: 3rem;line-height:1;font-family: ui-sans-serif;color: #ccc;font-weight: 100;}
.ui-nav-btn.is-next::before{content:"\203A";font-size: 3rem;line-height:1;font-family: ui-sans-serif;color: #ccc;font-weight: 100;}
.ui-nav-btn:hover{background:#0c58e0;color:#fff}
.ui-nav-btn:focus{outline:none}
.ui-nav-btn[disabled]{opacity:.5;cursor:not-allowed}

/* override legacy circle style when used inside component */
.ui-nav .hp_cat_btn{width:44px;height:28px;border:0;border-radius:0;background:transparent;width: 5.8rem;height: 3.6rem;border: 1px solid #ddd;border-radius: 1rem 0 0 1rem;background: #fff;cursor: pointer;transition: .3s;}

.ui-nav .hp_cat_btn:hover {
    background: #1259C4;
    border-color: #1259C4;
}

.ui-nav .hp_cat_btn:hover:before {
    color: #fff !important;
}