.password-input-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.password-input-wrapper > input {
    padding-right: 2.75rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: .75rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.password-toggle:hover {
    color: var(--c-primary-500);
}

.password-toggle:focus {
    outline: none;
}

/* The input is wrapped to position the button, so restore Bootstrap's
   validation feedback selector across that wrapper. */
.was-validated .password-input-wrapper:has(> .form-control:invalid) ~ .invalid-feedback,
.was-validated .password-input-wrapper:has(> .form-control:invalid) ~ .invalid-tooltip,
.password-input-wrapper:has(> .form-control.is-invalid) ~ .invalid-feedback,
.password-input-wrapper:has(> .form-control.is-invalid) ~ .invalid-tooltip {
    display: block;
}