/* Label

Add the class `.label` to style labels.

NOTE: You can wrap labels around inputs. It saves markup and make it more intuitive to read code :)

Example:
    <label class="label">
        I'm a label!
    </label>

Example: --inline
    <p>Look, <label class="label  label--inline">I'm a inline label</label>!!!</p>

Example: --spaced
    <label class="label  label--spaced">
        I have more spacing below me. The same spacing as a .fieldwrapper.
    </label>

Example: --primary
    <label class="label label--primary">
        I'm a label with the --primary style!
    </label>

Example: --strong
    <label class="label label--strong">
        I'm a label with the --strong style!
    </label>


Example: With input within the label

    <label class="label">
        Name
        <input class='input' type='text'/>
    </label>

Example: With input outside the label

    <label class="label" for='id_labelexample'>
        Name
    </label>
    <input class='input' type='text' id='id_labelexample'/>
Styleguide form.2:label
*/

.label {
    display: block;
    margin-bottom: $unit;

    &--inline {
        display: inline;
        margin: 0;
    }

    &--spaced {
        margin-bottom: $vertical-rythm--spacing;
        .input {
            margin-bottom: 0;
        }
    }

    &--strong {
        @include font(base, bold);
    }

    &--primary {
        color: color(primary);
    }

    &--small {
        @include font-size(xsmall);
    }

    &--muted {
        color: $color-muted;
    }
}
