.root {
    box-sizing: border-box;
    user-select: auto;
    background: alpha(var(--theme-colors-background), 0.5);
    border: 1px solid var(--theme-colors-border);
    transition: background-color 0.2s ease-in-out;

    &[data-variant='outline'] {
        background: transparent;
        border: 1px solid var(--theme-colors-border);
    }
}

.root.link:hover {
    background: alpha(var(--theme-colors-surface), 0.5);
}

.label {
    font-family: var(--theme-content-font-family);
}

.label.sm {
    font-size: var(--theme-font-size-sm);
}

.label.md {
    font-size: var(--theme-font-size-md);
}

.label.lg {
    font-size: var(--theme-font-size-lg);
}

.label.xl {
    font-size: var(--theme-font-size-xl);
}

.label.xs {
    font-size: var(--theme-font-size-xs);
}

.remove {
    transition: color 0.1s ease-in-out;

    &:hover {
        color: var(--theme-colors-foreground-muted);
    }
}

.group.sm {
    --pg-gap: var(--theme-spacing-sm) !important;
}

.group.md {
    --pg-gap: var(--theme-spacing-md) !important;
}

.group.lg {
    --pg-gap: var(--theme-spacing-lg) !important;
}

.group.xl {
    --pg-gap: var(--theme-spacing-xl) !important;
}

.group.xs {
    --pg-gap: var(--theme-spacing-xs) !important;
}