<!--
  -- Copyright 2013 The Chromium Authors. All rights reserved.
  -- Use of this source code is governed by a BSD-style license that can be
  -- found in the LICENSE file.
  -->

<polymer-element name="kb-altkey" attributes="char" on-pointerover="{{over}}"
    on-pointerout="{{out}}" on-pointerup="{{up}}">
  <template>
    <style>
      :host {
        -webkit-box-flex: 1;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        display: -webkit-box;
        position: relative;
      }

      :host(.active) {
        background-color: #dddddd
      }

      :host(:first-child) {
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
      }

      :host(:not(:first-child)) .key{
        border-left: solid 2px #dddddd;
      }

      :host(:last-child) {
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
      }

      :host .key {
        bottom: 0;
        color: #666666;
        font-family: roboto-bold;
        font-weight: 100;
        height: 1.2em;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
      }
    </style>
    <div class="key">
      <content></content>
    </div>
  </template>
</polymer-element>