text: define(["../../../vaadin-material-styles/color.js", "../../../vaadin-material-styles/shadow.js", "../../../vaadin-material-styles/typography.js", "../../../../@polymer/polymer/lib/utils/html-tag.js"], function (_color, _shadow, _typography, _htmlTag) {
    "use strict";
  
    function _templateObject_55d3f4a099b011eb851ed31c596cbbd8() {
      var data = babelHelpers.taggedTemplateLiteral(["<dom-module id=\"material-button\" theme-for=\"vaadin-button\">\n  <template>\n    <style>\n      :host {\n        padding: 8px;\n        min-width: 64px;\n        box-sizing: border-box;\n        display: inline-flex;\n        align-items: baseline;\n        justify-content: center;\n        border-radius: 4px;\n        color: var(--material-primary-text-color);\n        font-family: var(--material-font-family);\n        text-transform: uppercase;\n        font-size: var(--material-button-font-size);\n        line-height: 20px;\n        font-weight: 500;\n        letter-spacing: 0.05em;\n        white-space: nowrap;\n        overflow: hidden;\n        transition: box-shadow 0.2s;\n        -webkit-tap-highlight-color: transparent;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      }\n\n      @-moz-document url-prefix() {\n        :host {\n          vertical-align: -13px;\n        }\n      }\n\n      :host::before,\n      :host::after {\n        content: \"\";\n        pointer-events: none;\n        position: absolute;\n        border-radius: inherit;\n        opacity: 0;\n        background-color: currentColor;\n      }\n\n      :host::before {\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        transition: opacity 0.5s;\n      }\n\n      :host::after {\n        border-radius: 50%;\n        width: 320px;\n        height: 320px;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        transition: all 0.9s;\n      }\n\n      [part=\"label\"] ::slotted(*) {\n        vertical-align: middle;\n      }\n\n      :host(:hover)::before,\n      :host([focus-ring])::before {\n        opacity: 0.08;\n        transition-duration: 0.2s;\n      }\n\n      :host([active])::before {\n        opacity: 0.16;\n        transition: opacity 0.4s;\n      }\n\n      :host([active])::after {\n        transform: translate(-50%, -50%) scale(0.0000001); /* animation works weirdly with scale(0) */\n        opacity: 0.1;\n        transition: 0s;\n      }\n\n      :host(:hover:not([active]))::after {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 0;\n      }\n\n      :host([disabled]) {\n        pointer-events: none;\n        color: var(--material-disabled-text-color);\n      }\n\n      /* Contained and outline variants */\n      :host([theme~=\"contained\"]),\n      :host([theme~=\"outlined\"]) {\n        padding: 8px 16px;\n      }\n\n      :host([theme~=\"outlined\"]) {\n        box-shadow: inset 0 0 0 1px var(--_material-button-outline-color, rgba(0, 0, 0, 0.2));\n      }\n\n      :host([theme~=\"contained\"]:not([disabled])) {\n        background-color: var(--material-primary-color);\n        color: var(--material-primary-contrast-color);\n        box-shadow: var(--material-shadow-elevation-2dp);\n      }\n\n      :host([theme~=\"contained\"][disabled]) {\n        background-color: var(--material-secondary-background-color);\n      }\n\n      :host([theme~=\"contained\"]:hover) {\n        box-shadow: var(--material-shadow-elevation-4dp);\n      }\n\n      :host([theme~=\"contained\"][active]) {\n        box-shadow: var(--material-shadow-elevation-8dp);\n      }\n\n      /* Icon alignment */\n\n      [part] ::slotted(iron-icon) {\n        display: block;\n        width: 18px;\n        height: 18px;\n      }\n\n      [part=\"prefix\"] ::slotted(iron-icon) {\n        margin-right: 8px;\n        margin-left: -4px;\n      }\n\n      [part=\"suffix\"] ::slotted(iron-icon) {\n        margin-left: 8px;\n        margin-right: -4px;\n      }\n\n      /* RTL specific styles */\n\n      :host([dir=\"rtl\"])::before {\n        left: auto;\n        right: 0;\n      }\n\n      :host([dir=\"rtl\"])::after {\n        left: auto;\n        right: 50%;\n        transform: translate(50%, -50%);\n      }\n\n      :host([active][dir=\"rtl\"])::after {\n        transform: translate(50%, -50%) scale(0.0000001);\n      }\n\n      :host(:hover:not([active])[dir=\"rtl\"])::after {\n        transform: translate(50%, -50%) scale(1);\n      }\n\n      :host([dir=\"rtl\"]) [part=\"prefix\"] ::slotted(iron-icon) {\n        margin-right: -4px;\n        margin-left: 8px;\n      }\n\n      :host([dir=\"rtl\"]) [part=\"suffix\"] ::slotted(iron-icon) {\n        margin-left: -4px;\n        margin-right: 8px;\n      }\n    </style>\n  </template>\n</dom-module>"]);
  
      _templateObject_55d3f4a099b011eb851ed31c596cbbd8 = function _templateObject_55d3f4a099b011eb851ed31c596cbbd8() {
        return data;
      };
  
      return data;
    }
  
    var $_documentContainer = (0, _htmlTag.html)(_templateObject_55d3f4a099b011eb851ed31c596cbbd8());
    document.head.appendChild($_documentContainer.content);
  });