<polymer-element name="g-field" attributes="label appearance">
  <template>
    <link rel="stylesheet" href="css/g-flex-layout.css" />
    <style>
      @host {
        * {
          display: block;
          background-color: #f0f0ed;
        }
      }
      #label {
        color: #919191;
        font-weight: bold;
        display: inline-block;
      }
      #label[filled] {
        margin: 1rem 0;
      }
      #label[appearance="full"] {
        margin-left: 18px;
      }
      /* @polyfill item > * */
      #item::-webkit-distributed(*) {
        -webkit-flex-basis: auto;
        flex-basis: auto;
      }
      /* input decoration */
      /* @polyfill #shadow > input */
      #item::-webkit-distributed(input) {
        border: 1px solid #e4e4e4;
        border-top-color: #cecece;
        color: #333;
        padding: 9px 8px;
        margin: 0;
        background: #fff;
      }
      /* @polyfill #shadow > input:focus */
      #item::-webkit-distributed(input:focus) {
        outline: 1px solid #448afd;
      }
      /* @polyfill #shadow > input:invalid */
      #item::-webkit-distributed(input:invalid) {
        outline: 1px solid #d84437;
      }
      /* @polyfill #shadow > input:active */
      #item::-webkit-distributed(input:active) {
        background-color: #ededed;
      }
      /* @polyfill #shadow > ::-webkit-input-placeholder, #shadow > ::-moz-placeholder, #shadow > ::-ms-input-placeholder */
      #item::-webkit-distributed(::-webkit-input-placeholder) {
        color: #bebebe;
      }
      #item[appearance="full"]::-webkit-distributed(input) {
        border-width: 0 0 1px 0;
        padding: 18px 18px;
      }
    </style>
    <div id="shadow" class="flexbox col">
      <span id="label" filled?="{{label}}" appearance="{{appearance}}">{{label}}</span>
      <content id="item" appearance="{{appearance}}" flex select="*"></content>
    </div>
  </template>
  <script>
    Polymer('g-field', {
      label: '',
      appearance: 'inset',
    });
  </script>
</polymer-element>
