<commit_before>//
// .form
//
$form-margin: $default-margin;

//
// .form__group
//
$form-group-margin: 0 0 25px;

//
// .form__info
//
$form-info-opacity: 0.6;
$form-info-margin: 5px 0 0;
$form-info-font-size: 80%;

//
// .form__label
//
$form-label-color: $default-font-color;
$form-label-font-size: $default-font-size;
$form-label-font-weight: $default-font-weight;
$form-label-margin: 0 0 10px;

$form-label-forizontal-text-align: left;
$form-label-forizontal-margin: 16px 0 0;
$form-label-forizontal-margin-mobile: 0;
$form-label-forizontal-width: 180px;
$form-label-forizontal-width-mobile: 100%;

//
// .form__field
//
$form-field-horizontal-margin: 0 0 0 200px;
$form-field-horizontal-margin-mobile: 0;

//
// .form__static-control
//
$form-static-control-border: 1px solid transparent;
$form-static-control-color: #000;
$form-static-control-font-size: $default-font-size;
$form-static-control-font-weight: $default-font-weight;
$form-static-control-padding: 15px 0;

//
// .form__checkbox, .form__radio
//
$form-chr-margin: 10px 0;

//
// .form__actions
//
$form-actions-margin: 25px 0 0;
$form-actions-horizontal-margin: 0 0 0 200px;
$form-actions-horizontal-margin-mobile: 0;

//
// placeholder
//
$form-placeholder-color: $default-font-color;

//
// input, select, textarea
//
$form-fields-font-family: $default-font-family;
$form-fields-font-size: $default-font-size;
$form-fields-font-weight: 400;

$form-fields-border: 1px solid #e2e2e2;
$form-fields-color: $default-font-color;
$form-fields-padding: 15px 20px;
$form-fields-width: 100%;

$form-fields-error-border: #d30c0c;
$form-fields-focus-border: #C8C8C8;
$form-fields-focus-shadow: 0 0 5px 1px rgba(0,0,0,0.05);
$form-fields-disabled-border: #d9d9d9;
$form-fields-disabled-background: #f2f2f2;
$form-fields-disabled-color: #999;

//
// .checkbox, radio
//
$chr-jcf-margin: 2px 0 0;

$chr-input-margin: 2px 0 0;

$chr-text-margin: 0 0 0 10px;

$chr-label-color: $default-font-color;
$chr-label-font-size: $default-font-size;
$chr-label-font-weight: $default-font-weight;
$chr-label-text-align: left;
$chr-label-padding: 0;

$chr-info-margin: 2px 0 0;
$chr-info-opacity: 0.6;
$chr-info-font-size: 80%;


//---[end vars]-----------------------------------------//

::-webkit-input-placeholder {
    color: $form-placeholder-color;
}

:-moz-placeholder {
    color: $form-placeholder-color;
    opacity: 1;
}

::-moz-placeholder {
    color: $form-placeholder-color;
    opacity: 1;
}

:-ms-input-placeholder {
    color: $form-placeholder-color;
}

input,
select,
textarea {
    border: $form-fields-border;
    color: $form-fields-color;
    font-family: $form-fields-font-family;
    font-size: $form-fields-font-size;
    font-weight: $form-fields-font-weight;
    width: 100%;
    margin: 0;
    padding: $form-fields-padding;
    line-height: inherit;
    outline: none;
    @include transition;

    &.error {
	    border-color: $form-fields-error-border;
	}

    &:focus {
	    border-color: $form-fields-focus-border;
	    box-shadow: $form-fields-focus-shadow;
	}

	&[disabled] {
	    border-color: $form-fields-disabled-border;
	    background-color: $form-fields-disabled-background;
	    color: $form-fields-disabled-color;
	}
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
}

textarea {
    margin: 0;
    resize: none;
    vertical-align: top;
}

