@vaadin/vaadin-lumo-styles/src/components/select-value-button.css

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

/**
 * @license
 * Copyright (c) 2017 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@media lumo_components_select-value-button {
  :host {
    display: inline-block;
    position: relative;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    min-width: 0;
    width: 0;
    font-family: var(--lumo-font-family);
    font-size: var(--vaadin-input-field-value-font-size, var(--lumo-font-size-m));
    padding: 0 0.25em;
    --_lumo-selected-item-height: var(--lumo-size-m);
    --_lumo-selected-item-padding: 0.5em;
  }

  ::slotted(*) {
    padding: var(--_lumo-selected-item-padding) 0 var(--_lumo-selected-item-padding) 0;
    flex: auto;
    min-height: var(--_lumo-selected-item-height);
    font-size: inherit;
  }

  ::slotted(*:hover) {
    background-color: transparent;
  }

  /* placeholder styles */
  ::slotted(*:not([selected])) {
    line-height: 1;
  }

  .vaadin-button-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: inherit;
    width: 100%;
    height: 100%;
    min-height: inherit;
    text-shadow: inherit;
  }

  [part='label'] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: inherit;
  }
}