/**
 *
 *
 *
 *
 */

.field-group {
    margin: $margin;

    &--valid {
        input.field-text, textarea.field-text {
            border-color: var(--success);
        }

        .icon {
            fill: var(--success);
        }
    }

    &--error {
        input.field-text, textarea.field-text {
            border-color: var(--danger);
        }

        .icon {
            fill: var(--danger);
        }
    }
}

.field-label {
    font-size: 1rem;
    font-family: var(--font-family);

    .icon {
        vertical-align: text-bottom;
    }

    &:hover {
        cursor: pointer;
    }
}

input.field-text, textarea.field-text, select.field-choice {
    font-family: var(--font-family);
    font-size: 0.95rem;

    width: 100%;

    border: 1px solid var(--active);
    background-color: var(--background-contrast);
    border-radius: $border-radius;

    margin: 0.7rem 0 0;

    &:focus, &:active {
        outline: 0;
        border-color: var(--border);
    }
}

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


/**
 * field-choice
 *
 *
 */

select.field-choice {
    appearance: none;
    padding: 0.8em;
    position: relative;

    &::after {
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        content: " ";
        width: 10px;
        height: 10px;
        background: red;
    }
}

/**
 * radio & checkbox
 *
 * <div class="field">
 *     <label for="field__checkbox__1" class="field__label">
 *         <input class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
 *         <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,
input[type=radio].field-choice {
    position: relative;
    display: none;

    ~ .field-choice__checked {
        display: none;
    }

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

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

svg.field-choice__unchecked {
    fill: var(--active);
}

svg.field-choice__checked {
    fill: var(--success);
}

.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: var(--danger);
}