<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 polymer.github.io/PATENTS.txt –>

<link rel=“import” href=“../polymer/polymer.html”>

<link rel=“import” href=“../iron-flex-layout/iron-flex-layout.html”>

<link rel=“import” href=“color.html”> <link rel=“import” href=“typography.html”> <link rel=“import” href=“shadow.html”>

<style is=“custom-style”>

body {
  @apply(--paper-font-common-base);
  font-size: 14px;
  margin: 0;
  padding: 24px;
  background-color: var(--paper-grey-50);
}

.horizontal-section-container {
  @apply(--layout-horizontal);
  @apply(--layout-center-justified);
  @apply(--layout-wrap);
}

.vertical-section-container {
  @apply(--layout-vertical);
  @apply(--center-justified);
}

.horizontal-section {
  background-color: white;
  padding: 24px;
  margin-right: 24px;
  min-width: 200px;

  @apply(--shadow-elevation-2dp);
}

.vertical-section {
  background-color: white;
  padding: 24px;
  margin: 0 24px 24px 24px;

  @apply(--shadow-elevation-2dp);
}

.centered {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

code {
  color: var(--google-grey-700);
}

/* TODO: remove this hack and use horizontal-section-container instead */
body > div.layout.horizontal.center-justified {
  @apply(--layout-wrap);
}

</style>