/* Base form styles */
.lgnl-passwordless-login-form {
    display: grid;
    grid-template-columns: max-content 1fr;
	grid-template-rows: auto 0.25em auto 1em auto;
	grid-column-gap: 1em;
	max-width: 500px;
}

.lgnl-form__group {
	position: relative;
    display: contents;
}

.lgnl-passwordless-login-form__username-label {
	grid-column: 1 / span 2;
    grid-row: 1;
}

.lgnl-passwordless-login-form__username-input {
	grid-column: 1 / span 2;
    grid-row: 3;
}

.lgnl-passwordless-login-form__submit {
	align-self: baseline;
    grid-row: 5;
}

/* Spinner */
.lgnl-passwordless-login-form__spinner {
    grid-row: 5;
}

.lgnl-passwordless-login-form__response {
	grid-column: 2;
	grid-row: 5;
	align-self: center;
}

/* Elements */

.lgnl-passwordless-login-form__username-input{
	
}

.lgnl-passwordless-login-form__username-input--disabled {
	filter: opacity(0.5);
}

.lgnl-form .lgnl-form__input,
.lgnl-form .lgnl-form__label {
	margin: 0;
}

/* Form group */


.lgnl-form__label {
    display: block;
}

.lgnl-input {
}

.lgnl-input:focus {
}

.lgnl-input--disabled {
	filter: opacity(0.5);
}

/* Error state */
.lgnl-shake {
    animation: lgnl-shake 0.3s ease-in-out;
}

@keyframes lgnl-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

/* Button styles */
.lgnl-form__group--button {
}

.lgnl-form__button {
}

.lgnl-form__button:hover {
}

.lgnl-form__button:disabled,
.lgnl-form__button--disabled {
    filter: saturate(0.0) brightness(1.5) opacity(0.5);
}

/* Spinner styles */
.lgnl-form__spinner {
	align-self: center;
	width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top: 2px solid #0073aa;
    border-radius: 50%;
    animation: lgnl-spin 1s linear infinite;
}

.lgnl-form__spinner--hidden {
    display: none;
}

@keyframes lgnl-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.lgnl-form__response {
	font-size: 0.85em;
}

.lgnl-form__response--hidden {
    display: none;
}