/* SVG BUTTON BASE STYLES */

.buttonVisuals path,
.buttonVisuals circle,
.buttonVisuals text {
  transition: fill 0.1s ease, stroke 0.1s ease, scale 0.1s ease;
}

.buttonVisuals text {
  pointer-events: none; /* set pass-through */
}

.buttonHit path,
.buttonHit circle,
.buttonHit text {
  fill: transparent !important;
  pointer-events: all !important;
  cursor: pointer !important;
}

/* NAV-BUTTONS COLORS  */

.nav-button .buttonVisuals.hovered path {
  fill: var(--gray-3) !important;
  stroke: var(--red-0)  !important;
}

.nav-button .buttonVisuals.pressed path,
.nav-button .buttonVisuals.pressed circle {
  fill: var(--gray-3) !important;
  stroke: var(--red-0) !important;
}

.nav-button .buttonVisuals.pressed {
  transform: var(--press-scale-0) !important;
  transform-origin: center;
  transform-box: fill-box;
}

.nav-button:focus {
  outline: 2px solid var(--red-0);
  outline-offset: 1px;
  border-radius: 4px;
}

.nav-button:focus:not(:focus-visible) {
  outline: none;
}


/* SOCIALS BUTTONS */

.socials-button .buttonVisuals.pressed {
  transform: var(--press-scale-1) !important;
  transform-origin: center;
  transform-box: fill-box;
}

.socials-button:focus {
  outline: 2px solid var(--red-0);
  outline-offset: 0px;
  border-radius: 0px;
}

.socials-button:focus:not(:focus-visible) {
  outline: none;
}

/* FLOATING BUTTONS */

.floating-button .buttonVisuals.pressed {
  transform: var(--press-scale-1) !important;
  transform-origin: center;
  transform-box: fill-box;
}

.back-to-top {
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s;
}

.back-to-top .buttonVisuals.pressed {
  transform: var(--press-scale-1) !important;
  transform-origin: center;
  transform-box: fill-box;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:focus {
  outline: 2px solid var(--red-0);
  outline-offset: 1px;
  border-radius: 4px;
}

.back-to-top:focus:not(:focus-visible) {
  outline: none;
}