/* Copyright 2018 The Chromium Authors. All rights reserved.
   Use of this source code is governed by a BSD-style license that can be
   found in the LICENSE file. */

:host {
  --card-box-height: 208px;
  --card-box-width: 312px;
  --card-rows: 3;
  --card-spacing: 16px;  /* Spacing between cards. */
  --dialog-height: 640px;
  --highlight-card-box-width: 640px;
  --subtitle-font-distance-to-baseline: 3px;
  --subtitle-font-size: 13px;
  --subtitle-line-height: 18px;
  --title-font-distance-to-baseline: 7px;
  --title-font-size: 28px;
  --title-height: calc(84px + var(--title-font-distance-to-baseline));
  --subtitle-height: calc(var(--subtitle-line-height)
                          + var(--subtitle-font-distance-to-baseline)
                          + var(--subtitle-font-size));
  font-family: 'Google Sans', Roboto, sans-serif;
}

#titleContainer {
  height: var(--title-height);
}

h1 {
  color: var(--google-grey-900);
  font-size: var(--title-font-size);
  font-weight: normal;
  margin: 0;
}

/* Subtitle should have two lines of text. */
#subTitleContainer {
  color: var(--google-grey-900);
  font-size: var(--subtitle-font-size);
  height: var(--subtitle-height);
  line-height: var(--subtitle-line-height);
  padding-top: calc(32px - var(--title-font-distance-to-baseline)
                    - var(--subtitle-font-size));
}

#cardsWindow {
  height: calc(var(--dialog-height) - var(--title-height)
               - var(--subtitle-height));
  margin-top: calc(42px - var(--subtitle-font-distance-to-baseline));
  overflow: scroll;
  padding: 0 10px;
  width: var(--highlight-card-box-width);
}

#cardsContainer {
  align-content: space-between;
  height: calc(var(--card-rows)  * var(--card-box-height)
               + var(--card-spacing) * (var(--card-rows) - 1));
  justify-content: space-between;
  padding-bottom: 40px;
}

#cardsContainer ::slotted(.card) {
  height: fit-content;
  margin: var(--card-margin);
}