@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/style.c38e1d7304920e3.css";

.password-input-demo-stack {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  width:          100%;
  max-width:      20rem;
}

.password-input-demo-row {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-3);
}

.password-input-demo-meter {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-1);
}

.password-input-demo-meter > span {
  height:        var(--space-1);
  border-radius: var(--radius-pill);
  background:    var(--bg-muted);
}

.password-input-demo-meter > span[data-on] {
  background: var(--accent);
}

.password-input-demo-meter[data-score="1"] > span[data-on] {
  background: var(--danger);
}

.password-input-demo-meter[data-score="2"] > span[data-on] {
  background: var(--warning);
}

.password-input-demo-strength {
  display:         flex;
  justify-content: space-between;
  font-size:       var(--text-caption);
  color:           var(--ink-soft);
}