import "../../../vaadin-material-styles/color.js";
import "../../../vaadin-material-styles/font-icons.js";
import "../../../vaadin-material-styles/typography.js";
import "../../../vaadin-button/theme/material/vaadin-button.js";
import "../../../vaadin-progress-bar/theme/material/vaadin-progress-bar.js";
import { html } from "../../../../@polymer/polymer/lib/utils/html-tag.js";
const $_documentContainer = html`<dom-module id="material-upload" theme-for="vaadin-upload">
  <template>
    <style>
      :host(:not([nodrop])) {
        overflow: hidden;
        border: 1px dashed var(--material-divider-color);
        border-radius: 4px;
        padding: 8px 16px;
        transition: border-color 0.6s;
        position: relative;
      }

      [part="primary-buttons"] {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: baseline;
      }

      /* TODO(jouni): unsupported selector (not sure why there's #addFiles element wrapping the upload button) */
      [part="primary-buttons"] > * {
        display: block;
        flex-grow: 1;
      }

      [part="upload-button"] {
        display: block;
        margin: 0 -8px;
      }

      [part="drop-label"] {
        text-align: center;
        white-space: normal;
        padding: 0 24px;
        color: var(--material-secondary-text-color);
        font-family: var(--material-font-family);
        font-size: var(--material-small-font-size);
      }

      :host([dragover-valid]) {
        border-color: var(--material-primary-color);
        transition: border-color 0.1s;
      }

      :host([dragover-valid]) [part="drop-label"] {
        color: var(--material-primary-text-color);
      }

      :host([max-files-reached]) [part='drop-label'] {
        color: var(--material-disabled-text-color);
      }

      [part="drop-label-icon"] {
        display: inline-block;
        margin-right: 8px;
      }

      [part="drop-label-icon"]::before {
        content: var(--material-icons-upload);
        font-family: material-icons;
        font-size: var(--material-icon-font-size);
        line-height: 1;
      }

      /* Ripple */

      :host::before {
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        pointer-events: none;
        background-color: var(--material-primary-color);
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0s cubic-bezier(.075, .82, .165, 1), opacity 0.4s linear;
        transition-delay: 0.4s, 0s;
      }

      :host([dragover-valid])::before {
        transform: translate(-50%, -50%) scale(10);
        opacity: 0.1;
        transition-duration: 2s, 0.1s;
        transition-delay: 0s, 0s;
      }
    </style>
  </template>
</dom-module><dom-module id="material-upload-file" theme-for="vaadin-upload-file">
  <template>
    <style>
      :host {
        padding: 8px 0;
      }

      [part="row"] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
      }

      [part="status"],
      [part="error"] {
        color: var(--material-secondary-text-color);
        font-size: var(--material-caption-font-size);
      }

      [part="info"] {
        display: flex;
        align-items: baseline;
        flex: auto;
      }

      [part="meta"] {
        width: 0.001px;
        flex: 1 1 auto;
      }

      [part="name"] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: var(--material-small-font-size);
      }

      [part="commands"] {
        display: flex;
        flex: none;
        font-family: material-icons;
        font-size: var(--material-icon-font-size);
      }

      [part="done-icon"],
      [part="warning-icon"] {
        padding: 8px;
        margin: -8px 0 -8px -8px;
        font-family: material-icons;
        font-size: var(--material-icon-font-size);
      }

      /* When both icons are hidden, let us keep space for one */
      [part="done-icon"][hidden] + [part="warning-icon"][hidden] {
        display: block !important;
        visibility: hidden;
      }

      [part="done-icon"],
      [part="warning-icon"] {
        font-size: var(--material-icon-font-size);
        line-height: 1;
      }

      [part="start-button"],
      [part="retry-button"],
      [part="clear-button"] {
        flex: none;
        color: var(--material-secondary-text-color);
        line-height: 1;
        padding: 8px;
        margin: -8px 0;
      }

      [part="clear-button"] {
        margin-right: -8px;
      }

      [part="start-button"]:hover,
      [part="retry-button"]:hover,
      [part="clear-button"]:hover {
        color: inherit;
      }

      [part="done-icon"]::before,
      [part="warning-icon"]::before,
      [part="start-button"]::before,
      [part="retry-button"]::before,
      [part="clear-button"]::before {
        vertical-align: -0.05em;
      }

      [part="done-icon"]::before {
        content: var(--material-icons-check);
        color: var(--material-primary-text-color);
      }

      [part="warning-icon"]::before {
        content: var(--material-icons-error);
        color: var(--material-error-text-color);
      }

      [part="start-button"]::before {
        content: var(--material-icons-play);
      }

      [part="retry-button"]::before {
        content: var(--material-icons-reload);
      }

      [part="clear-button"]::before {
        content: var(--material-icons-clear);
      }

      [part="error"] {
        color: var(--material-error-text-color);
      }

      [part="progress"] {
        width: auto;
        margin-left: 28px;
      }

      [part="progress"][complete],
      [part="progress"][error] {
        display: none;
      }
    </style>
  </template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);