@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;
    }
  }
}
