text: /// BareSpecifier=@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-dropdown-styles
  import '../../../vaadin-lumo-styles/color.js';
  import '../../../vaadin-lumo-styles/spacing.js';
  import '../../../vaadin-lumo-styles/style.js';
  import '../../../vaadin-overlay/theme/lumo/vaadin-overlay.js';
  import '../../../vaadin-lumo-styles/mixins/menu-overlay.js';
  import { html } from '../../../../@polymer/polymer/lib/utils/html-tag.js';
  
  const $_documentContainer = html`<dom-module id="lumo-combo-box-overlay" theme-for="vaadin-combo-box-overlay">
    <template>
      <style include="lumo-overlay lumo-menu-overlay-core">
        [part="content"] {
          padding: 0;
        }
  
        :host {
          /* TODO: using a legacy mixin (unsupported) */
          --iron-list-items-container: {
            border-width: var(--lumo-space-xs);
            border-style: solid;
            border-color: transparent;
          };
        }
  
        /* TODO: workaround ShadyCSS issue when using inside of the dom-if */
        :host([opened]) {
          --iron-list-items-container_-_border-width: var(--lumo-space-xs);
          --iron-list-items-container_-_border-style: solid;
          --iron-list-items-container_-_border-color: transparent;
        }
  
        /* Loading state */
  
        /* When items are empty, the sinner needs some room */
        :host(:not([closing])) [part~="content"] {
          min-height: calc(2 * var(--lumo-space-s) + var(--lumo-icon-size-s));
        }
  
        [part~="overlay"] {
          position: relative;
        }
  
        :host([loading]) [part~="loader"] {
          box-sizing: border-box;
          width: var(--lumo-icon-size-s);
          height: var(--lumo-icon-size-s);
          position: absolute;
          z-index: 1;
          left: var(--lumo-space-s);
          right: var(--lumo-space-s);
          top: var(--lumo-space-s);
          margin-left: auto;
          margin-inline-start: auto;
          margin-inline-end: 0;
          border: 2px solid transparent;
          border-color:
            var(--lumo-primary-color-50pct)
            var(--lumo-primary-color-50pct)
            var(--lumo-primary-color)
            var(--lumo-primary-color);
          border-radius: calc(0.5 * var(--lumo-icon-size-s));
          opacity: 0;
          animation:
            1s linear infinite lumo-combo-box-loader-rotate,
            .3s .1s lumo-combo-box-loader-fade-in both;
          pointer-events: none;
        }
  
        @keyframes lumo-combo-box-loader-fade-in {
          0% {
            opacity: 0;
          }
  
          100% {
            opacity: 1;
          }
        }
  
        @keyframes lumo-combo-box-loader-rotate {
          0% {
            transform: rotate(0deg);
          }
  
          100% {
            transform: rotate(360deg);
          }
        }
  
        /* RTL specific styles */
  
        :host([loading][dir="rtl"]) [part~="loader"] {
          left: auto;
          margin-left: 0;
          margin-right: auto;
          margin-inline-start: 0;
          margin-inline-end: auto;
        }
      </style>
    </template>
  </dom-module>`;
  
  document.head.appendChild($_documentContainer.content);