/* Public authentication components.
   Loaded after the shared app CSS to keep login/register inputs isolated. */

.auth-page .auth-input-wrap {
    position: relative;
    width: 100%;
}

.auth-page .auth-input-wrap > .auth-input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    z-index: 2;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    color: var(--auth-muted, #91A3B5);
    pointer-events: none;
}

.auth-page .auth-input-wrap > .auth-input-icon svg {
    width: 22px;
    height: 22px;
}

.auth-page .auth-input-wrap > .auth-input.auth-input--with-icon {
    box-sizing: border-box;
    width: 100%;
    padding: 0 18px 0 64px;
    padding-inline-start: 64px;
    padding-inline-end: 18px;
    text-indent: 0;
}

.auth-page .auth-input-wrap > .auth-input.auth-input--with-icon:focus,
.auth-page .auth-input-wrap > .auth-input.auth-input--with-icon:-webkit-autofill,
.auth-page .auth-input-wrap > .auth-input.auth-input--with-icon:-webkit-autofill:hover,
.auth-page .auth-input-wrap > .auth-input.auth-input--with-icon:-webkit-autofill:focus {
    padding: 0 18px 0 64px;
    padding-inline-start: 64px;
    padding-inline-end: 18px;
    text-indent: 0;
}

.login-screen.auth-page .auth-input-wrap > input.auth-input.auth-input--with-icon {
    padding: 0 18px 0 64px;
    padding-inline-start: 64px;
    padding-inline-end: 18px;
    text-indent: 0;
}

.login-screen.auth-page .auth-input-wrap > input.auth-input.auth-input--with-icon:focus,
.login-screen.auth-page .auth-input-wrap > input.auth-input.auth-input--with-icon:-webkit-autofill,
.login-screen.auth-page .auth-input-wrap > input.auth-input.auth-input--with-icon:-webkit-autofill:hover,
.login-screen.auth-page .auth-input-wrap > input.auth-input.auth-input--with-icon:-webkit-autofill:focus {
    padding: 0 18px 0 64px;
    padding-inline-start: 64px;
    padding-inline-end: 18px;
    text-indent: 0;
}