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

<link rel="import" href="settings_page/main_page_behavior.html">

<dom-module id="settings-page-styles">
  <template>
    <style>
      :host {
        box-sizing: border-box;
        display: block;
        height: inherit;
        margin: 0 auto;
        max-width: calc(var(--settings-card-max-width) + 3 * 2px);
        min-width: 550px;
        position: relative;
        width: 96%;
      }

      :host(.showing-subpage),
      :host(.showing-subpage) #basicPage,
      :host(.showing-subpage) #advancedPage {
        /* The subpage container should extend to the bottom of the page. */
        height: 100%;
      }

      :host(.showing-subpage) settings-section:not(.expanded) {
        display: none;
      }

      :host > div > :not(.expanded) {
        /* The margin and padding here are doing two things: make the total
         * separation 24px; and make scrollIntoView align the section header
         * with the top item in the side nav menu. Both things are desired
         * by Alan (bettes@). */
        margin-bottom: 3px;
      }

      .expanded {
        min-height: 100%;
      }
    </style>
  </template>
</dom-module>