<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="habitlab-logo-v2.html">

<dom-module id="duolingo-lesson-widget">
  <template>
    <custom-style>
      <style is="custom-style">
          .lesson-container {
            /* min-height: 600px; */
            width: var(--lesson-container-width, 100%);
            background-color: var(--lesson-container-bg-color, white);
            text-align: center; 
          }
          .call-to-action {
            padding: 20px 10px 0px 10px;
            font-size: var(--lesson-call-to-action-font-size, 12px);
            font-style: italic;
            line-height: 1.5;
          }
          .lesson-hdr {
            padding: 10px 10px 0px 10px;
            font-size: var(--lesson-hdr-font-size, 20px);
          }
          .duolingo-box {
            padding: 20px 20px 5px 20px;
            width: 100%;
            box-sizing: border-box;
            height: 500px;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .habitlab-logo {
            margin-bottom: 20px;
            align-self: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
          }
          #signin-button {
            cursor: pointer;
            padding: 10px;
            background-color: var(--signin-button-bg-color, #346da3); /* #415D67 */
            color: white;
            font-size: 14px;
            box-shadow: 2px 2px 2px #888888;
            height: 40px;
            width: 130px;
            vertical-align: middle;
          }
          .duolingo-icon {
            height: 40px;
            width: 40px;
            margin-right: 8px;
            margin-left: -9px;
            padding-left: 0px;
          }
          #grey-space {
            background-color: #e9ebee;
            height: 12px;
            margin-left: -1px;
            margin-right: -1px;
          }
          #shadow {
            height: 1px;
            background-color: #1d2129;
            opacity: 0.2;
          }
      </style>
    </custom-style>
    
    <div class="lesson-container" on-mouseover="onHovered" on-mouseout="onUnhovered">
      <div class="call-to-action">{{callToAction}}</div>
      <div class="lesson-hdr">{{lessonTitle}}</div>
      <iframe class="duolingo-box" src="{{iframeURL}}"></iframe>
      <habitlab-logo-v2 class="habitlab-logo"></habitlab-logo-v2>
    </div>
    <div id="shadow"></div>
    <div id="grey-space"></div>
  </template>
  <script src="duolingo-lesson-widget.js"></script>
</dom-module>