.tmc-floating-networks {
  --_tmc-fn-size: var(--tmc-fn-size, 42px);
  --_tmc-fn-gap: var(--tmc-fn-gap, 6px);
  --_tmc-fn-top: var(--tmc-fn-top, 50%);

  position: fixed;
  top: var(--_tmc-fn-top);
  z-index: 1035;
  display: flex;
  flex-direction: column;
  gap: var(--_tmc-fn-gap);
  transform: translateY(-50%);
}

.tmc-floating-networks[hidden],
.tmc-fn-btn[hidden] {
  display: none;
}

.tmc-floating-networks--right {
  right: 0;
}

.tmc-floating-networks--left {
  left: 0;
}

.tmc-fn-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--_tmc-fn-size);
  height: var(--_tmc-fn-size);
  font-size: calc(var(--_tmc-fn-size) * 0.43);
  color: #fff;
  text-decoration: none;
  background: var(--tmc-fn-color, #4b5563);
  box-shadow: 0 2px 8px rgb(0 0 0 / 22%);
  transition: transform 0.15s ease;
}

.tmc-fn-btn:hover,
.tmc-fn-btn:focus-visible {
  color: #fff;
}

.tmc-fn-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
  box-shadow: 0 0 0 2px rgb(0 0 0 / 60%);
}

.tmc-floating-networks--right .tmc-fn-btn {
  border-radius: 8px 0 0 8px;
}

.tmc-floating-networks--left .tmc-fn-btn {
  border-radius: 0 8px 8px 0;
}

.tmc-floating-networks--right .tmc-fn-btn:hover,
.tmc-floating-networks--right .tmc-fn-btn:focus-visible {
  transform: translateX(-6px);
}

.tmc-floating-networks--left .tmc-fn-btn:hover,
.tmc-floating-networks--left .tmc-fn-btn:focus-visible {
  transform: translateX(6px);
}

.tmc-fn-btn--nolink {
  opacity: 0.55;
  outline: 2px dashed #fff;
  outline-offset: -5px;
}

@media (width <= 767.98px) {
  .tmc-floating-networks {
    --_tmc-fn-size: var(--tmc-fn-size, 36px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tmc-fn-btn {
    transition: none;
  }
}