.hub-controls{
display:flex;
align-items:center;
gap:10px;
width:var(--pw2);margin:0 auto var(--gap);
}
.hub-reset-btn{
width:64px;
height:64px;
min-width:64px;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:50%;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
box-shadow:var(--fbs);
padding:0;
}
.hub-reset-btn:hover{
background-color:var(--hv1);
border-color:var(--cl1);
}
.hub-reset-btn svg{
width:26px;
height:26px;
fill:var(--tx2);
}
.hub-reset-btn:hover svg{
fill:var(--cl1);
}
.hub-cat-dropdown{
position:relative;
flex-shrink:0;
}
.hub-cat-dropdown-btn{
width:64px;
height:64px;
min-width:64px;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:50%;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
box-shadow:var(--fbs);
padding:0;
}
.hub-cat-dropdown-btn:hover{
background-color:var(--hv1);
border-color:var(--cl1);
}
.hub-cat-dropdown.open .hub-cat-dropdown-btn{
background-color:var(--cl1);
border-color:var(--cl1);
}
.hub-cat-dropdown-icon{
width:26px;
height:26px;
display:flex;
align-items:center;
justify-content:center;
}
.hub-cat-dropdown-icon svg{
width:26px;
height:26px;
fill:var(--tx2);
}
.hub-cat-dropdown-btn:hover .hub-cat-dropdown-icon svg{
fill:var(--cl1);
}
.hub-cat-dropdown.open .hub-cat-dropdown-icon svg{
fill:var(--blk);
}
.hub-cat-dropdown-menu{
position:absolute;
top:calc(100% + var(--gd4));
left:0;
min-width:180px;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br1);
box-shadow:var(--fbs);
padding:var(--gd4);
z-index:100;
display:none;
flex-direction:column;
gap:2px;
}
.hub-cat-dropdown.open .hub-cat-dropdown-menu{
display:flex;
}
.hub-filter-dropdown{
position:relative;
flex-shrink:0;
}
.hub-filter-dropdown-btn{
width:64px;
height:64px;
min-width:64px;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:50%;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
box-shadow:var(--fbs);
padding:0;
}
.hub-filter-dropdown-btn:hover{
background-color:var(--hv1);
border-color:var(--cl1);
}
.hub-filter-dropdown.open .hub-filter-dropdown-btn{
background-color:var(--cl1);
border-color:var(--cl1);
}
.hub-filter-dropdown-icon{
width:26px;
height:26px;
display:flex;
align-items:center;
justify-content:center;
}
.hub-filter-dropdown-icon svg{
width:26px;
height:26px;
fill:var(--tx2);
}
.hub-filter-dropdown-btn:hover .hub-filter-dropdown-icon svg{
fill:var(--cl1);
}
.hub-filter-dropdown.open .hub-filter-dropdown-icon svg{
fill:var(--blk);
}
.hub-filter-dropdown-menu{
position:absolute;
top:calc(100% + var(--gd4));
left:0;
min-width:180px;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br1);
box-shadow:var(--fbs);
padding:var(--gd4);
z-index:100;
display:none;
flex-direction:column;
gap:2px;
}
.hub-filter-dropdown.open .hub-filter-dropdown-menu{
display:flex;
}
.hub-filter-dropdown-menu .hub-filter-dropdown-item{
display:flex;
align-items:center;
gap:12px;
height:40px;
min-height:40px;
flex-shrink:0;
padding:0 14px;
background:none;
border:none;
border-radius:var(--br0);
cursor:pointer;
font-family:var(--ff2);
font-size:16px;
font-weight:700;
color:var(--tx2);
white-space:nowrap;
transition:60ms;
}
.hub-filter-dropdown-menu .hub-filter-dropdown-item:hover{
background-color:var(--hv1);
color:var(--cl1);
}
.hub-filter-dropdown-menu .hub-filter-dropdown-item.active{
color:var(--cl1);
background-color:rgba(255,85,17,0.1);
}
.hub-filter-dropdown-item.pressed{
transform:translateY(1px) scale(0.98);
}
.hub-filter-dropdown-item-icon{
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.hub-filter-dropdown-item-icon svg{
width:20px;
height:20px;
fill:var(--tx2);
}
.hub-filter-dropdown-item:hover .hub-filter-dropdown-item-icon svg,
.hub-filter-dropdown-item.active .hub-filter-dropdown-item-icon svg{
fill:var(--cl1);
}
.hub-filter{
position:relative;
flex:1;
min-width:0;
}
.hub-filter-icon{
position:absolute;
left:20px;
top:50%;
transform:translateY(-50%);
width:26px;
height:26px;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
z-index:2;
}
.hub-filter-icon svg{
width:26px;
height:26px;
fill:var(--tx2);
}
.hub-filter-input{
width:100%;
height:64px;
padding:0 64px 0 60px;
font-size:20px;
font-family:var(--ff1);
background-color:var(--bg2);
color:var(--tx1);
border:var(--bw1) solid var(--bc1);
outline:none;
border-radius:var(--br0);
box-sizing:border-box;
box-shadow:var(--fbs);
}
.hub-filter-input::placeholder{
color:var(--tx3);
}
.hub-filter-input:focus{
border-color:var(--cl1);
}
.hub-filter-input:focus~.hub-filter-icon svg{
fill:var(--cl1);
}
.hub-filter-clear{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
width:48px;
height:48px;
background-color:transparent;
border:none;
border-radius:50%;
cursor:pointer;
display:none;
align-items:center;
justify-content:center;
color:var(--tx2);
font-size:36px;
font-weight:400;
line-height:1;
padding:0;
z-index:2;
}
.hub-filter-clear:hover{
color:var(--cl1);
background-color:var(--hv1);
}