:host {
    display: flex;
    position: absolute;
    top: 6px;
    right: 19px;
}

.popover {
    width: 260px;
    padding: 10px;
    border-radius: 3px;
    background-color: var(--iqser-grey-1);
    color: var(--iqser-white);

    mat-icon {
        color: var(--iqser-white);
        flex-shrink: 0;
    }

    span {
        padding-left: 8px;
        font-size: 11px;
        line-height: 14px;
    }
}

.chip {
    height: 24px;

    &:hover {
        background-color: var(--iqser-tab-hover);
        border-radius: 12px;

        mat-icon {
            opacity: 1;
        }
    }

    mat-icon {
        opacity: 50%;
        margin-left: 3px;
        margin-right: 3px;

        &:first-of-type {
            margin-left: 8px;
        }

        &:last-of-type {
            margin-right: 8px;
        }
    }

    &:not(:last-child) {
        margin-right: 2px;
    }
}

mat-icon {
    width: 10px;
}
