Improve responsive behavior and styling support

[juuso-vaadin]

Currently the component can be set to hide elements when viewport hits a fixed breakpoint of 420px.
Currently the component doesn't handle overflowing caused by large number of items or long labels very gracefully.

More common approach could be to set certain items to have overflow ellipsis.
From UX point-of-view it often makes sense to keep the root item and the closest parent item visible while allowing collapsing the rest.

Suggested style adjustments

Many of the current styles could be moved from shadowDOM to help overriding them.

Introduce variables to help configuring the separator.

vcf-breadcrumbs {
    --vcf-breadcrumbs-separator-symbol: "/";
    --vcf-breadcrumbs-separator-color: var(--lumo-disabled-text-color);
}

vcf-breadcrumb::part(separator) {
    margin: 0;  /* remove from component */
    padding: 0 var(--lumo-space-s);
}

vcf-breadcrumb::part(separator)::after {
    content: var(--vcf-breadcrumbs-separator-symbol, ">");
    color: var(--vcf-breadcrumbs-separator-color);
}

Repurpose the shift attribute to mark elements that can be clipped.

vcf-breadcrumb::part(link) {
    white-space: nowrap;
}

vcf-breadcrumb[shift]::part(link) {
    overflow: hidden;
    text-overflow: ellipsis;
}

vcf-breadcrumb {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
}

vcf-breadcrumb[shift] {
    overflow: hidden;
}

Remove <iron-media-query> and make an example of same configuration with normal CSS media query

@media screen and (max-width: 420px) {
    vcf-breadcrumb[shift] {
        display: none;
    }
}

Lumo style for anchors

a:where(:any-link) {
    color: var(--lumo-primary-text-color);
}