<commit_before>/*---
title: Form field
section: Base Form CSS
---

Form field with error message:
```example:html
<div class="form-field -error">
    <label for="test">Label</label>
    <input type="text" name="test" id="test" placeholder="Test">
    <div class="message"><span>Fehler</span></div>
</div>
```
*/

.form-field {
    & {
        @include vspace('form-field');
        position: relative;
        display: block;
    }

    > .label,
    > label {
        cursor: pointer;
        display: inline-block;
        margin-bottom: $form-label-margin-bottom;
    }

    > .message {
        display: none;
    }

    > .message > span {
        position: absolute;
        top: auto;
        right: 0;
        padding: 1px 5px;
        vertical-align: top;
        color: white;
        background-color: $error-color;
        font-size: $font-size-small;

        @include respond-to(small) {
            display: inline-block;
            position: relative;
            right: auto;
        }
    }
<commit_msg>Prevent adding margins to control labels in field<commit_after>/*---
title: Form field
section: Base Form CSS
---

Form field with error message:
```example:html
<div class="form-field -error">
    <label for="test">Label</label>
    <input type="text" name="test" id="test" placeholder="Test">
    <div class="message"><span>Fehler</span></div>
</div>
```
*/

.form-field {
    & {
        @include vspace('form-field');
        position: relative;
        display: block;
    }

    > .label:not(.control),
    > label:not(.control) {
        cursor: pointer;
        display: inline-block;
        margin-bottom: $form-label-margin-bottom;
    }

    > .message {
        display: none;
    }

    > .message > span {
        position: absolute;
        top: auto;
        right: 0;
        padding: 1px 5px;
        vertical-align: top;
        color: white;
        background-color: $error-color;
        font-size: $font-size-small;

        @include respond-to(small) {
            display: inline-block;
            position: relative;
            right: auto;
        }
    }

{'fraction_non_alphanumeric': 0.14705882352941177, 'fraction_numerical': 0.0028462998102466793, 'mean_word_length': 1.9620786516853932, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1764106', 'n_tokens_mistral': 661, 'n_tokens_neox': 637, 'n_words': 151}