@use '~flux/components/css/mixin';

.chip {
    display: flex;
    height: 36px;
    padding: 0 12px;
    align-items: center;
    flex-grow: 0;
    gap: 9px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    color: var(--foreground);
    transition: var(--transition-default);
    transition-property: background, border, color, mixin.focus-ring-transition-properties();

    &.isSelectable {
        cursor: pointer;

        @include mixin.focus-ring(2px);

        @include mixin.hover {
            background: var(--gray-100);
        }
    }

    &.isSelected {
        background: var(--primary-50);
        border-color: var(--primary-200);
        color: var(--primary-600);

        @include mixin.hover {
            background: var(--primary-100);
        }
    }

    :is(span) {
        @include mixin.text(small);

        font-weight: 500;
        white-space: nowrap;
    }
}