<!--
  -- 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-key" extends="kb-key-base" attributes="image keyCode
    keyName shiftModifier sound stretch weight">
  <template>
    <style>
      :host {
        background-color: #ffffff;
        border-radius: 1px;
        border-style: solid;
        border-width: 0px 0px;
        color: #666666;
        font-family: roboto-bold;
        font-weight: 100;
      }

      :host .key {
        background-image: none;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        bottom: 0;
        height: 1.2em;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        text-align: center;
        top: 0;
      }

      :host([align=left]) .key {
        padding-left: 1em;
      }

      /* TODO(rsadam@): Remove when we fully switch to native shadow dom. */
      /* TODO(rsadam@): Move shift key rules to kb-shift-key. */
      kb-shift-key .key,
      :host(kb-shift-key) .key {
        height: 70%;
        width: auto;
      }

      :host([image].cursor) .key {
        height: 85%;
      }

      :host([image]) .key {
        height: 30%;
      }

      :host([image].tab) .key {
        height: 40%;
      }

      :host .hint,
      :host([invert]) key {
        color: #bababa;
      }

      :host .hint {
        font-size: 70%;
        position: absolute;
        right: 7%;
        top: 5%;
      }

      :host-context(.hide-hint-text) .hint {
        display: none;
      }

      :host([invert]) .hint {
        color: #666666;
      }

      :host(.dark) {
        font-size: 70%;
      }

      :host(.dark.active) {
        background-color: #cccccc;
      }

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

      :host(.dark:not(.active)) {
        background-color: #555555;
      }

      :host(:not(.dark):not(.active)) {
        background-color: #ffffff;
        background-size: cover;
      }
    </style>
    <div id="key" class="key">
      <content></content>
    </div>
    <div class="hint" part="hint">{{hintText}}</div>
  </template>
</polymer-element>

<!-- Special keys -->
<polymer-element name="kb-abc-key" class="symbol dark" char="Invalid"
    extends="kb-key" weight="125">
</polymer-element>

<polymer-element name="kb-hide-keyboard-key" class="hide-keyboard dark"
    align="center" attributes="showMenu" char="Invalid" extends="kb-key">
</polymer-element>