@use "../global/common" as global;

// ------------------------------
//  パスワード 強度メーター
// ------------------------------
.acms-password-strength-meter {
  width: 100%;
  height: 6px;
  margin: 0 0 5px;
  background-color: global.$password-strength-default-color;

  &.js-result-0 { background: global.$password-strength-danger-color; }
  &.js-result-1 { background: global.$password-strength-anxiety-color; }
  &.js-result-2 { background: global.$password-strength-warning-color; }
  &.js-result-3 { background: global.$password-strength-reasonable-color; }
  &.js-result-4 { background: global.$password-strength-secure-color; }
}
.acms-password-strength-label {
  &:before {
    margin: 0 5px 0 0;
    font-family: 'acms-fonts';
  }
  &.js-label-0 { color: global.$password-strength-danger-color; }
  &.js-label-1 { color: global.$password-strength-anxiety-color; }
  &.js-label-2 { color: global.$password-strength-warning-color; }
  &.js-label-3 { color: global.$password-strength-reasonable-color; }
  &.js-label-4 { color: global.$password-strength-secure-color; }

  &.js-label-0 {
    &:before {
      content: global.$icon-news;
    }
  }
  &.js-label-1 {
    &:before {
      content: global.$icon-news;
    }
  }
  &.js-label-2 {
    &:before {
      content: global.$icon-attention;
    }
  }
  &.js-label-3 {
    &:before {
      content: global.$icon-checklist;
    }
  }
  &.js-label-4 {
    &:before {
      content: global.$icon-checklist;
    }
  }
}
