@vaadin/vaadin-lumo-styles/src/components/user-tags-overlay.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-tags-overlay {
  [part='overlay'] {
    box-shadow: none;
    background: transparent;
    position: relative;
    left: -4px;
    padding: 4px;
    outline: none;
    overflow: visible;
    will-change: opacity, transform;
  }

  [part='content'] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
  }

  :host([dir='rtl']) [part='overlay'] {
    left: auto;
    right: -4px;
  }

  :host([opening]),
  :host([closing]) {
    animation: 0.14s user-tags-overlay-dummy-animation;
  }

  @keyframes user-tags-overlay-dummy-animation {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 1;
    }
  }

  :host([opening]) [part='overlay'] {
    animation: 0.1s lumo-user-tags-enter ease-out both;
  }

  @keyframes lumo-user-tags-enter {
    0% {
      opacity: 0;
    }
  }

  :host([closing]) [part='overlay'] {
    animation: 0.1s lumo-user-tags-exit both;
  }

  @keyframes lumo-user-tags-exit {
    100% {
      opacity: 0;
    }
  }
}