/* ==========================================================
   MEDIDOR DE AMOR: coração que enche de aquarela
   ========================================================== */

.medidor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 24rem;
  margin: 0 auto;
  text-align: center;
}

.medidor__coracao {
  width: min(48vw, 190px);
  height: auto;
  overflow: visible;
}

.medidor__contorno {
  fill: rgba(255, 255, 255, .6);
  stroke: var(--batom);
  stroke-width: 1.6;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
}

.medidor__tinta { fill: url(#tinta-aquarela); opacity: .92; }
.medidor__nivel { transition: y .15s linear; }

.pulsando { animation: coracao-bate .9s ease-in-out infinite; }

@keyframes coracao-bate {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.1); }
  30% { transform: scale(1); }
  45% { transform: scale(1.07); }
}

.medidor__rotulo {
  min-height: 2em;
  font-size: clamp(1.15rem, 5vw, 1.35rem);
  color: var(--batom);
}

/* o controle: uma faixa que vai enchendo de rosa */
.medidor__controle {
  --progresso: 0%;
  width: 100%;
  height: 2.6rem;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.medidor__controle::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--batom) var(--progresso), var(--rosa-claro) var(--progresso));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
}

.medidor__controle::-moz-range-track {
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--batom) var(--progresso), var(--rosa-claro) var(--progresso));
}

.medidor__controle::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 34px;
  height: 34px;
  margin-top: -12px;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c92a5a' stroke='%23fff' stroke-width='1.6' d='M12 21s-6.7-4.35-9.33-8.36C.73 9.7 2.04 5.5 5.9 5.02 8.1 4.75 9.9 5.9 12 8.2c2.1-2.3 3.9-3.45 6.1-3.18 3.86.48 5.17 4.68 3.23 7.62C18.7 16.65 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(80, 0, 20, .35));
}

.medidor__controle::-moz-range-thumb {
  width: 34px;
  height: 34px;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c92a5a' stroke='%23fff' stroke-width='1.6' d='M12 21s-6.7-4.35-9.33-8.36C.73 9.7 2.04 5.5 5.9 5.02 8.1 4.75 9.9 5.9 12 8.2c2.1-2.3 3.9-3.45 6.1-3.18 3.86.48 5.17 4.68 3.23 7.62C18.7 16.65 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.medidor__controle:focus-visible { outline-offset: 2px; }