<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="browser_switcher_proxy.html">

<dom-module id="browser-switcher-app">
  <template>
    <style>
      :host {
        @apply --cr-card-elevation;
        background-color: var(--cr-card-background-color);
        border-radius: var(--cr-card-border-radius);
        display: block;
        margin: 16px;
        max-width: 640px;
        min-width: 500px;
        padding: 16px;
      }

      h1 {
        color: var(--cr-primary-text-color);
        font-size: 1rem;
        font-weight: 500;
        margin: 0;
        padding: 0 0 14px 0;
      }

      p {
        color: var(--cr-primary-text-color);
        /* Should be 13px when html font-size is 16px */
        font-size: 0.8125rem;
        margin: 0;
        max-width: 450px;
      }
    </style>

    <h1>$i18n{opening}</h1>
    <p>$i18n{description}</p>
  </template>
  <script src="app.js"></script>
</dom-module>