@import "colors";
@import "form";
.mat-form-field{
    &.qms-chip-input, &.qms-chip-input-select{
        font-family: Open Sans;
        &.mat-form-field-disabled {
            .mat-form-field-flex {
              background-color: $disabled;
      
              &:hover {
                background-color: $disabled;
              }
            }
      
            mat-icon,
            .mat-input-element {
              color: black(0.38);
            }
      
            button {
              pointer-events: none;
            }
        }

        &.mat-focused {
            .mat-form-field-label {
              color: $primary;
            }
            .mat-form-field-flex {
                background-color: black(0.04);
                border-bottom: 2px solid $primary;
                padding: $padding-field-flex;
                .mat-form-field-flex{
                    &:hover {
                        background-color: black(0.04);
                    }
                }
            }
        }
    
        &.mat-form-field-invalid {
        .mat-form-field-label {
            color: $error;
        }
    
        mat-icon,
        .material-icons {
            color: black(0.54);
        }
    
        .mat-form-field-ripple {
            height: 2px;
            background-color: $error;
            transform: scaleX(1);
        }
    
        .mat-form-field-flex {
            border-bottom: 2px solid $error;
        }
        }
       
        .mat-form-field-wrapper {
            border-radius: 0.25em;
        }
        
        .mat-form-field-flex{
            font-weight: 600;
            padding: $padding-field-flex;

            &:hover {
                background-color: black(0.08);
            }
            .mat-form-field-infix {
                display: inline-flex;
                align-items: center;
                bottom: 0.5em;
                font-size: 1rem;

                .mat-chip-list{
                    padding: 0px;
                    width: 100%;
                    .mat-chip-list-wrapper{
                        .mat-chip.qms-chip.mat-standard-chip{
                            background: white;
                            font-weight: 400;
                            color: #323232
                        }

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

                        .qms-chip{
                            max-width: calc(49% - 2px);
                        }
                    }
                }
            }

            .mat-form-field-suffix::before{
                content: "";
                background: black(0.12);
                position: absolute;
                left: 0;
                bottom: 0.25rem;
                height: 34px;
                width: 1px;
            }

            .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;
                    }    
                }
            }
        }

        .mat-form-field-underline {
            margin-left: 0.125em;
            margin-right: 0.125em;
            width: calc(100% - 0.25em);

            &::before{
                background-color: black(0.38);
            }
        }

        .mat-form-field-ripple {
            height: 1px;
            background-color: black(0.38);
        }

        &.mat-form-field-invalid {
            .mat-form-field-underline:before {
                background-color: $error;
            }
        }
    
        .mat-hint {
            font-size: 0.75rem;
            line-height: 16px;
            font-style: normal;
        }
    
        .mat-form-field-subscript-wrapper {
            margin-top: 2px;
        }
      

        .mat-form-field-prefix {
            margin-right: 0.75rem;
            color: black(0.6);
      
            mat-icon > svg {
              margin-bottom: 0.5em;
            }
        }

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

    }

    &.qms-chip-input-select{
        .mat-form-field-flex{
            font-weight: 600;
            padding: $padding-field-flex;
            .mat-form-field-infix {
                padding: 0.125em 0.5em 0 0;
                .mat-chip-list{
                    .mat-chip-list-wrapper{
                        .qms-input-chip-list{
                            max-height: 73px;
                            overflow:auto;
                            width: 100%;
                        }
                        .mat-chip.qms-chip.mat-standard-chip{
                            margin: 2px 4px 2px 4px;
                        }
                        input{ 
                            padding: 6px 0px 6px 0px;
                        }
                    }
                }
            }
        }
    }

    &.qms-chip-input{
        .mat-form-field-label-wrapper {
            top: 0;
        }

        .mat-form-field-flex
        {
            .mat-form-field-infix {
                padding: 1em 0.5em 0 0;
                .mat-chip-list{
                    .mat-chip-list-wrapper{
                        .qms-input-chip-list{
                            max-height: 80px;
                            overflow:auto;
                            width: 100%;
                        }
                        .mat-chip.qms-chip.mat-standard-chip{
                            margin: 4px;
                        }
                        input{ 
                            padding: 0px;
                        }
                    }
                }
            }
        }
    }
}

.qms-chip-input-dropdown{
    .qms-dropdown-menu-item{
        .mat-option-text{
            div{
                display: flex;
                align-items: center;
            }
        }

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

        .mat-icon{
            color: $active;
        }
    }
}

@for $i from 1 through 5 {
    $maxChipListHeight: 40px * $i;
    $maxChipListSelectHeight: 37px * $i - 1px;
    .mat-form-field{
        &.qms-chip-input{
            .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
        {
            .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;
            }
        }
    }
}
