.dockerNav {
  --btn-size: 40px;
  --btn-radius: calc(var(--btn-size) * .25);
  --btn-bg: rgba(0 0 0 / .75);
  --btn-txt: rgba(215 255 255 / 1);
  
  --dock-bg: rgba(255 255 255 / .15);
  --dock-border-radius: calc(var(--btn-size) * .35);
  --dock-blur: 3px;
  --dock-padding: calc(var(--btn-size) * .25);
  
  --label-bg: rgb(30, 41, 59);
  --label-txt: rgb(255, 255, 255);
  --label-radius: 4px;
  
  bottom: 1rem;
  padding: var(--dock-padding);
}
/* dock background - fixed height so hovered dockerNav "overflow" */
.dockerNav::before{
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: -1;
  height: calc(var(--btn-size) + (var(--dock-padding) * 2));
  border-radius: var(--dock-border-radius);
  background-color: var(--dock-bg);
  backdrop-filter: blur(var(--dock-blur));
}


.dockerNav > button > svg{
  width: 40%;
  height: 40%;
}
/* button label */
.dockerNav > button::before{
  content: attr(data-title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  background: var(--label-bg);
  color: var(--label-txt);
  border: 1px solid rgba(255 255 255 /.25);
  border-radius: var(--label-radius);
  z-index: -1;
  translate: -50% -.75rem;
  white-space: nowrap;
  font-size: 0.75rem;
  padding: .15rem .75rem;
  
  /* transition */
  opacity: var(--label-opacity,0);
  transform: translateY(var(--label-y,30px));
  transition: 
    transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8), 
    opacity 300ms ease-in-out;
  transition-delay: var(--label-delay, 0ms);
}

/* button hover - update custom property values for button & label */
button:hover,
button:focus-visible{
  --btn-width: calc(var(--btn-size) * 2);
  --btn-height: calc(var(--btn-size) * 2);
  --label-opacity: 1;
  --label-y: 0;
  --label-delay: 150ms;
}


/* dockerNav either side */
button:has(+ button:hover),
button:has(+ button:focus-visible),
button:hover + button,
button:focus-visible + button {
  --btn-width: calc(var(--btn-size) * 1.5);
  --btn-height: calc(var(--btn-size) * 1.5); 
}
/* dockerNav either side + 1 */
button:has(+ button + button:hover),
button:has(+ button + button:focus-visible),
button:hover + button + button,
button:focus-visible + button + button {
  --btn-width: calc(var(--btn-size) * 1.25);
  --btn-height: calc(var(--btn-size) * 1.25); 
}