.wco-chip {
    --wco-chip-size: 21px;
    --wco-chip-spacing: var(--wco-spacing-none) var(--wco-spacing-nano);
    --wco-chip-gap: var(--wco-spacing-nano, 8px);
    --wco-chip-border-radius: var(--wco-radius-md, 8px);
    --wco-chip-background-color: transparent;
    --wco-chip-color: var(--wco-color-primary-600);
    --wco-chip-font-size: var(--wco-font-size-xxs);
    --wco-chip-line-height: var(--wco-font-lineheight-500);
    --wco-chip-icon-size: var(--wco-icon-size-small);
    --wco-chip-icon-color: var(--wco-color-gray-800);
    font-size: var(--wco-chip-font-size, 14px);
    color: var(--wco-chip-color, #333);
    border: inherit;
    background-color: var(--wco-chip-background-color, #fff);
    border-radius: var(--wco-chip-border-radius, 4px);
    gap: var(--wco-chip-gap, 4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--wco-chip-spacing, 0 4px);
    min-height: var(--wco-chip-size, 24px);
    width: fit-content;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    font-family: var(--wco-font-family);
    line-height: 150%;
    letter-spacing: 0.35px;
    transition: transform 200ms linear, background-color 300ms ease-in-out;
    >span,i {
            font-size: var(--wco-chip-icon-size, 14px);
    } 
    // States
    &:not(:disabled),
    &:not(.chip-error),
    &:not(.chip-disabled),
    &:not(.chip-active) {
        &:hover { 
            cursor: pointer;
            --wco-chip-background-color: var(--wco-color-primary-50);
            --wco-chip-color: var(--wco-color-primary-700);
            transform: scale(1);
        }
        &:focus {  
            transform: scale(0.99) translateY(0.5px);
            box-shadow: var(--wco-shadow-level-0);
            --wco-chip-background-color: var(--wco-color-primary-100);
            --wco-chip-color: var(--wco-color-primary-900);
        }
    }
    
    &.chip-disabled,
    &:disabled {
        --wco-chip-background-color: transparent;
        --wco-chip-color: var(--wco-color-neutral-700);
        pointer-events: none;
        opacity: 0.4;
    }

    &.chip-selected,
    &.chip-active{
        --wco-chip-background-color: var(--wco-color-primary-100);
        --wco-chip-color: var(--wco-color-primary-900);
        &:hover { 
            --wco-chip-background-color: var(--wco-color-primary-100);
            --wco-chip-color: var(--wco-color-primary-900);
        }
        &:focus { 
            --wco-chip-background-color: var(--wco-color-primary-100);
            --wco-chip-color: var(--wco-color-primary-900);
        }
    }

    // Variants
    &.chip-outline {
        border: 1px solid var(--wco-chip-color, #333);
    }

    &.chip-md { 
        --wco-chip-spacing: var(--wco-spacing-quark) var(--wco-spacing-xxxs);
        --wco-chip-size: 29px;
    }

    &.chip-lg { 
        --wco-chip-spacing: var(--wco-spacing-nano) var(--wco-spacing-xxs);
        --wco-chip-size: 37px;
    }

    &.chip-error { 
        --wco-chip-background-color: transparent;
        --wco-chip-color: var(--wco-color-danger-700);
        &:hover { 
            --wco-chip-background-color: transparent
            --wco-chip-color: var(--wco-color-danger-600);
        }
        &:focus { 
            --wco-chip-background-color: transparent;
            --wco-chip-color: var(--wco-color-danger-600);
        }
    }
}

.wco-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wco-spacing-nano, 12px);
}