/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

html,
body,
#main {
  /* Required for `justify-content: space-between` to divide space equally
   * based on the full height of the page */
  height: 100%;
}

.standalone {
  width: 100%;
  background: #fbfbfb;
  color: #666;
  text-align: center;
  font-family: Open Sans,sans-serif;
}

/**
 * Note: the is-standalone-room class is dynamically set by the StandaloneRoomView.
 */
.standalone.is-standalone-room {
  background: #000;
}

/* Logos */

.loop-logo-text {
  background: url("../img/hello-logo-text.svg") no-repeat;
  width: 200px;
  height: 36px;
}

.loop-logo {
  background: url("../shared/img/helloicon.svg") no-repeat;
  width: 100px;
  height: 100px;
}

.mozilla-logo {
  background: url("../img/mozilla-logo.svg#logo") no-repeat;
  background-size: contain;
  width: 100px;
  height: 30px;
}

.room-conversation-wrapper > .beta-logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: transparent url(../shared/img/beta-ribbon.svg) no-repeat;
  background-size: 50px;
  z-index: 1000;
}

/* Footer */

.footer-logo {
  width: 100px;
  margin: 0 auto;
  height: 30px;
  background-size: contain;
  background-image: url("../img/mozilla-logo.svg#logo-white");
  background-repeat: no-repeat;
}

.rooms-footer {
  background: #000;
  margin: 0 10px;
  text-align: left;
  height: 3em;
  position: relative;
}

html[dir="rtl"] .rooms-footer {
  text-align: right;
}

.rooms-footer p {
  /* Right-margin offset to account for .footer-logo plus 20px. */
  /* Zero other margins due to 1em margin from reset.css. */
  margin: 0 120px 0 0;
  /* Vertically align in the middle. */
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

html[dir="rtl"] .rooms-footer p {
  margin: 0 0 0 120px;
}

.rooms-footer a {
  color: #555;
}

.rooms-footer .footer-logo {
  /* Vertically-align in the middle. */
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  /* Align to the right. */
  right: 0;
}

html[dir="rtl"] .rooms-footer .footer-logo {
  left: 0;
  right: auto;
}

@media screen and (max-width:640px) {
  .rooms-footer {
    font-size: 80%;
    height: 25px;
    text-align: center;
  }

  .rooms-footer p {
    margin: 0;
    width: 100%;
  }

  .rooms-footer .footer-logo {
    display: none;
  }
}

.btn-large {
  font-size: 1rem;
  padding: .3em .5rem;
}

/**
 * Unsupported/expired views
 */

.highlight-issue-box {
  width: 400px;
  margin: 0 auto;
}

.promote-firefox {
  text-align: center;
  font-size: 18px;
  line-height: 24px;
  margin: 2em 0;
}

.promote-firefox h3 {
  font-weight: 300;
}

.btn-unsupported-device {
  width: 80%;
  line-height: 24px;
}

/**
 * Handle in Firefox views
 */

.handle-user-agent-view-scroller {
  height: 100%;
  overflow: scroll;
}

.handle-user-agent-view {
  margin: 2rem auto;
  width: 500px;
}

.handle-user-agent-view > .info-panel {
  padding-bottom: 40px;
  font-size: 1.6rem;
}

.handle-user-agent-view > p,
.handle-user-agent-view > .info-panel > p {
  margin-top: 0;
  margin: 2rem auto;
}

.handle-user-agent-view > .info-panel > .failure {
  color: red;
  font-weight: bold;
  /* Add padding to match the height of the button. */
  padding: 1.15rem 0;
  margin: 0;
}

.handle-user-agent-view > .info-panel > button {
  width: 80%;
  height: 4rem;
  font-size: 1.6rem;
  font-weight: bold;
}

.handle-user-agent-view > .info-panel > button.disabled {
  background-color: #EBEBEB;
  border-color: #EBEBEB;
  color: #B2B0B3;
  font-weight: normal;
}

/* Room wrapper layout */

.room-conversation-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}

/* gUM prompts */

.prompt-media-message {
  padding-top: 136px; /* Fallback for browsers that don't support calc() */
  /* 122px is 2x the intrinsic height of the background-image, and
     1rem puts one line of margin between the background-image and
     supporting text. */
  padding-top: calc(122px + 1rem);
  color: #000;
  background-color: #fff;
  background-image: url("../img/gum-others.svg");
  background-position: top center;
  /* The background-image is scaled up at 2x the instrinsic size
     (witdh & height) to make it easier to see. */
  background-size: 202px 122px;
  background-repeat: no-repeat;
  border: 1rem #fff solid;
  box-shadow: 0 0 5px #000;
  margin: auto;
  /* `width` here is specified by the design spec. */
  width: 250px;
}

.prompt-media-message.chrome {
  background-image: url("../img/gum-chrome.svg");
}

.prompt-media-message.firefox {
  background-image: url("../img/gum-firefox.svg");
}

.prompt-media-message.opera {
  background-image: url("../img/gum-opera.svg");
}

/* Room Info area layout */

.room-inner-info-area {
  color: #fff;
  margin: auto;
  /* 290px is the width of the widest info child, i.e., a tile */
  width: 290px;
}

.room-inner-info-area > button {
  border-radius: 3px;
  font-size: 1.2em;
  padding: .2em 1.2em;
  cursor: pointer;
}

.room-inner-info-area > p > a.btn {
  padding: .5em 3em .3em 3em;
  border-radius: 3px;
  font-weight: normal;
  max-width: 400px;
}

.room-inner-info-area > .empty-room-message {
  font-size: 1.2em;
  font-weight: bold;
}

.room-inner-info-area > .room-waiting-area {
  display: flex;
  justify-content: space-between;
  margin: 3em auto 1em;
}

.room-inner-info-area > .room-waiting-area > a >.room-waiting-help {
  background: transparent url("../shared/img/svg/glyph-help-16x16.svg") no-repeat;
  display: inline-block;
  height: 16px;
  margin-left: 5px;
  vertical-align: middle;
  width: 16px;
}

.room-inner-info-area > .room-waiting-tile {
  border: 0;
  border-radius: 5px;
  /* These sizes are the size of the tile image and title */
  height: 204px;
  /* Override the default iframe 300px width with the inherited width */
  width: 100%;
}
