.ds-btt{
  position: fixed;
  right:  clamp(1rem, 2.6vw, 2.5rem);
  bottom: clamp(1rem, 2.6vw, 2.5rem);
  z-index: 30;

  width: 80px;
  height: 80px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.ds-btt.is-on{ opacity: 1; pointer-events: auto; }

.ds-btt:focus-visible{
  outline: 2px solid var(--ds-red, #E63E3E);
  outline-offset: 4px;
}

.ds-btt__face{
  position: absolute;
  inset: 0;
  transition: opacity .3s ease;
}
.ds-btt__face--dark{ opacity: 0; }
.ds-btt[data-ds-tone="light"] .ds-btt__face--light{ opacity: 0; }
.ds-btt[data-ds-tone="light"] .ds-btt__face--dark{ opacity: 1; }

.ds-btt__base,
.ds-btt__text{
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.ds-btt__text{ rotate: var(--btt-turn, 0deg); }

.ds-btt__face--light .ds-btt__base{ background-image: url("../img/btt/btt-ita-light.svg?v=2"); }
.ds-btt__face--light .ds-btt__text{ background-image: url("../img/btt/btt-ita-light-text.svg?v=2"); }
.ds-btt__face--dark  .ds-btt__base{ background-image: url("../img/btt/btt-ita-dark.svg?v=2"); }
.ds-btt__face--dark  .ds-btt__text{ background-image: url("../img/btt/btt-ita-dark-text.svg?v=2"); }

:root:lang(en) .ds-btt__face--light .ds-btt__base{ background-image: url("../img/btt/btt-en-light.svg?v=2"); }
:root:lang(en) .ds-btt__face--light .ds-btt__text{ background-image: url("../img/btt/btt-en-light-text.svg?v=2"); }
:root:lang(en) .ds-btt__face--dark  .ds-btt__base{ background-image: url("../img/btt/btt-en-dark.svg?v=2"); }
:root:lang(en) .ds-btt__face--dark  .ds-btt__text{ background-image: url("../img/btt/btt-en-dark-text.svg?v=2"); }

.ds-btt__hot{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  transition: opacity .2s ease;
}
.ds-btt__hot polyline{
  fill: none;
  stroke: var(--ds-red, #E63E3E);
  stroke-width: 14;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  transition: stroke-width .25s var(--ds-ease-out, ease);
}
@media (hover: hover){
  .ds-btt:hover .ds-btt__hot{ opacity: 1; }
  .ds-btt:hover .ds-btt__hot polyline{ stroke-width: 20; }
}

@media (prefers-reduced-motion: reduce){
  .ds-btt__text{ rotate: none; }
  .ds-btt__face,
  .ds-btt__hot,
  .ds-btt__hot polyline{ transition: none; }
}