@property --search-results-count {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
search-total {
  transition: --search-results-count 1s;
  counter-set: count var(--search-results-count);
  display: flex;
  flex-direction: column;
  place-content: center;
  place-items: center;
  width: 100%;
  position: relative;
  aspect-ratio: 1;
}
@supports not (aspect-ratio: 1) {
  search-total {
    aspect-ratio: initial;
    width: var(--search-total-size, 150px);
    height: var(--search-total-size, 150px);
  }
}
search-total .ring {
  --search-results-count: inherit;
  fill: transparent;
  width: 100%;
  height: 100%;
  position: absolute;
  stroke-width: 0.4em;
  stroke: var(--search-total-ring-colour, var(--theme-primary));
}
search-total .ring-background {
  transition: opacity var(--transition);
}
search-total .ring-percentage {
  display: none;
  stroke-dashoffset: calc(-1px * var(--stroke-dasharray) / 100 * (100 + var(--search-results-percentage)));
  stroke-dasharray: var(--stroke-dasharray);
  transition: stroke-dashoffset var(--transition), fill 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  transform: rotate(-90deg);
}
search-total:not([style*="--search-results-percentage"]) .ring-background, search-total[style*="--search-results-percentage:0"] .ring-background, search-total[style*="--search-results-percentage: 0"] .ring-background {
  opacity: 1;
}
search-total:after {
  font-size: 2em;
  line-height: 1.3;
  content: attr(data-count);
  order: -1;
  display: flex;
  place-content: center;
  place-items: center;
  font-weight: 700;
  position: relative;
  transform: scale(1);
  transition: opacity var(--transition), transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@supports (background: paint(something)) {
  search-total:after {
    content: counter(count);
  }
}
search-total span {
  font-size: 1.5625em;
  line-height: 1.4;
}
/*# sourceMappingURL=../../sourcemaps/components/search/search-total.css.map */