@vaadin/vaadin-lumo-styles/src/components/user-tag.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2000 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@media lumo_components_user-tag {
  :host {
    display: block;
    box-sizing: border-box;
    margin: 0 0 var(--vaadin-user-tag-offset);
    opacity: 0;
    height: 1.3rem;
    transition: opacity 0.2s ease-in-out;
    background-color: var(--vaadin-user-tag-color);
    color: #fff;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    --vaadin-user-tag-offset: 4px;
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size-xxs);
    border-radius: var(--lumo-border-radius-s);
    box-shadow: var(--lumo-box-shadow-xs);
    --vaadin-user-tag-offset: var(--lumo-space-xs);
  }

  :host(.show) {
    opacity: 1;
  }

  :host(:last-of-type) {
    margin-bottom: 0;
  }

  [part='name'] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
    height: 1.3rem;
    font-size: 13px;
    color: var(--lumo-primary-contrast-color);
    padding: 0.3em calc(0.3em + var(--lumo-border-radius-s) / 4);
    line-height: 1;
    font-weight: 500;
    min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em);
  }
}