@import "colors";
.mat-chip{
    &.qms-chip{
        font-size: 0.875rem;
        font-weight: 400;
        font-family: Open Sans, Arial, Sans-Serif;
        
        &.mat-standard-chip{
            background-color: black(0.04);
            border-radius: 4px;
            padding: 4px 6px 4px 6px;
            &.mat-chip-disabled{
                background-color: black(0.3);
            }
        }

        &.mat-standard-chip:hover{
            &::after{
                opacity: .08;
            }
            &.mat-chip-disabled::after{
                background-color: black(0.3);
            }
        }

        &.mat-standard-chip:focus{
            &::after{
                opacity: .02;
            }
        }

        &.mat-standard-chip:focus-visible{
            &::after{
                opacity: .08;
            }
            .mat-chip-ripple{
                border: 2px solid $active;
            }
        }
        
        .mat-icon.leading-icon{
            padding: 4px;
        }

        .qms-chip-body{
            padding: 1px 6px 1px 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .mat-icon{
            font-size: 22px;
            width: 22px;
            height: 22px;
        }

        .mat-icon.leading-icon{
            font-size: 1.5rem;
            width: 1.5rem;
            height: 1.5rem;
        }
        
        &.qms-chip-selected, &.mat-chip-selected.qms-chip-selected{
            &.mat-standard-chip{
                background-color: #E5EEFB;
                color: $active;
                .mat-icon.leading-icon{
                    color: $active;
                }
            }
            

            &.mat-standard-chip:hover, &.mat-standard-chip:focus{
                &::after{
                    background-color: black(0.12);
                }
            }
    
            &.mat-standard-chip:focus{
                .mat-chip-ripple{
                    border: 1px solid black(0.12);
                }
            }
        }
    }
}

.mat-tooltip{
    &.qms-chip-tooltip{
        background: #323232;
        margin: 8px 14px 14px 14px;
        padding: 4px 10px;
        font-size: 0.75em;
    }
}