@font-face {
  font-family: "Inter Asset";
  src: url("assets/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --error: #dc3736;
  --on-error: #fffbff;
  --warning: #ffa239;
  --on-warning: #441306;
  --motion-standard: cubic-bezier(0.2, 0, 0, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  background: #f6f6f7;
  font-family: "Inter Asset", Inter, sans-serif;
}

.demo-stage {
  display: grid;
  min-height: 100vh;
  place-items: center;
}

.badge-group {
  position: relative;
  width: 143px;
  height: 50px;
}

.count-badge,
.bell-badge {
  position: absolute;
  top: 12px;
  display: grid;
  height: 20px;
  place-items: center;
  border-radius: 999px;
}

.count-badge {
  left: 15px;
  width: fit-content;
  padding: 2px 8px;
  overflow: hidden;
  background: var(--error);
  color: var(--on-error);
}

.count-window {
  position: relative;
  display: grid;
  width: max-content;
  height: 16px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  font-feature-settings: "ss07" 1;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}

.count-current,
.count-next {
  grid-area: 1 / 1;
  display: block;
}

.count-next {
  opacity: 0;
  transform: translateY(-70%);
}

.count-window.is-rolling .count-current {
  animation: count-out 86ms var(--motion-standard) both;
}

.count-window.is-rolling .count-next {
  animation: count-in 86ms var(--motion-standard) both;
}

.bell-badge {
  left: 60px;
  width: 20px;
  padding: 4px;
  background: var(--warning);
}

.bell-icon {
  display: block;
  width: 12px;
  height: 12px;
  transform-origin: 50% 12%;
}

.bell-badge.is-ringing .bell-icon {
  animation: bell-ring 620ms ease-in-out both;
}

.status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes count-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(70%);
  }
}

@keyframes count-in {
  from {
    opacity: 0;
    transform: translateY(-70%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bell-ring {
  0%,
  100% {
    transform: rotate(0deg);
  }

  18% {
    transform: rotate(-11deg);
  }

  38% {
    transform: rotate(9deg);
  }

  57% {
    transform: rotate(-6deg);
  }

  74% {
    transform: rotate(3deg);
  }

  88% {
    transform: rotate(-1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .count-badge {
    width: fit-content;
  }

  .count-current {
    opacity: 1;
    transform: none;
  }

  .count-next {
    display: none;
  }

  .bell-badge.is-ringing .bell-icon {
    animation: none;
  }
}