/*
 * Location category rail
 * One continuous route below all categories. The moving light is orientation
 * feedback for a swipe, never a separate border under every button.
 */
.nearby .location-categories {
  --lup-category-offset:0%;
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;
  padding:5px 8px 12px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  isolation:isolate;
}
.nearby .location-categories::before {
  position:absolute;
  right:12px;
  bottom:4px;
  left:12px;
  z-index:0;
  display:block;
  height:1px;
  content:'';
  border:0;
  border-radius:0;
  background:linear-gradient(90deg,transparent,rgba(143,199,230,.23) 8%,rgba(143,199,230,.16) 92%,transparent);
  box-shadow:none;
  opacity:1;
  pointer-events:none;
}
.nearby .location-categories::after {
  position:absolute;
  right:auto;
  bottom:3px;
  left:8px;
  z-index:1;
  display:block;
  width:calc((100% - 16px) / 6);
  height:3px;
  content:'';
  border:0;
  border-radius:99px;
  background:linear-gradient(90deg,transparent 0%,var(--lup-category-ink,#a9ddff) 22%,#edfaff 50%,var(--lup-category-ink,#a9ddff) 78%,transparent 100%);
  box-shadow:0 0 8px color-mix(in srgb,var(--lup-category-ink,#a9ddff) 62%,transparent),0 0 18px color-mix(in srgb,var(--lup-category-ink,#a9ddff) 26%,transparent);
  opacity:.96;
  transform:translate3d(var(--lup-category-offset),0,0);
  transition:transform 35ms linear,opacity 80ms ease;
  pointer-events:none;
}
.nearby .location-categories:has(button:nth-child(1).active) { --lup-category-offset:0%; --lup-category-ink:#a9ddff; }
.nearby .location-categories:has(button:nth-child(2).active) { --lup-category-offset:100%; --lup-category-ink:#9ec7fa; }
.nearby .location-categories:has(button:nth-child(3).active) { --lup-category-offset:200%; --lup-category-ink:#edb47f; }
.nearby .location-categories:has(button:nth-child(4).active) { --lup-category-offset:300%; --lup-category-ink:#e6a4df; }
.nearby .location-categories:has(button:nth-child(5).active) { --lup-category-offset:400%; --lup-category-ink:#84d8c9; }
.nearby .location-categories:has(button:nth-child(6).active) { --lup-category-offset:500%; --lup-category-ink:#94dda8; }
.nearby .location-categories button {
  position:relative;
  z-index:2;
  min-height:57px;
  padding:3px 1px 6px;
  border:0;
  border-radius:0;
  outline:0;
  background:transparent;
  box-shadow:none;
}
.nearby .location-categories button::before {
  display:none;
  content:none;
}
.nearby .location-categories button::after { display:none; content:none; }
.nearby .location-categories button.active {
  color:#f5fbff;
  border-color:transparent;
  outline:0;
  background:transparent;
  box-shadow:none;
  filter:brightness(1.08);
  transform:translate3d(0,-1px,0);
}
.nearby .location-categories button.active::before {
  position:absolute;
  bottom:0;
  left:50%;
  z-index:-1;
  display:block;
  width:92%;
  height:58px;
  content:'';
  border:0;
  border-radius:50% 50% 18px 18px / 86% 86% 10px 10px;
  background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--lup-category-ink,#a9ddff) 27%,transparent) 0%,color-mix(in srgb,var(--lup-category-ink,#a9ddff) 12%,transparent) 34%,transparent 75%);
  box-shadow:none;
  opacity:.9;
  transform:translate3d(-50%,0,0);
  pointer-events:none;
}
.nearby .location-categories button.active .material-icons {
  background:transparent;
  box-shadow:0 0 15px color-mix(in srgb,var(--lup-category-ink,#a9ddff) 32%,transparent);
}
.nearby .location-categories.category-rail-dragging::after {
  transition:none;
}
@media (max-width:380px) {
  .nearby .location-categories { padding-right:4px; padding-left:4px; }
  .nearby .location-categories::before { right:8px; left:8px; }
  .nearby .location-categories::after { left:4px; width:calc((100% - 8px) / 6); }
}
@media (prefers-reduced-motion:reduce) {
  .nearby .location-categories::after { transition:none; }
}