form {
    //variations


    &.-form-button {
        display: inline-block;
        vertical-align: middle;

        .alert & {
            margin: 0 1em;
        }
    }
}


// Container for collection of label & input
.form__group {
    @extend .clearfix;

    padding: .75em 0;


    //variations
    &.-buttons {
        margin: 1em 0;
    }

    &.-media {
        margin: .75em 0;
        padding: .75em;

        background: $white-off;
    }
}

.form__group__help {
    margin-top: .5em;

    font-size: font-size(s);
}



fieldset {
    min-width: 0;
    margin: .75em 0;
    padding: .75em;

    background: $white-off;
    border: 0;

    //variations
    &.-info {
        background: rgba(color($blue, lightest) , .6);
    }

    //hacks
    body:not(:-moz-handler-blocked) & {
        display: table-cell;
    }
}


legend {
    display: table;
    padding: .5em 1em;

    color: color($gray);
    background: $white-off;
    border-radius: 3px;

    font-size: font-size(xs);
    font-weight: font-weight(500);
    text-align: left;
    text-transform: uppercase;
}


label {
    color: color($gray, dark);

    font-size: font-size(default);

    //variations
    &.-invers {
        color: rgba($white, .5);
    }

    //context
    form.-stacked & {
        display: block;
        padding-bottom: .5em;
    }
}

.label--required {
    &:after {
        content: '*';
    }
}

.lang-bubble {
    display: inline-block;
    min-width: 2em;
    height: 2em;
    padding: 0 3px;

    color: color($green, dark);
    background: $white;
    border: solid 1px color($gray, light);
    border-radius: 1em;
    box-shadow: 0 3px rgba($black, .075);

    font-size: font-size(xs);
    font-weight: font-weight(extrabold);
    line-height: 1.8; //correction
    text-align: center;
    text-transform: uppercase;
}

.label--lang {
    @extend .lang-bubble;
    // `important` is required to overwrite relative
    // positioning in blender-media

    position: absolute !important;
    top: -.25rem;
    left: .35em;
    z-index: z-index(above);
}

.legend__lang,
.label__lang {
    @extend .lang-bubble;

    margin: 0 .35em;
    vertical-align: top;
}

//standard controls
input[type='text'],
input[type='password'],
input[type='email'],
input[type='url'],
input[type='date'],
input[type='month'],
input[type='time'],
input[type='datetime'],
input[type='datetime-local'],
input[type='week'],
input[type='number'],
input[type='search'],
input[type='tel'],
input[type='color'],
select,
textarea {
    display: inline-block;
    height: 2.5em;
    padding: 0 .5em;
    vertical-align: middle;

    color: $text-color;
    border: 2px solid color($gray, light);
    border-radius: border-radius(s);
    box-shadow: inset 0 2px rgba(color($gray), .15), 0 2px rgba($black, .075);

    font-weight: font-weight(normal);

    &:focus {
        border: 2px solid color($blue, light);
        outline: none;
    }

    //context
    form.-stacked & {
        width: 100%;
    }
}

textarea[disabled],
input[disabled] {
    color: $text-color;
    box-shadow: none;
            opacity: .5;

    mix-blend-mode: multiply;
    -webkit-opacity: .5;
    -webkit-text-fill-color: $text-color;
}

input[type='date'],
input[type='datetime'],
input[type='text'].-datetime {
    width: 8em !important;
}


input[type='search'] {
    padding: 0 1em;
}

textarea {
    max-width: 100%;
    padding: .5em;
}

textarea[data-autosize] {
    resize: none;
}