.form {
    margin: $form-margin;

    &__group {
        margin: $form-group-margin;
        position: relative;
    }

    &__info {
        opacity: $form-info-opacity;
        display: block;
        margin: $form-info-margin;
        font-size: $form-info-font-size;
    }

    &__label {
        color: $form-label-color;
        display: block;
        font-size: $form-label-font-size;
        font-weight: $form-label-font-weight;
        margin: $form-label-margin;
    }

    &__static-control {
        border: $form-static-control-border;
        color: $form-static-control-color;
        font-size: $form-static-control-font-size;
        font-weight: $form-static-control-font-weight;
        padding: $form-static-control-padding;
        width: 100%;
    }

    &__checkbox,
    &__radio {
        margin: $form-chr-margin;
    }

    &__actions {
        margin: $form-actions-margin;

        @include max-screen($xs-max) {
            .btn {
                width: 100%;
                clear: both;
                display: block;
            }
        }
    }

    &--horizontal {
        .form__label {
            text-align: $form-label-forizontal-text-align;
            margin: $form-label-forizontal-margin;
            float: left;
            width: $form-label-forizontal-width;

            @include max-screen($xs-max) {
                margin: $form-label-forizontal-margin-mobile;
                width: $form-label-forizontal-width-mobile;
            }
        }

        .form__field {
            margin: $form-field-horizontal-margin;

            @include max-screen($xs-max) {
                margin: $form-field-horizontal-margin-mobile;
            }
        }

        .form__actions {
            margin: $form-actions-horizontal-margin;

            @include max-screen($xs-max) {
                margin: $form-actions-horizontal-margin-mobile;
            }
        }
    }
}

