.form-basic {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.form-basic .inputs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-4);
}

.form-basic.full-width .inputs {
    grid-template-columns: 1fr;
}

.form-basic .inputs .span {
    grid-column: 1 / -1;
}

.form-basic .submit {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-4);
}

.form-basic .submit .agreement {
    font: var(--body-s-regular);
    letter-spacing: var(--letter-spacing-s);
    color: var(--text-body-07);
    user-select: none;
    transition: color .3s;
}

.form-basic .submit .agreement label {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.form-message {
    display: none;
}

.form-message.active {
    display: grid;
    gap: var(--spacing-4);
}

.input-field {
    position: relative;
    display: block;
}

.validation-message {
    position: absolute;
	background-color: var(--bg-surface-white);
	transform: translate(0, -50%);
	padding:2px;
	border-radius: 4px;
    top:1px;
    right: var(--spacing-2);
    font-size: var(--body-s-regular);
	letter-spacing:var(--letter-spacing-s);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, color 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.input-field.is-invalid input,
.input-field.is-invalid textarea {
    border-color: var(--error-text);
}

.input-field.is-invalid .validation-message {
    opacity: 1;
    visibility: visible;
    color: var(--error-text);
	font:var(--body-s-regular)
}

.input-field.is-valid input,
.input-field.is-valid textarea {
    border-color: var(--success-text);
}

.input-field.is-valid .validation-message {
    opacity: 1;
    visibility: visible;
    color: var(--success-text);
}