text: import "../../../../@polymer/polymer/lib/elements/custom-style.js";
  import "../../../vaadin-lumo-styles/color.js";
  import "../../../vaadin-lumo-styles/sizing.js";
  import "../../../vaadin-lumo-styles/spacing.js";
  import "../../../vaadin-lumo-styles/style.js";
  const $_documentContainer = document.createElement('template');
  $_documentContainer.innerHTML = `<dom-module id="lumo-progress-bar" theme-for="vaadin-progress-bar">
    <template>
      <style>
        :host {
          height: calc(var(--lumo-size-l) / 10);
          margin: var(--lumo-space-s) 0;
        }
  
        [part="bar"] {
          border-radius: var(--lumo-border-radius);
          background-color: var(--lumo-contrast-10pct);
        }
  
        [part="value"] {
          border-radius: var(--lumo-border-radius);
          background-color: var(--lumo-primary-color);
          /* Use width instead of transform to preserve border radius */
          transform: none;
          width: calc(var(--vaadin-progress-value) * 100%);
          will-change: width;
          transition: 0.1s width linear;
        }
  
        /* Indeterminate mode */
  
        :host([indeterminate]) [part="value"] {
          --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to right, var(--lumo-primary-color-10pct) 10%, var(--lumo-primary-color));
          --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to left, var(--lumo-primary-color-10pct) 10%, var(--lumo-primary-color));
          width: 100%;
          background-color: transparent !important;
          background-image: var(--lumo-progress-indeterminate-progress-bar-background);
          opacity: 0.75;
          will-change: transform;
          animation: vaadin-progress-slide 1.6s infinite cubic-bezier(.645, .045, .355, 1), vaadin-progress-scale 1.6s infinite cubic-bezier(.645, .045, .355, 1);
        }
  
        @keyframes vaadin-progress-slide {
          0% {
            transform-origin: 0% 0%;
          }
  
          50% {
            transform-origin: 100% 0%;
            background-image: var(--lumo-progress-indeterminate-progress-bar-background);
          }
  
          50.1% {
            transform-origin: 100% 0%;
            background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
          }
  
          100% {
            transform-origin: 0% 0%;
            background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
          }
        }
  
        @keyframes vaadin-progress-scale {
          0% { transform: scaleX(0.015); }
          25% { transform: scaleX(0.4); }
          50% { transform: scaleX(0.015); }
          50.1% { transform: scaleX(0.015); }
          75% { transform: scaleX(0.4); }
          100% { transform: scaleX(0.015); }
        }
  
        :host(:not([aria-valuenow])) [part="value"]::before,
        :host([indeterminate]) [part="value"]::before {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          border-radius: inherit;
          background-color: var(--lumo-primary-color);
          will-change: opacity;
          animation: vaadin-progress-pulse3 1.6s infinite cubic-bezier(.645, .045, .355, 1);
        }
  
        @keyframes vaadin-progress-pulse3 {
          0% { opacity: 1; }
          10% { opacity: 0; }
          40% { opacity: 0; }
          50% { opacity: 1; }
          50.1% { opacity: 1; }
          60% { opacity: 0; }
          90% { opacity: 0; }
          100% { opacity: 1; }
        }
  
        /* Contrast color */
  
        :host([theme~="contrast"]) [part="value"],
        :host([theme~="contrast"]) [part="value"]::before {
          background-color: var(--lumo-contrast-80pct);
          --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to right, var(--lumo-contrast-5pct) 10%, var(--lumo-contrast-80pct));
          --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to left, var(--lumo-contrast-5pct) 10%, var(--lumo-contrast-60pct));
        }
  
        /* Error color */
  
        :host([theme~="error"]) [part="value"],
        :host([theme~="error"]) [part="value"]::before {
          background-color: var(--lumo-error-color);
          --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to right, var(--lumo-error-color-10pct) 10%, var(--lumo-error-color));
          --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to left, var(--lumo-error-color-10pct) 10%, var(--lumo-error-color));
        }
  
        /* Primary color */
  
        :host([theme~="success"]) [part="value"],
        :host([theme~="success"]) [part="value"]::before {
          background-color: var(--lumo-success-color);
          --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to right, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color));
          --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to left, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color));
        }
      </style>
    </template>
  </dom-module><custom-style>
    <style>
      @keyframes vaadin-progress-pulse3 {
        0% { opacity: 1; }
        10% { opacity: 0; }
        40% { opacity: 0; }
        50% { opacity: 1; }
        50.1% { opacity: 1; }
        60% { opacity: 0; }
        90% { opacity: 0; }
        100% { opacity: 1; }
      }
    </style>
  </custom-style>`;
  document.head.appendChild($_documentContainer.content);
  /* Safari fails to declare animations for pseudo elements inside a shadow DOM */
  
  /*
    FIXME(polymer-modulizer): the above comments were extracted
    from HTML and may be out of place here. Review them and
    then delete this comment!
  */
  
  ;