.ds-form-password-meter {
  align-items: center;
  color: var(--ds-color-london-5);
  display: inline-flex;
  font-family: var(--ds-type-system-sans-lining);
  font-size: var(--ds-type-scale-0);
  font-weight: 400;
  line-height: var(--ds-type-leading-lower);
  max-width: 33rem;
  width: 100%;
  span {
    margin: 0 0.75rem 0 0;
  }
  meter {
    height: 0.75rem;
    width: 36%;
    &::-webkit-meter-bar {
      background: var(--ds-color-london-95);
      border-radius: 4px;
      height: 0.75rem;
      width: 100%;
    }
    &::-webkit-meter-even-less-good-value {
      background: var(--ds-color-tokyo-45);
      border-bottom-left-radius: 4px;
      border-top-left-radius: 4px;
    }
    &::-webkit-meter-optimum-value {
      background: var(--ds-color-hong-kong-55);
      border-radius: 4px;
    }
    &::-webkit-meter-suboptimum-value {
      background: var(--ds-color-new-york-55);
      border-bottom-left-radius: 4px;
      border-top-left-radius: 4px;
    }
  }
}

.ds-form-field-password + .ds-form-password-meter {
  margin: 0.375rem 0 0 0;
}