/* Height: preview area 12rem; full size 44rem */

html {
  font-size: 10px;
  /* We have Fira Sans as default font in real device. But it isn't default in
   * browser. That's the main reason this line is here.*/
  font-family: "Fira Sans";
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#panel {
  width: 32.6rem;
  height: 44.2rem;
  margin: 0 auto;
  padding: 0 2.8rem 0 2.8rem;
  position: relative;
  box-sizing: border-box;
}

#panel[data-count="1"] {
  width: 32.6rem;
}

#panel[data-count="2"] {
  width: 59.6rem;
}

#panel[data-count="3"] {
  width: 86.6rem;
}

#panel[data-count="4"] {
  width: 113.6rem;
}

#panel[data-count="5"] {
  width: 140.6rem;
}

.weather-icon-panel {
  position: absolute;
  left: 0;
  top: 17.8rem;
  height: 26.4rem;
  width: 5.4rem;
  color: white;
}

.weather-icon-panel > div {
  width: 5.4rem;
  height: 5.4rem;
  margin-bottom: 1.2rem;
}

.weather-icon-panel > div:before {
  font-size: 5.4rem;
}

smart-weather > .weather-detail,
.weather-icon-panel {
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.01s cubic-bezier(0.5, 0.0, 0.0, 1.0) 0.95s,
              opacity 0.01s ease-in 0.95s;
}

.expand smart-weather > .weather-detail,
.expand .weather-icon-panel {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0s, 0s;
  transition-duration: 1s, 0.8s;
}

/* XXX: we leave a focusable element here for determining focus issues.
   This wiget has no focusable element by design, but we need to test
   dashboard ability on setting focus. These lines should be removed after
   other widgets are landed. */
smart-weather:focus {
  background-color: rgba(255,255,255, 0.1);
  outline: none;
}