.xp-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .75rem;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.75);
  font-size:12px;
  transition:all .15s ease;
  user-select:none;
}
.xp-chip:hover{ background:rgba(255,255,255,.08); }
.xp-chip--active{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.20);
  color:#fff;
}

.xp-select{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#fff;
  padding:.6rem .75rem;
  font-size:14px;
  outline:none;
  transition:all .15s ease;
}
.xp-select:focus{
  border-color:rgba(255,255,255,.20);
  background:rgba(255,255,255,.08);
}

.xp-toggle{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.80);
  padding:.6rem .85rem;
  font-size:14px;
  outline:none;
  transition:all .15s ease;
}
.xp-toggle:hover{ background:rgba(255,255,255,.08); }
.xp-toggle[aria-pressed="true"]{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.20);
  color:#fff;
}

.xp-th{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:inherit;
  font:inherit;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.xp-sort{
  display:inline-flex;
  width:14px;
  height:14px;
  opacity:.75;
}

.xp-pagebtn{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#fff;
  padding:.55rem .9rem;
  font-size:14px;
  transition:all .15s ease;
}
.xp-pagebtn:hover{ background:rgba(255,255,255,.10); }
.xp-pagebtn:disabled{
  opacity:.4;
  cursor:not-allowed;
}
.xp-jump{
  width:84px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#fff;
  padding:.55rem .75rem;
  font-size:14px;
  outline:none;
}
.xp-jump:focus{
  border-color:rgba(255,255,255,.20);
  background:rgba(255,255,255,.08);
}

/* nicer horizontal scrollbar for tables */
*::-webkit-scrollbar{ height:10px; width:10px; }
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:999px; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.18); }