form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75em 1.25em;
    margin: 1em 0;

    &.horizontal {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
    }

    & .button-row {
        display: flex;
        flex-direction: row;
        gap: 0.5em;
        justify-content: flex-end;
    }

    &.validated {
        & input:invalid, & textarea:invalid {
            border-color: red;

            & + .error {
                display: inline-block;
                color: red;
                font-size: 0.7em;
            }
        }
    }

    & .form-group label {
        margin-right: 0.5em;
    }

    & .field-error-container {
        display: flex;
        flex-direction: column;
    }


    & .error {
        display: none;
    }
}

input, textarea, select {
    border: 1px solid var(--weak);
    border-radius: 5px;
    background-color: var(--background);
    color: var(--text);
    padding: 0.25em 0.4em;
}

textarea {
    resize: vertical;
}

@media (min-width: 769px) {
    form {
        grid-template-columns: max-content 1fr;

        & .button-row {
            grid-column: 2;
        }
    }
}