/* 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 {
  height: 26px;
  width: 100px;
}

/* Standalone Overlay wrapper */
.standalone-overlay-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: 1.2rem;
  pointer-events: none;
}

.standalone-overlay-wrapper > .hello-logo {
  width: 120px;
  height: 19px;
  background-image: url("../shared/img/hello_logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}

html[dir="rtl"] .standalone-overlay-wrapper > .hello-logo {
  right: 0;
  left: auto;
}

.standalone-overlay-wrapper > .general-support-url {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: auto;
}

html[dir="rtl"] .standalone-overlay-wrapper > .general-support-url {
  left: 0;
  right: auto;
}

.standalone-overlay-wrapper .icon-help {
  background-size: contain;
  width: 16px;
  height: 16px;
  background: transparent url("../shared/img/svg/glyph-help-16x16.svg") no-repeat;
}

.standalone-overlay-wrapper > .standalone-moz-logo {
  width: 50px;
  height: 13px;
  position: absolute;
  bottom: 0;
  right: 0;
}

html[dir="rtl"] .standalone-overlay-wrapper > .standalone-moz-logo {
  left: 0;
  right: auto;
}

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

@media screen and (max-width:640px) {
  .standalone-overlay-wrapper > .standalone-moz-logo {
    display: none;
  }

  .standalone-overlay-wrapper > .hello-logo {
    display: none;
  }
}

/**
 * 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: #4a4a4a;
  margin: auto;
  padding: 0 5px;
  width: 100%;
}

.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;
  /* This should match the width set in the room-waiting-tile to ensure the edges
     of the content aligns within the tile width. */
  width: 290px;
}

.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;
  /* The tiles we are served are 290px wide. This width should also match that
     for the .room-waiting-area. */
  width: 290px;
}

/* Terms of Service */

.room-inner-info-area > .terms-service {
  margin-top: 20px;
}

.room-inner-info-area > .terms-service,
.room-inner-info-area > .terms-service > a {
  color: #999;
}
