@import url('../components/react-bits/RubberSegment.css');

/* The original JS-CSS thumb and duplicated text mask wrap real section links. */
.desktop-nav.portfolio-rubber,
.portrait-nav-links.portfolio-rubber {
  --rs-h:50px;
  --rs-font:13px;
  --rs-pad:12px;
  --rs-min:0px;
  --rs-idle:.82;
  display:inline-grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  align-items:stretch;
  padding:var(--rs-inset);
  border:1px solid #ffffff12;
  border-radius:var(--rs-radius);
  background:var(--rs-track);
  color:var(--rs-ink);
  box-sizing:border-box;
  flex:none;
}
.desktop-nav.portfolio-rubber { width:350px; }
.portrait-nav-links.portfolio-rubber { width:clamp(288px,26vw,400px); }
.portfolio-rubber>.rubber-segment__item,
.portfolio-rubber .rubber-segment__thumb>.rubber-segment__copy {
  display:flex;
  align-items:center;
  justify-content:center;
  height:calc(var(--rs-h) - 2 * var(--rs-inset));
  min-height:0;
  min-width:0;
  padding:0 var(--rs-pad);
  border-radius:var(--rs-thumb-radius);
  font-family:var(--font-label);
  font-size:var(--rs-font);
  font-weight:400;
  line-height:1;
  text-decoration:none;
  overflow:visible;
}
.portfolio-rubber>.rubber-segment__item { color:var(--rs-ink); background:none; }
.portfolio-rubber>.rubber-segment__item:hover { background:none; }
.portfolio-rubber>.rubber-segment__item[aria-current="location"] { opacity:1; cursor:grab; }
.portfolio-rubber[data-held]>.rubber-segment__item { cursor:grabbing; }
.portfolio-rubber .rubber-segment__thumb { overflow:hidden; border-radius:0; }
.portfolio-rubber .rubber-segment__thumb[hidden] { display:none; }
.portfolio-rubber .rubber-segment__thumb>.rubber-segment__copy { color:var(--rs-ink-active); opacity:1; }
.portfolio-rubber>.rubber-segment__item:focus-visible { outline:2px solid var(--color-accent); outline-offset:-2px; }

@media(max-width:1023px) and (min-width:768px) {
  .desktop-nav.portfolio-rubber { width:330px; }
  .portrait-nav-links.portfolio-rubber { width:288px; }
}
@media(max-width:767px) {
  .desktop-nav.portfolio-rubber { display:none; }
  .portrait-nav-links.portfolio-rubber {
    --rs-h:42px;
    --rs-font:11px;
    --rs-pad:0px;
    width:clamp(166px,49vw,250px);
  }
}
@media(max-width:399px) {
  .portrait-nav-links.portfolio-rubber { --rs-font:10px; width:49vw; }
}
@media(prefers-reduced-motion:reduce) {
  .portfolio-rubber>.rubber-segment__item[data-pressed] { transform:none; }
}