.chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 100%;

    & .chips__item {
        display: inline-flex;
        justify-content: start;
        align-items: center;
        flex-shrink: 0;
        width: fit-content;
        padding: 4px 12px;
        border-radius: 10px;
        color: #fff;
        border: 1px solid #ffffff80;
        font-size: 10px;
        line-height: 1.2;
        font-weight: 700;

        background-color: var(--bonusify-chip-color-blue); /* default color */

        &.blue {
            background-color: var(--bonusify-chip-color-blue);
        }

        &.red {
            background-color: var(--bonusify-chip-color-red);
        }

        &.green {
            background-color: var(--bonusify-chip-color-green);
        }

        &.purple {
            background-color: var(--bonusify-chip-color-purple);
        }

        &.yellow {
            background-color: var(--bonusify-chip-color-yellow);
        }
    }
}