.recovery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recovery__link {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.recovery__link:has(+ .recovery__formHolder form ) {
    pointer-events: none;
}

.recovery__link .icon {
    rotate: 0deg;
    transition: rotate 400ms ease-in-out;
}

.recovery__link:has( + .recovery__formHolder form ) .icon {
    rotate: 90deg;
}

.recovery__form {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}

:where(.recovery__form label) {
    display: block;
}

.recovery__input {
    width: 250px;
}

.recovery__captchaWrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.captchaImage {
    display: inline-block;
    height: 2rem;
    object-fit: contain;
    object-position: center;
}

.recovery__input[list]:invalid ~ .recovery__input[list] {
    color: var(--color-neutral-4, #C7C7C7) !important;
    border-color: var(--color-neutral-4, #C7C7C7) !important;
    pointer-events: none;
}