@import '../../scss/bootstrap/common';

.passwordInput {
  padding-right: 2.75rem;
}

.passwordEye {
  display: flex;
  position: absolute;
  right: 0px;
  font-size: 1.7rem;
  color: $secondary;
  margin-right: 0.9375rem;
  cursor: pointer;
  height: 100%;
  align-items: center;
}

.strengthBlock {
  border: 1px solid $border-color;
  background-color: transparent;
  height: 12px;
  border-radius: 15px;
  transition: background-color 0.2s;
}

.weak {
  background-color: $dfi-red;
  border-color: $dfi-red;
}

.medium {
  background-color: $dfi-orange;
  border-color: $dfi-orange;
}

.strong {
  background-color: $dfi-green;
  border-color: $dfi-green;
}

.strengthContainer {
  display: grid;
  grid-template-columns: 1fr max-content;
  justify-content: center;
  align-items: center;
  margin-top: 0.75rem;
  grid-column-gap: 1rem;
}

.strengthBlocks {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  grid-column-gap: 8px;
  margin-left: 1rem;
}

$weakBlock: 24px;

.veryWeakBlock {
  width: $weakBlock;
}

.weakBlock {
  width: $weakBlock * 1.5;
}

.mediumBlock {
  width: $weakBlock * 2;
}

.strongBlock {
  width: $weakBlock * 2.5;
}

.veryStrongBlock {
  width: $weakBlock * 3;
}

.passphraseStrengthLabel {
  color: $secondary;
  margin-bottom: 0;
  font-weight: 500;
}
