@import 'vars';

// jquery-strength
// =========================================================
$namespace: strength;

.#{$namespace}-container {
  // display: inline-block;
  position: relative;

  .#{$namespace}-input {
    width: 100%;
    padding-right: 20px;
  }

  .#{$namespace}-meter {
    position: absolute;
    top: 15%;
    right: 6px;
    width: 4px;
    height: 70%;
    overflow: hidden;
    background-color: #ccc;
    border-radius: 1px;
  }

  .#{$namespace}-score {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0;
    color: transparent;
    transition: width .6s ease 0s;
  }

  .show-password-wrap {
    position: absolute;
  }

  .#{$namespace}-toggle {
  }

  //===score 2 status
  .#{$namespace}-invalid {
    &.#{$namespace}-score {
      height: 25%;
      background-color: $brand-danger;
    }
  }

  .#{$namespace}-weak {
    &.#{$namespace}-score {
      height: 50%;
      background-color: $brand-warning;
    }
  }

  .#{$namespace}-good {
    &.#{$namespace}-score {
      height: 75%;
      background-color: $brand-info;
    }
  }

  .#{$namespace}-strong {
    &.#{$namespace}-score {
      height: 100%;
      background-color: $brand-success;
    }
  }
}