.strength-meter
  background-color: $gray-light
  border-radius: 3px
  height: 5px
  margin-top: 5px
  position: relative
  width: 100%

  &:after
    border-radius: 3px
    bottom: 0
    content: ''
    display: block
    left: 0
    position: absolute
    top: 0

  &.strength-0
    color: $brand-danger
    &:after
      background-color: $brand-danger
      width: 0%

  &.strength-1
    color: $brand-danger
    &:after
      background-color: $brand-danger
      width: 25%

  &.strength-2
    color: $brand-warning
    &:after
      background-color: $brand-warning
      width: 50%

  &.strength-3
    color: $brand-success
    &:after
      background-color: $brand-success
      width: 75%

  &.strength-4
    color: $brand-success
    &:after
      background-color: $brand-success
      width: 100%

  &.strength-0,
  &.strength-1,
  &.strength-2,
  &.strength-3,
  &.strength-4
    &:after
      transition: all 0.3s

  .strength-meter-wording
    font-size: 0.9em
    position: absolute
    right: 0
    top: -6.5rem