@import "theme";

.root {
  width: 100%;
}

.indicator {
  position: relative;
  top: -2px;
  left: 1px;
  width: calc(100% - 2px);
}

.indicator, .score {
  border-radius: 1px;
  height: 2px;
  transition: width 400ms ease;
}

.insecure, .weak, .strong {
  :global {
    .SimpleInput_input {
      border-bottom-color: transparent;
    }
  }
}

.insecure {
  .indicator {
    background-color: var(--rp-password-input-error-color-light);
  }
  .score {
    background-color: var(--rp-password-input-error-color);
  }
}

.weak {
  .indicator {
    background-color: var(--rp-password-input-warning-color-light);
  }
  .score {
    background-color: var(--rp-password-input-warning-color);
  }
}

.strong {
  .indicator {
    background-color: var(--rp-password-input-success-color-light);
  }
  .score {
    background-color: var(--rp-password-input-success-color);
  }
}