// This code comes from https://github.com/gladchinda/password-strength-react-demo/blob/master/src/App.css#L45

.password-input {
  // inputs in the design system have a max width, so cap our container at that
  // width too, to prevent floats and 100% widths from going too big
  max-width: $input-max-width;

  .password-input--show-password label.ds-c-label {
    margin: 0;
  }

  .ds-u-clearfix.no-clearfix:before {
    display: inherit;
  }
}

.strength-meter {
  position: relative;
  height: 3px;
  background: #ddd;
  margin: 7px 0;
  border-radius: 2px;

  &:before,
  &:after {
    content: '';
    height: inherit;
    background: transparent;
    display: block;
    border-color: #fff;
    border-style: solid;
    border-width: 0 6px 0;
    position: absolute;
    width: calc(20% - 6px);
    z-index: 10;
  }

  &:before {
    left: calc(20% - 3px);
  }

  &:after {
    right: calc(20% - 3px);
  }
}

.strength-meter-fill {
  background: transparent;
  height: inherit;
  position: absolute;
  width: 0;
  border-radius: inherit;
  transition: width 0.5s ease-in-out, background 0.25s;

  &[data-strength='empty'] {
    width: 0%;
  }

  &[data-strength='0'] {
    width: 20%;
    background: darkred;
  }
  &[data-strength='1'] {
    width: 40%;
    background: orangered;
  }
  &[data-strength='2'] {
    width: 60%;
    background: orange;
  }
  &[data-strength='3'] {
    width: 80%;
    background: yellowgreen;
  }
  &[data-strength='4'] {
    width: 100%;
    background: green;
  }
}

.strength-meter-quality {
  text-align: right;
  font-size: 0.8rem;
}
