<link rel="import" href="g-selector.html">
<link rel="import" href="g-overlay.html">
<polymer-element name="g-select" attributes="selected">
  <template>
    <style>
      @host {
        * {
          border: 1px solid #bfbfbf;
          background: white;
        }
      }
      #label {
        padding: 1rem;
        color: #bfbfbf;
      }
      #container {
        display: -webkit-flex;
        -webkit-flex-flow: column nowrap;
        -webkit-align-items: center;
      }
      #selector {
        display: block;
        min-width: 500px;
        border: 1px solid #b2b2b2;
      }
      /* @polyfill #selector > * */
      ::-webkit-distributed(*) {
        padding: 21pt;
        font-size: 14pt;
        background: white;
      }
      /* @polyfill #selector > :nth-child(2) */
      ::-webkit-distributed(:first-child) {
        border-top-width: 1px;
      }
    </style>
    <div id="label" on-tap="toggle">{{$.selector.selection.textContent}}</div>
    <g-overlay id="container" opened="{{opened}}">
      <g-selector id="selector" selected="{{selected}}" on-activate="toggle" opened="{{opened}}">
        <content select="*"></content>
      </g-selector>
    </g-overlay>
  </template>
  <script>
    Polymer('g-select', {
      ready: function() {
        this.setAttribute('touch-action', 'none');
      },
      selected: 0,
      opened: false,
      toggle: function() {
        this.opened = !this.opened;
      }
    });
  </script>
</polymer-element>
