@use "/src/assets/scss/partial" as *;
@use "/src/assets/scss/variables" as *;

.PasswordStrength {
    span {
        background-color: $whiteColor;
        border-radius: 100px;
    }

    // Weak: If at least 1 span is active, only the first one is red
    &.weak {
        span:nth-child(1).active {
            background-color: #f04438;
        }
    }

    // Medium: If at least 2 spans are active, first two should be orange
    &.medium {

        span:nth-child(1).active,
        span:nth-child(2).active {
            background-color: #f79009;
        }
    }

    // Ultimate: If all 3 spans are active, all should be green
    &.ultimate {

        span:nth-child(1).active,
        span:nth-child(2).active,
        span:nth-child(3).active {
            background-color: #17b26a;
        }
    }
}

.UsernameWrapper {
    .icon {
      position: absolute;
      top: 50%;
      right: 15px;
      width: 20px;
      height: 20px;
      background-color: $green;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }