<commit_before>@import '../core/theming/theming';
@import '../core/styles/typography/typography-utils';
@import '../core/styles/variables';

@mixin mc-form-field-theme($theme) {
    $primary: map-get($theme, primary);
    $second: map-get($theme, second);
    $hover-darken: 5%;

    .mc-form-field {

        .mc-form-field__container {
            border: {
                color: mc-color($second, 300);
            }
        }

        &:not(.mc-form-field_without-borders) {

            &:hover .mc-form-field__container {
                border: {
                    color: darken(mc-color($second, 400), $hover-darken);
                }
            }

            &.mc-form-field_disabled .mc-form-field__container {
                border: {
                    color: mc-color($second, 100);
                }
                background: {
                    color: mc-color($second, 40);
                }
            }

            &.mc-focused .mc-form-field__container {
                border: {
                    color: mc-color($primary, 500);
                }
                box-shadow: 0 0 0 1px mc-color($primary, 500);
            }

            &.ng-invalid {
                .mc-form-field__container {

                    background: {
                        color: mc-color($mc-red, 40);
                    }
                    border: {
                        color: mc-color($mc-red, 400);
                    }
                }

                .mc-input {
                    color: mc-color($mc-red, 400);
                }
            }

            &.mc-focused.ng-invalid .mc-form-field__container {
                border: {
                    color: mc-color($mc-red, 400);
                }
                box-shadow: 0 0 0 1px mc-color($mc-red, 400);
            }
        }

        .mc-form-field__hint {
            color: mc-color($second, 400);
        }

        .mc-icon {
            color: mc-color($second, 400);
        }

        mc-cleaner .mc-cleaner__icon {
            color: mc-color($second, 200);

            &:hover {
                color: darken(mc-color($second, 200), $hover-darken);
            }
        }
    }
}

@mixin mc-form-field-typography($config) {
    .mc-form-field {
        @include mc-typography-level-to-styles($config, body);

        .mc-form-field__hint {
            @include mc-typography-level-to-styles($config, caption);
        }
    }
}<commit_msg>fix(form-field): increased area hover (#24)<commit_after>@import '../core/theming/theming';
@import '../core/styles/typography/typography-utils';
@import '../core/styles/variables';

@mixin mc-form-field-theme($theme) {
    $primary: map-get($theme, primary);
    $second: map-get($theme, second);
    $hover-darken: 5%;

    .mc-form-field {

        .mc-form-field__container {
            border: {
                color: mc-color($second, 300);
            }
        }

        &:not(.mc-form-field_without-borders) {

            &:hover .mc-form-field__container {
                border: {
                    color: darken(mc-color($second, 400), $hover-darken);
                }
            }

            &.mc-form-field_disabled .mc-form-field__container {
                border: {
                    color: mc-color($second, 100);
                }
                background: {
                    color: mc-color($second, 40);
                }
            }

            &.mc-focused .mc-form-field__container {
                border: {
                    color: mc-color($primary, 500);
                }
                box-shadow: 0 0 0 1px mc-color($primary, 500);
            }

            &.ng-invalid {
                .mc-form-field__container {

                    background: {
                        color: mc-color($mc-red, 40);
                    }
                    border: {
                        color: mc-color($mc-red, 400);
                    }
                }

                .mc-input {
                    color: mc-color($mc-red, 400);
                }
            }

            &.mc-focused.ng-invalid .mc-form-field__container {
                border: {
                    color: mc-color($mc-red, 400);
                }
                box-shadow: 0 0 0 1px mc-color($mc-red, 400);
            }
        }

        .mc-form-field__hint {
            color: mc-color($second, 400);
        }

        .mc-icon {
            color: mc-color($second, 400);
        }

        mc-cleaner  {
            .mc-cleaner__icon {
                color: mc-color($second, 200);
            }

            &:hover .mc-cleaner__icon {
                color: darken(mc-color($second, 200), $hover-darken);
            }
        }
    }
}

@mixin mc-form-field-typography($config) {
    .mc-form-field {
        @include mc-typography-level-to-styles($config, body);

        .mc-form-field__hint {
            @include mc-typography-level-to-styles($config, caption);
        }
    }
}
{'fraction_non_alphanumeric': 0.1358074222668004, 'fraction_numerical': 0.021263791374122366, 'mean_word_length': 1.0949579831932774, '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': '2354597', 'n_tokens_mistral': 1629, 'n_tokens_neox': 1421, 'n_words': 221}