@layer components {
    .nur-chips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--nur-space-2);
    }

    .nur-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--nur-space-1);
        min-height: 40px;
        padding: 0 var(--nur-space-4);
        border: 1px solid var(--nur-line);
        border-radius: 999px;
        background: var(--nur-surface);
        font-size: var(--nur-text-sm);
        font-weight: 600;
        cursor: pointer;
    }

    .nur-chip--static {
        min-height: 30px;
        padding-inline: var(--nur-space-3);
        background: var(--nur-sand-100);
        border-color: transparent;
        font-size: var(--nur-text-xs);
        cursor: default;
    }

    .nur-chip.is-active,
    input:checked + .nur-chip {
        background: var(--nur-primary);
        border-color: var(--nur-primary);
        color: #fff;
    }

    .nur-chips input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .nur-chips label {
        position: relative;
    }

    .nur-scrollchips {
        display: flex;
        gap: var(--nur-space-2);
        overflow-x: auto;
        margin-inline: calc(var(--nur-gutter) * -1);
        padding-inline: var(--nur-gutter);
        scrollbar-width: none;
    }

    .nur-scrollchips::-webkit-scrollbar {
        display: none;
    }

    .nur-scrollchips > * {
        flex: none;
    }
}