/**
 *
 *
 *
 *
 */

@mixin plain-ui__component__field()
{
    // group, container for fields
    .field-group {
        margin-bottom: 1.2em;

        &--valid {
            input.field-text, textarea.field-text {
                border-color: $plain-ui__success-light;
            }

            .icon {
                fill: $plain-ui__success-light;
            }
        }

        &--error {
            input.field-text, textarea.field-text {
                border-color: $plain-ui__danger-light;
            }

            .icon {
                fill: $plain-ui__danger-light;
            }
        }
    }

    .field-label {
        font-size: 1rem;
        font-family: $plain-ui__font-family;

        .icon {
            vertical-align: sub;
            font-size: 1.1rem;
        }

        &:hover {
            cursor: pointer;
        }
    }

    input.field-text, textarea.field-text, select.field-choice {
        font-family: $plain-ui__font-family;
        font-size: 0.95rem;

        width: 100%;

        border: 1px solid lighten($plain-ui__primary-light, 40%);
        background-color: white;
        border-radius: 2px;

        margin: 0.7em 0 0;

        &:focus, &:active {
            outline: 0;
            border-color: $plain-ui__primary-light;
        }
    }

    input.field-text, textarea.field-text {
        padding: 0.8em 1.1em;
    }

    select.field-choice {
        padding: 0.8em;
    }

    /**
     * radio & checkbox
     *
     * <div class="field">
     *     <input id="field__checkbox__1" class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
     *     <label for="field__checkbox__1" class="field__label">
     *         <svg class="icon field__choice__unchecked" aria-hidden="true">
     *             <use xlink:href="symbol-defs.svg#icon-minus"></use>
     *         </svg>
     *         <svg class="icon field__choice__checked" aria-hidden="true">
     *             <use xlink:href="symbol-defs.svg#icon-checked"></use>
     *         </svg>
     *         checkbox 1
     *    </label>
     * </div>
     *
     */

    input[type=checkbox].field-choice {
        position: relative;
        display: none;

        ~ .field-choice__checked {
            display: none;
        }

        &:checked ~ .field-choice__checked {
            display: inline-block;
        }

        &:checked ~ .field-choice__unchecked {
            display: none;
        }
    }

    //
    .field-help, .field-error {
        display: inline-block;
        width: 100%;

        padding: 0.6em 0.5em;
        font-size: 0.8rem;
    }

    // display error for fields
    .field-error {
        color: $plain-ui__danger-light;
    }
}