@import 'inc/bootstrap';

.form-widget {
    margin: 10px 0;

    .widget-label {
        display: inline-block;
        margin-top: 8px;
        width: 34%;
        vertical-align: top;
    }

    .widget-field {
        display: inline-block;
        min-width: 150px;
        width: 65%;

        .widget-input, .widget-input-inline {
            @include simple-border();
            background-color: white;
            color: $textColor;
            font-family: $regularFont;
            padding: 8px;
            width: 100%;
        }
        .widget-input-inline {
            font: inherit;
            height: 36px;
        }

        .check-box-input, .radio-box-input {
            color: $textColor;
            display: inline-block;
            font-family: $regularFont;
            padding: 4px;
            width: 100%;

            .option {
                padding-top: 4px;
            }
        }
    }

    &.error,
    &.invalid {
        .widget-field {
            .widget-input,
            .widget-input-inline,
            .check-box-input {
                border-color: $error;
                color: $error;
            }
        }
    }
}