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

.mat-mdc-chip{
    &.qms-chip{
        font-size: 0.875rem;
        font-weight: 400;
        font-family: Open Sans, Arial, Sans-Serif;

        &.mat-mdc-standard-chip{
            background-color: black(0.04);
            border-radius: 4px;
            padding: 4px 6px 4px 6px;
            /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
            &.mat-chip-disabled{
                background-color: black(0.3);
            }
        }

        &.mat-mdc-standard-chip:hover{
            &::after{
                opacity: .08;
            }
            /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
            &.mat-chip-disabled::after{
                background-color: black(0.3);
            }
        }

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

        &.mat-mdc-standard-chip:focus-visible{
            &::after{
                opacity: .08;
            }
            /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
            .mat-chip-ripple{
                border: 2px solid theme-apply($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: 18px;
            width: 18px;
            height: 18px;
        }

        .mat-icon.leading-icon{
            font-size: 1.5rem;
            width: 1.5rem;
            height: 1.5rem;
        }
        /* 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. */
        &.qms-chip-selected, &.mat-chip-selected.qms-chip-selected{
            &.mat-mdc-standard-chip{
                background-color: #E5EEFB;
                color: theme-apply($active);
                .mat-icon.leading-icon{
                    color: theme-apply($active);
                }
                border: 1px solid theme-apply($active);
            }


            &.mat-mdc-standard-chip:hover, &.mat-standard-chip:focus{
                &::after{
                    background-color: black(0.12);
                }
            }

            &.mat-mdc-standard-chip:focus{
                /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
                .mat-chip-ripple{
                    border: 1px solid black(0.12);
                }
            }
        }
    }
}

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