text: define(["../../../../polymer/lib/legacy/polymer-fn.js", "../../../../polymer/lib/utils/html-tag.js"], function (_polymerFn, _htmlTag) {
    "use strict";
  
    var _templateObject_977be2c0941711ec8d52c707f928eca0;
  
    (0, _polymerFn.Polymer)({
      _template: (0, _htmlTag.html)(_templateObject_977be2c0941711ec8d52c707f928eca0 || (_templateObject_977be2c0941711ec8d52c707f928eca0 = babelHelpers.taggedTemplateLiteral(["\n    <style>\n\n      :host {\n        @apply --layout-horizontal;\n        @apply --layout-center-center;\n        @apply --layout-wrap;\n        position: relative;\n        text-align: center;\n        width: 100%;\n        height: 100%;\n        --paper-icon-button-ink-color: #31f0ef;\n      }\n\n      .pic {\n        width: 80%;\n        height: 80%;\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: 50% 50%;\n        transition: opacity 0.5s;\n      }\n\n      :host::after {\n        content: \"\";\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        opacity: 0;\n        transition: opacity 0.5s;\n        pointer-events: none;\n        /* create a layer to only invalidate this layer for :hover */\n        transform: translateZ(0);\n      }\n\n      :host:hover::after {\n        opacity: 1;\n      }\n\n    </style>\n\n    <div class=\"pic\" style$=\"background-image: url([[item.imageUrl]]);\"></div>\n"], ["\n    <style>\n\n      :host {\n        @apply --layout-horizontal;\n        @apply --layout-center-center;\n        @apply --layout-wrap;\n        position: relative;\n        text-align: center;\n        width: 100%;\n        height: 100%;\n        --paper-icon-button-ink-color: #31f0ef;\n      }\n\n      .pic {\n        width: 80%;\n        height: 80%;\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: 50% 50%;\n        transition: opacity 0.5s;\n      }\n\n      :host::after {\n        content: \"\";\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        opacity: 0;\n        transition: opacity 0.5s;\n        pointer-events: none;\n        /* create a layer to only invalidate this layer for :hover */\n        transform: translateZ(0);\n      }\n\n      :host:hover::after {\n        opacity: 1;\n      }\n\n    </style>\n\n    <div class=\"pic\" style\\$=\"background-image: url([[item.imageUrl]]);\"></div>\n"]))),
      is: 'shrine-simple-item',
      properties: {
        item: {
          type: Object
        }
      }
    });
  });