.input-group,
.input-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
}

.input-wrapper:has(+ #input-error) {
    margin: 0 0 var(--spacing-8);
}

.input-group:has(+ .input-group) {
    margin: 0 0 var(--spacing-32);
}

.input-group:has(+ .form-button-group) {
    margin: 0 0 var(--spacing-16);
}

input {
    outline-color: var(--color-secondary-powder-blue);
    outline-style: solid;
    outline-width: var(--outline-width-1px);
    border-radius: var(--radius-16);
    background-color: var(--color-shades-light-powder-blue);
    padding: var(--spacing-16);
}

input::placeholder {
    color: var(--color-essential-black);
    opacity: 0.6;
}

input:hover,
input:active,
input:focus,
input:focus-visible,
input[aria-invalid="true"] {
    outline-width: var(--outline-width-2px);
}

input:active + i#username-icon,
input:active + i.password-icon,
input:active + i#password-icon,
input:focus + i#username-icon,
input:focus + i.password-icon,
input:focus + i#password-icon,
input:focus-visible + i#username-icon,
input:focus-visible + i.password-icon,
input:focus-visible + i#password-icon,
input:not(:placeholder-shown) + i#username-icon,
input:not(:placeholder-shown) + i.password-icon,
input:not(:placeholder-shown) + i#password-icon {
    opacity: 1;
}

input:hover {
    outline-color: var(--color-primary-electric-indigo);
}

input:active,
input:focus,
input:focus-visible {
    outline-color: var(--color-primary-midnight-blue);
}

input[aria-invalid="true"] {
    outline-color: var(--color-secondary-flat-red);
}

i#username-icon,
i#password-icon,
i.password-icon {
    color: var(--color-essential-black);
    opacity: 0.6;
    background-color: currentColor;
    display: inline-block;
    position: absolute;
    width: 24px;
    height: 24px;
    left: var(--spacing-16);
    top: 15px;
}

#username-icon {
    mask: url("../../img/email.svg");
}

#password-icon,
.password-icon {
    mask: url("../../img/password.svg");
}

input#username,
input#password {
    text-indent: var(--spacing-36);
}

input#password-new,
input#password-confirm {
    padding-inline: 52px;
}

#input-error-username, #input-error-password, #input-error-password-confirm {
    color: var(--color-secondary-flat-red);
    margin: var(--spacing-8) var(--spacing-16);
}

.visibility-control {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-primary-electric-indigo);
    cursor: pointer;
    position: absolute;
    right: var(--spacing-12);
    top: var(--spacing-12);
    background-color: transparent;
    transition: var(--transition);
    border-radius: var(--radius-8);
    width: 32px;
    height: 32px;
}

.visibility-control:hover {
    background-color: var(--color-secondary-powder-blue);
}

.visibility-control:focus-visible {
    background-color: var(--color-secondary-powder-blue);
    outline: var(--color-essential-black) solid var(--outline-width-2px);
    outline-offset: var(--spacing-4);
}

.visibility-control:active {
    background-color: var(--color-secondary-cosy-grey);
}

.visibility-control i {
    display: inline-block;
    background-color: currentColor;
    width: 24px;
    height: 24px;
}

.visibility-control .visibility_off {
    mask: url("../../img/password_visibility_off.svg");
}

.visibility-control .visibility {
    mask: url("../../img/password_visibility_on.svg");
}

#password_minlength {
    margin: 12px 0 0;
    display: flex;
    gap: 5px;
    align-items: center;
}

.validate-icon {
    width: 24px;
    height: 24px;
    background-image: url(../../img/close.svg);    
}

.validate-icon.check {
    width: 24px;
    height: 24px;
    background-image: url(../../img/check.svg);
}

@media (min-width: 1024px) {
    i#username-icon,
    i.password-icon {
        top: 17px;
    }

    .visibility-control {
        top: var(--spacing-14);
    }
}

.hidden {
  display: none;   
}