.chip {
    @include display-flex;
    background: $grey300;
    height: rem(32);
    line-height: rem(32);
    display: inline-block;
    border-radius: rem(16);
    font-size: rem(13);
    color: $darkBlack;
    user-select: none;
    cursor: default;

    .chip-label {
        @include flex(1, 1, auto);
        align-self: stretch;
        display: inline-block;
        padding-left: rem(12);
    }
    .chip-icon {
        width: rem(32);
        height: rem(32);
        line-height: rem(32);
        text-align: center;
        border-radius: rem(16);
    }

    .chip-icon + .chip-label{
        padding-left: rem(8);
    }

    .chip-close {
        @include flex(1, 1, auto);
        align-self: flex-end;
        margin: rem(4);
        color: $lightBlack;
        border-radius: rem(12);
        font-size: rem(13);
        height: rem(24);
        width: rem(24);
        line-height: rem(24);
        text-align: center;
        cursor: pointer;
    }
}