.back-to-top {
  position: fixed;
  bottom: var(--sfbrn-spacer);
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 36px;
  border: 0;
  border-radius: var(--sfbrn-border-radius);

  background: var(--sfbrn-color-gray-light);
  color: var(--sfbrn-text-color);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--sfbrn-shadow);
}

.back-to-top:hover { background: #e9e9e9; }

.back-to-top__icon {
  font-size: 25px;
  padding-top: 13px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-1px);
}

.back-to-top--bottom-left { left: var(--sfbrn-spacer); }
.back-to-top--bottom-right { right: var(--sfbrn-spacer); }

@media (min-width: 767px) {
  .back-to-top { bottom: 128px; }
  .back-to-top--bottom-left { left: calc(var(--sfbrn-spacer) * 10); }
  .back-to-top--bottom-right { right: calc(var(--sfbrn-spacer) * 10); }
}