.checkbox,
.radio {
    @extend .flex, .flex--nowrap;

    .jcf-checkbox,
    .jcf-radio {
        margin: $chr-jcf-margin;
    }

	&__input {
        margin: $chr-input-margin;
	}<commit_msg>Forms update<commit_after>//
// .form
//
$form-margin: $default-margin;

//
// .form__group
//
$form-group-margin: 0 0 25px;

//
// .form__info
//
$form-info-opacity: 0.6;
$form-info-margin: 5px 0 0;
$form-info-font-size: 80%;

//
// .form__label
//
$form-label-color: $default-font-color;
$form-label-font-size: $default-font-size;
$form-label-font-weight: $default-font-weight;
$form-label-margin: 0 0 10px;

$form-label-forizontal-text-align: left;
$form-label-forizontal-margin: 16px 0 0;
$form-label-forizontal-margin-mobile: 0;
$form-label-forizontal-width: 180px;
$form-label-forizontal-width-mobile: 100%;

//
// .form__field
//
$form-field-horizontal-margin: 0 0 0 200px;
$form-field-horizontal-margin-mobile: 0;

//
// .form__static-control
//
$form-static-control-border: 1px solid transparent;
$form-static-control-color: #000;
$form-static-control-font-size: $default-font-size;
$form-static-control-font-weight: $default-font-weight;
$form-static-control-padding: 15px 0;

//
// .form__checkbox, .form__radio
//
$form-chr-margin: 10px 0;

//
// .form__actions
//
$form-actions-margin: 25px 0 0;
$form-actions-horizontal-margin: 0 0 0 200px;
$form-actions-horizontal-margin-mobile: 0;

//
// placeholder
//
$form-placeholder-color: $default-font-color;

//
// input, select, textarea
//
$form-fields-font-family: $default-font-family;
$form-fields-font-size: $default-font-size;
$form-fields-font-weight: 400;

$form-fields-border: 1px solid #e2e2e2;
$form-fields-color: $default-font-color;
$form-fields-padding: 15px 20px;
$form-fields-width: 100%;

$form-fields-error-border: #d30c0c;
$form-fields-focus-border: #C8C8C8;
$form-fields-focus-shadow: 0 0 5px 1px rgba(0,0,0,0.05);
$form-fields-disabled-border: #d9d9d9;
$form-fields-disabled-background: #f2f2f2;
$form-fields-disabled-color: #999;

//
// .checkbox, radio
//
$chr-jcf-margin: 2px 0 0;

$chr-input-margin: 2px 0 0;

$chr-text-margin: 0 0 0 10px;

$chr-label-color: $default-font-color;
$chr-label-font-size: $default-font-size;
$chr-label-font-weight: $default-font-weight;
$chr-label-text-align: left;
$chr-label-padding: 0;

$chr-info-margin: 2px 0 0;
$chr-info-opacity: 0.6;
$chr-info-font-size: 80%;


//---[end vars]-----------------------------------------//

::-webkit-input-placeholder {
    color: $form-placeholder-color;
}

:-moz-placeholder {
    color: $form-placeholder-color;
    opacity: 1;
}

::-moz-placeholder {
    color: $form-placeholder-color;
    opacity: 1;
}

:-ms-input-placeholder {
    color: $form-placeholder-color;
}

input,
select,
textarea {
    border: $form-fields-border;
    color: $form-fields-color;
    font-family: $form-fields-font-family;
    font-size: $form-fields-font-size;
    font-weight: $form-fields-font-weight;
    width: 100%;
    margin: 0;
    padding: $form-fields-padding;
    line-height: inherit;
    outline: none;
    @include transition;

    &.error {
	    border-color: $form-fields-error-border;
	}

    &:focus {
	    border-color: $form-fields-focus-border;
	    box-shadow: $form-fields-focus-shadow;
	}

	&[disabled] {
	    border-color: $form-fields-disabled-border;
	    background-color: $form-fields-disabled-background;
	    color: $form-fields-disabled-color;
	}
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
}

textarea {
    margin: 0;
    resize: none;
    vertical-align: top;
}

.form {
    $this: &;
    margin: $form-margin;

    &__group {
        margin: $form-group-margin;
        position: relative;
    }

    &__info {
        opacity: $form-info-opacity;
        display: block;
        margin: $form-info-margin;
        font-size: $form-info-font-size;
    }

    &__label {
        color: $form-label-color;
        display: block;
        font-size: $form-label-font-size;
        font-weight: $form-label-font-weight;
        margin: $form-label-margin;
    }

    &__static-control {
        border: $form-static-control-border;
        color: $form-static-control-color;
        font-size: $form-static-control-font-size;
        font-weight: $form-static-control-font-weight;
        padding: $form-static-control-padding;
        width: 100%;
    }

    &__checkbox,
    &__radio {
        margin: $form-chr-margin;
    }

    &__actions {
        margin: $form-actions-margin;

        @include max-screen($xs-max) {
            .btn {
                width: 100%;
                clear: both;
                display: block;
            }
        }
    }

    &--horizontal {
        #{$this}__label {
            text-align: $form-label-forizontal-text-align;
            margin: $form-label-forizontal-margin;
            float: left;
            width: $form-label-forizontal-width;

            @include max-screen($xs-max) {
                margin: $form-label-forizontal-margin-mobile;
                width: $form-label-forizontal-width-mobile;
            }
        }

        #{$this}__field {
            margin: $form-field-horizontal-margin;

            @include max-screen($xs-max) {
                margin: $form-field-horizontal-margin-mobile;
            }
        }

        #{$this}__actions {
            margin: $form-actions-horizontal-margin;

            @include max-screen($xs-max) {
                margin: $form-actions-horizontal-margin-mobile;
            }
        }
    }
}

.checkbox,
.radio {
    @extend .flex, .flex--nowrap;

    .jcf-checkbox,
    .jcf-radio {
        margin: $chr-jcf-margin;
    }

	&__input {
        margin: $chr-input-margin;
	}
{'fraction_non_alphanumeric': 0.17117034873105716, 'fraction_numerical': 0.022822713164140952, 'mean_word_length': 2.347082187595478, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7305654', 'n_tokens_mistral': 4125, 'n_tokens_neox': 3840, 'n_words': 642}