<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
@group Paper Elements

`paper-button` is a button containing text or an image. When the user touches
the button, a ripple effect emanates from the point of contact.

A `paper-button` may be flat or raised. A raised button behaves like a piece
of paper resting on another sheet, and lifts up upon press. Flat buttons do
not raise up. Add the `raisedButton` attribute to make a raised button.

Example:

    <paper-button label="flat button"></paper-button>
    <paper-button label="raised button" raisedButton></paper-button>

A button should be styled with a background color, text color, ripple color
and hover color.

To style the background, text and hover color, apply the `background` and
`color` CSS properties to the button. To style the ripple color, apply the
`color` CSS property to the `#ripple` element in the button's shadow root:

    /* Style #my-button blue with white text and darker blue ink. */
    #my-button {
        background: #4285f4;
        color: #fff;
    }

    #my-button:hover {
        background: #2a56c6;
    }

    #my-button::shadow #ripple {
        color: #2a56c6;
    }

@element paper-button
@extends paper-focusable
-->

<link href="../polymer/polymer.html" rel="import">
<link href="../core-icon/core-icon.html" rel="import">
<link href="../paper-focusable/paper-focusable.html" rel="import">
<link href="../paper-ripple/paper-ripple.html" rel="import">
<link href="../paper-shadow/paper-shadow.html" rel="import">

<polymer-element name="paper-button" extends="paper-focusable" attributes="label raisedButton iconSrc icon" role="button" assetpath="">

  <template>

    <link href="paper-button.css" rel="stylesheet">

    <template if="{{raisedButton}}">
      <div fit="" id="shadow-container">
        <paper-shadow id="shadow" z="{{z}}" animated=""></paper-shadow>
      </div>
    </template>

    <div id="clip">
      <!-- <div id="focusBg"></div> -->
      <paper-ripple id="ripple"></paper-ripple>
      <div id="content">
        <template if="{{iconSrc || icon}}">
          <core-icon id="icon" src="{{iconSrc}}" icon="{{icon}}"></core-icon>
        </template>
        <template if="{{label}}">
          <span>{{label}}</span>
        </template>
      </div>
    </div>

  </template>

  
</polymer-element>
<script src="paper-button-extracted.js"></script>