@import "../theme/variable";
@import "../theme/mixins";
@import "form";

.mat-mdc-form-field{
    &.qms-chip-input, &.qms-chip-input-select{
        font-family: Open Sans;
        &.mat-form-field-disabled {
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            .mat-form-field-flex {
              background-color: theme-apply($disabled);

              &:hover {
                background-color: theme-apply($disabled);
              }
            }

            mat-icon,
            .mat-mdc-input-element {
              color: black(0.38);
            }

            button {
              pointer-events: none;
            }
        }

        &.mat-focused {
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            .mat-form-field-label {
              color: theme-apply($primary);
            }
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            .mat-form-field-flex {
                background-color: black(0.04);
                border-bottom: 2px solid theme-apply($primary);
                padding: $padding-field-flex;
                /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
                .mat-form-field-flex{
                    &:hover {
                        background-color: black(0.04);
                    }
                }
            }
        }

        &.mat-form-field-invalid {
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        .mat-form-field-label {
            color: theme-apply($error);
        }

        mat-icon,
        .material-icons {
            color: black(0.54);
        }
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        .mat-form-field-ripple {
            height: 2px;
            background-color: theme-apply($error);
            transform: scaleX(1);
        }
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        .mat-form-field-flex {
            border-bottom: 2px solid theme-apply($error);
        }
        }
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        .mat-form-field-wrapper {
            border-radius: 0.25em;
        }
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        .mat-form-field-flex{
            font-weight: 600;
            padding: $padding-field-flex;

            &:hover {
                background-color: black(0.08);
            }
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            .mat-form-field-infix {
                display: inline-flex;
                align-items: center;
                bottom: 0.5em;
                font-size: 1rem;
                /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                .mat-chip-list{
                    padding: 0px;
                    width: 100%;
                    /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                    /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                    .mat-chip-list-wrapper{
                        .mat-mdc-chip.qms-chip.mat-mdc-standard-chip{
                            background: white;
                            font-weight: 400;
                            color: #323232
                        }

                        input.mat-mdc-chip-input{
                            width: 100%;
                            flex: 1 0 calc(100% - 8px);
                        }

                        .qms-chip{
                            max-width: calc(49% - 2px);
                        }
                    }
                }
            }
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            .mat-form-field-suffix::before{
                content: "";
                background: black(0.12);
                position: absolute;
                left: 0;
                bottom: 0.25rem;
                height: 34px;
                width: 1px;
            }
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            .mat-form-field-suffix{
                display: inline-flex;
                justify-content: center;
                align-items: center;
                font-size: inherit;
                position: relative;
                min-width: 2.5em;
                height: 2.5em;
                padding: 0.25rem 0 0.25rem 1rem;
                .qms-suffix{
                    button{
                        width: 1.5rem;
                        height: 1.5rem;
                    }
                }
            }
        }
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        .mat-form-field-underline {
            margin-left: 0.125em;
            margin-right: 0.125em;
            width: calc(100% - 0.25em);

            &::before{
                background-color: black(0.38);
            }
        }
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        .mat-form-field-ripple {
            height: 1px;
            background-color: black(0.38);
        }

        &.mat-form-field-invalid {
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            .mat-form-field-underline:before {
                background-color: theme-apply($error);
            }
        }

        .mat-mdc-form-field-hint {
            font-size: 0.75rem;
            line-height: 16px;
            font-style: normal;
        }
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        .mat-form-field-subscript-wrapper {
            margin-top: 2px;
        }
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        .mat-form-field-prefix {
            margin-right: 0.75rem;
            color: black(0.6);

            mat-icon > svg {
              margin-bottom: 0.5em;
            }
        }

        .mat-mdc-form-field-error{
            font-size: 12px;
            color: #B00020;
        }

    }

    &.qms-chip-input-select{
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        .mat-form-field-flex{
            font-weight: 600;
            padding: $padding-field-flex;
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            .mat-form-field-infix {
                padding: 0.125em 0.5em 0 0;
                /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                .mat-chip-list{
                    /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                    /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                    .mat-chip-list-wrapper{
                        .qms-input-chip-list{
                            max-height: 73px;
                            overflow:auto;
                            width: 100%;
                        }
                        .mat-mdc-chip.qms-chip.mat-mdc-standard-chip{
                            margin: 2px 4px 2px 4px;
                        }
                        input{
                            padding: 6px 0px 6px 0px;
                        }
                    }
                }
            }
        }
    }

    &.qms-chip-input{
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        .mat-form-field-label-wrapper {
            top: 0;
        }
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        .mat-form-field-flex
        {
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            .mat-form-field-infix {
                padding: 1em 0.5em 0 0;
                /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                .mat-chip-list{
                    /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                    /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                    .mat-chip-list-wrapper{
                        .qms-input-chip-list{
                            max-height: 80px;
                            overflow:auto;
                            width: 100%;
                        }
                        .mat-mdc-chip.qms-chip.mat-mdc-standard-chip{
                            margin: 4px;
                        }
                        input{
                            padding: 0px;
                        }
                    }
                }
            }
        }
    }
}

.qms-chip-input-dropdown{
    .qms-dropdown-menu-item{
        /* TODO(mdc-migration): The following rule targets internal classes of option that may no longer apply for the MDC version. */
        .mat-option-text{
            div{
                display: flex;
                align-items: center;
            }
        }

        .mat-ripple-element{
            background-color: black(0.12);
        }
    }
    .qms-dropdown-menu-item-selected{
        color: theme-apply($active);

        .mat-icon{
            color: theme-apply($active);
        }
    }
}

@for $i from 1 through 5 {
    $maxChipListHeight: 40px * $i;
    $maxChipListSelectHeight: 37px * $i - 1px;
    .mat-mdc-form-field{
        &.qms-chip-input{
            /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
            .mat-form-field-flex .mat-form-field-infix .mat-chip-list .mat-chip-list-wrapper .qms-chip-input-max-#{$i}{
                max-height: $maxChipListHeight;
                overflow:auto;
            }
        }
        &.qms-chip-input-select
        {
            /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
            .mat-form-field-flex .mat-form-field-infix .mat-chip-list .mat-chip-list-wrapper .qms-chip-input-max-#{$i}{
                max-height: $maxChipListSelectHeight;
                overflow:auto;
            }
        }
    }
}
