/**
 * Wyglad placeholdera ("szkieletu") pokazywanego w miejscu tokenu
 * {{pc:NUMER:POLE}} do czasu, az prawdziwa wartosc zostanie pobrana
 * z prostacena.pl. Patrz prostacena-tokens.js.
 *
 * Chcesz zmienic wyglad (np. kolor pod motyw)? Nadpisz .pc-skel w CSS
 * swojego motywu / Divi Theme Options - Custom CSS. Ta reguła ma niska
 * specyficznosc, wiec latwo ja przebic.
 */
.pc-skel {
  display: inline-block;
  min-width: 2.5em;
  width: 4em;
  height: 0.85em;
  vertical-align: -0.15em;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(128, 128, 128, 0.18) 25%,
    rgba(128, 128, 128, 0.32) 37%,
    rgba(128, 128, 128, 0.18) 63%
  );
  background-size: 400% 100%;
  animation: pc-skel-shimmer 1.4s ease infinite;
}

.pc-skel[data-pc-field="price"],
.pc-skel[data-pc-field="priceRaw"],
.pc-skel[data-pc-field="pricePerM2"],
.pc-skel[data-pc-field="pricePerM2Raw"] {
  width: 5.5em;
}

.pc-skel[data-pc-field="area"],
.pc-skel[data-pc-field="areaRaw"] {
  width: 3em;
}

.pc-skel[data-pc-field="floor"],
.pc-skel[data-pc-field="rooms"] {
  width: 1.5em;
}

.pc-skel[data-pc-field="number"] {
  width: 3.5em;
}

.pc-skel[data-pc-field="status"],
.pc-skel[data-pc-field="statusLabel"] {
  width: 4.5em;
}

.pc-skel[data-pc-field="notes"] {
  width: 9em;
}

@keyframes pc-skel-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-skel {
    animation: none;
    background: rgba(128, 128, 128, 0.25);
  }
}