<!--
  The common.js file must be included before this file.

  This in an HTML Import-able file that contains the definition
  of the following elements:

    <menu-item-sk>

  To use this file import it:

    <link href="/res/common/imp/menu-item-sk.html" rel="import" />

  Usage:

    <menu-item-sk icon="myicon" url="https://www.google.com" label="Google!"></menu-item-sk>

  Attributes:
    icon - The icon to use for the menu item.

    label - The text to display.

    url - URL linked to by the menu item.

  Events:
    None

  Methods:
    None
-->
<link rel="import" href="/res/imp/bower_components/polymer/polymer.html">
<link rel="import" href="/res/imp/bower_components/iron-icon/iron-icon.html">
<link rel="import" href="/res/imp/bower_components/paper-item/paper-item.html">
<dom-module id="menu-item-sk">
  <style>
  a.item {
    color: #000000;
    text-decoration: none;
    @apply(--menu-item-sk);
  }
  a.item:hover {
    text-decoration: underline;
  }
  iron-icon {
    color: var(--menu-item-sk-icon-color, #000000);
    margin-right: 10px;
  }
  span {
    white-space: nowrap;
  }
  </style>
  <template>
    <a href$="{{url}}" class="item">
      <paper-item>
        <iron-icon icon="{{icon}}"></iron-icon>
        <span>{{label}}</span>
      </paper-item>
    </a>
  </template>
  <script>
  (function() {
    Polymer({
      is: "menu-item-sk",

      properties: {
        icon: {
          type: String,
          value: "",
        },
        label: {
          type: String,
          value: "",
        },
        url: {
          type: String,
          value: "",
        },
      },
    });
  }());
  </script>
</dom-module>