text: define(["../../../vaadin-lumo-styles/color.js","../../../vaadin-lumo-styles/style.js","../../../../@polymer/polymer/lib/utils/html-tag.js"],function(_color,_style,_htmlTag){"use strict";function _templateObject_a1980650679e11eaa25e79cdef13391f(){var data=babelHelpers.taggedTemplateLiteral(["<dom-module id=\"lumo-checkbox\" theme-for=\"vaadin-checkbox\">\n  <template>\n    <style include=\"lumo-checkbox-style lumo-checkbox-effects\">\n      /* IE11 only */\n      ::-ms-backdrop,\n      [part=\"checkbox\"] {\n        line-height: 1;\n      }\n    </style>\n  </template>\n</dom-module><dom-module id=\"lumo-checkbox-style\">\n  <template>\n    <style>\n      :host {\n        -webkit-tap-highlight-color: transparent;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        cursor: default;\n        outline: none;\n      }\n\n      [part=\"label\"]:not([empty]) {\n        margin: 0.1875em 0.875em 0.1875em 0.375em;\n      }\n\n      [part=\"checkbox\"] {\n        width: calc(1em + 2px);\n        height: calc(1em + 2px);\n        margin: 0.1875em;\n        position: relative;\n        border-radius: var(--lumo-border-radius);\n        background-color: var(--lumo-contrast-20pct);\n        transition: transform 0.2s cubic-bezier(.12, .32, .54, 2), background-color 0.15s;\n        pointer-events: none;\n        line-height: 1.2;\n      }\n\n      :host([indeterminate]) [part=\"checkbox\"],\n      :host([checked]) [part=\"checkbox\"] {\n        background-color: var(--lumo-primary-color);\n      }\n\n      /* Needed to align the checkbox nicely on the baseline */\n      [part=\"checkbox\"]::before {\n        content: \"\\2003\";\n      }\n\n      /* Checkmark */\n      [part=\"checkbox\"]::after {\n        content: \"\";\n        display: inline-block;\n        width: 0;\n        height: 0;\n        border: 0 solid var(--lumo-primary-contrast-color);\n        border-width: 0.1875em 0 0 0.1875em;\n        box-sizing: border-box;\n        transform-origin: 0 0;\n        position: absolute;\n        top: 0.8125em;\n        left: 0.5em;\n        transform: scale(0.55) rotate(-135deg);\n        opacity: 0;\n      }\n\n      :host([checked]) [part=\"checkbox\"]::after {\n        opacity: 1;\n        width: 0.625em;\n        height: 1.0625em;\n      }\n\n      /* Indeterminate checkmark */\n\n      :host([indeterminate]) [part=\"checkbox\"]::after {\n        transform: none;\n        opacity: 1;\n        top: 45%;\n        height: 10%;\n        left: 22%;\n        right: 22%;\n        width: auto;\n        border: 0;\n        background-color: var(--lumo-primary-contrast-color);\n        transition: opacity 0.25s;\n      }\n\n      /* Focus ring */\n\n      :host([focus-ring]) [part=\"checkbox\"] {\n        box-shadow: 0 0 0 3px var(--lumo-primary-color-50pct);\n      }\n\n      /* Disabled */\n\n      :host([disabled]) {\n        pointer-events: none;\n        color: var(--lumo-disabled-text-color);\n      }\n\n      :host([disabled]) [part=\"label\"] ::slotted(*) {\n        color: inherit;\n      }\n\n      :host([disabled]) [part=\"checkbox\"] {\n        background-color: var(--lumo-contrast-10pct);\n      }\n\n      :host([disabled]) [part=\"checkbox\"]::after {\n        border-color: var(--lumo-contrast-30pct);\n      }\n\n      :host([indeterminate][disabled]) [part=\"checkbox\"]::after {\n        background-color: var(--lumo-contrast-30pct);\n      }\n    </style>\n  </template>\n</dom-module><dom-module id=\"lumo-checkbox-effects\">\n  <template>\n    <style>\n      /* Transition the checkmark if activated with the mouse (disabled for grid select-all this way) */\n      :host(:hover) [part=\"checkbox\"]::after {\n        transition: width 0.1s, height 0.25s;\n      }\n\n      /* Used for activation \"halo\" */\n      [part=\"checkbox\"]::before {\n        color: transparent;\n        display: inline-block;\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n        background-color: inherit;\n        transform: scale(1.4);\n        opacity: 0;\n        transition: transform 0.1s, opacity 0.8s;\n      }\n\n      /* Hover */\n\n      :host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part=\"checkbox\"] {\n        background-color: var(--lumo-contrast-30pct);\n      }\n\n      /* Disable hover for touch devices */\n      @media (pointer: coarse) {\n        :host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part=\"checkbox\"] {\n          background-color: var(--lumo-contrast-20pct);\n        }\n      }\n\n      /* Active */\n\n      :host([active]) [part=\"checkbox\"] {\n        transform: scale(0.9);\n        transition-duration: 0.05s;\n      }\n\n      :host([active][checked]) [part=\"checkbox\"] {\n        transform: scale(1.1);\n      }\n\n      :host([active]:not([checked])) [part=\"checkbox\"]::before {\n        transition-duration: 0.01s, 0.01s;\n        transform: scale(0);\n        opacity: 0.4;\n      }\n    </style>\n  </template>\n</dom-module>"],["<dom-module id=\"lumo-checkbox\" theme-for=\"vaadin-checkbox\">\n  <template>\n    <style include=\"lumo-checkbox-style lumo-checkbox-effects\">\n      /* IE11 only */\n      ::-ms-backdrop,\n      [part=\"checkbox\"] {\n        line-height: 1;\n      }\n    </style>\n  </template>\n</dom-module><dom-module id=\"lumo-checkbox-style\">\n  <template>\n    <style>\n      :host {\n        -webkit-tap-highlight-color: transparent;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        cursor: default;\n        outline: none;\n      }\n\n      [part=\"label\"]:not([empty]) {\n        margin: 0.1875em 0.875em 0.1875em 0.375em;\n      }\n\n      [part=\"checkbox\"] {\n        width: calc(1em + 2px);\n        height: calc(1em + 2px);\n        margin: 0.1875em;\n        position: relative;\n        border-radius: var(--lumo-border-radius);\n        background-color: var(--lumo-contrast-20pct);\n        transition: transform 0.2s cubic-bezier(.12, .32, .54, 2), background-color 0.15s;\n        pointer-events: none;\n        line-height: 1.2;\n      }\n\n      :host([indeterminate]) [part=\"checkbox\"],\n      :host([checked]) [part=\"checkbox\"] {\n        background-color: var(--lumo-primary-color);\n      }\n\n      /* Needed to align the checkbox nicely on the baseline */\n      [part=\"checkbox\"]::before {\n        content: \"\\\\2003\";\n      }\n\n      /* Checkmark */\n      [part=\"checkbox\"]::after {\n        content: \"\";\n        display: inline-block;\n        width: 0;\n        height: 0;\n        border: 0 solid var(--lumo-primary-contrast-color);\n        border-width: 0.1875em 0 0 0.1875em;\n        box-sizing: border-box;\n        transform-origin: 0 0;\n        position: absolute;\n        top: 0.8125em;\n        left: 0.5em;\n        transform: scale(0.55) rotate(-135deg);\n        opacity: 0;\n      }\n\n      :host([checked]) [part=\"checkbox\"]::after {\n        opacity: 1;\n        width: 0.625em;\n        height: 1.0625em;\n      }\n\n      /* Indeterminate checkmark */\n\n      :host([indeterminate]) [part=\"checkbox\"]::after {\n        transform: none;\n        opacity: 1;\n        top: 45%;\n        height: 10%;\n        left: 22%;\n        right: 22%;\n        width: auto;\n        border: 0;\n        background-color: var(--lumo-primary-contrast-color);\n        transition: opacity 0.25s;\n      }\n\n      /* Focus ring */\n\n      :host([focus-ring]) [part=\"checkbox\"] {\n        box-shadow: 0 0 0 3px var(--lumo-primary-color-50pct);\n      }\n\n      /* Disabled */\n\n      :host([disabled]) {\n        pointer-events: none;\n        color: var(--lumo-disabled-text-color);\n      }\n\n      :host([disabled]) [part=\"label\"] ::slotted(*) {\n        color: inherit;\n      }\n\n      :host([disabled]) [part=\"checkbox\"] {\n        background-color: var(--lumo-contrast-10pct);\n      }\n\n      :host([disabled]) [part=\"checkbox\"]::after {\n        border-color: var(--lumo-contrast-30pct);\n      }\n\n      :host([indeterminate][disabled]) [part=\"checkbox\"]::after {\n        background-color: var(--lumo-contrast-30pct);\n      }\n    </style>\n  </template>\n</dom-module><dom-module id=\"lumo-checkbox-effects\">\n  <template>\n    <style>\n      /* Transition the checkmark if activated with the mouse (disabled for grid select-all this way) */\n      :host(:hover) [part=\"checkbox\"]::after {\n        transition: width 0.1s, height 0.25s;\n      }\n\n      /* Used for activation \"halo\" */\n      [part=\"checkbox\"]::before {\n        color: transparent;\n        display: inline-block;\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n        background-color: inherit;\n        transform: scale(1.4);\n        opacity: 0;\n        transition: transform 0.1s, opacity 0.8s;\n      }\n\n      /* Hover */\n\n      :host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part=\"checkbox\"] {\n        background-color: var(--lumo-contrast-30pct);\n      }\n\n      /* Disable hover for touch devices */\n      @media (pointer: coarse) {\n        :host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part=\"checkbox\"] {\n          background-color: var(--lumo-contrast-20pct);\n        }\n      }\n\n      /* Active */\n\n      :host([active]) [part=\"checkbox\"] {\n        transform: scale(0.9);\n        transition-duration: 0.05s;\n      }\n\n      :host([active][checked]) [part=\"checkbox\"] {\n        transform: scale(1.1);\n      }\n\n      :host([active]:not([checked])) [part=\"checkbox\"]::before {\n        transition-duration: 0.01s, 0.01s;\n        transform: scale(0);\n        opacity: 0.4;\n      }\n    </style>\n  </template>\n</dom-module>"]);_templateObject_a1980650679e11eaa25e79cdef13391f=function _templateObject_a1980650679e11eaa25e79cdef13391f(){return data};return data}var $_documentContainer=(0,_htmlTag.html)(_templateObject_a1980650679e11eaa25e79cdef13391f());document.head.appendChild($_documentContainer.content)});