/* 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;
}

.standalone-header {
  border-radius: 4px;
  background: #fff;
  padding: 1rem 5rem;
  border: 1px solid #E7E7E7;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.03);
  margin-top: 2rem;
}

/*
 * Top/Bottom spacing
 **/
.standalone-footer {
  margin-bottom: 2rem;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;

  /* prevent the video conversation elements to occupy the whole available
   width hence the height while keeping aspect ratio */
  width: 30%;
  min-width: 400px;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

.container-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-content: center;
}

.terms-service,
.terms-service a {
  font-size: .6rem;
  font-weight: 400;
  color: #adadad;
}

  .terms-service a {
    text-decoration: none;
  }

  .terms-service a:hover {
    text-decoration: underline;
  }

  .terms-service a {
    color: #777;
  }

.footer-external-links a {
  padding: .2rem .7rem;
  margin: 0 .5rem;
  text-decoration: none;
}

  .footer-external-links a:hover {
    color: #111;
  }

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

.loop-logo {
  width: 100px;
  height: 100px;
  margin: 1rem auto;
  background-image: url("../shared/img/firefox-logo.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.standalone-header-title,
.standalone-call-btn-label {
  font-weight: lighter;
}

.standalone-header-title {
  font-size: 1.8rem;
}

.standalone-call-btn-label {
  font-size: 1.2rem;
}

.light-color-font {
  opacity: .4;
  font-weight: normal;
}

.standalone-btn-chevron-menu-group {
  display: flex;
  justify-content: space-between;
  flex: 2;
}

.start-audio-only-call,
.standalone-call-btn-video-icon {
  width: 1.2rem;
  height: 1.2rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.start-audio-only-call {
  width: 100%;
  border: none;
  background-size: 10px;
  background-color: #F0F0F0;
  background-image: url("../shared/img/audio-default-16x16@1.5x.png");
  background-position: 90% center;
}

.start-audio-only-call:hover {
  background-image: url("../shared/img/audio-inverse-14x14.png");
}

.standalone-call-btn-video-icon {
  background-image: url("../shared/img/video-inverse-14x14.png");
  display: inline-block;
  background-size: 1.2rem;
  margin-left: .5rem;
}

/* Ellipsed text content of audio-video call btn */
.standalone-call-btn-text {
  /* make some room for the video icon */
  max-width: 85%;
  vertical-align: bottom;
}

.standalone-call-btn-video-icon {
  vertical-align: top;
}

@media (min-resolution: 2dppx) {
  .start-audio-only-call {
    background-image: url("../shared/img/audio-default-16x16@2x.png");
  }
  .start-audio-only-call:hover {
    background-image: url("../shared/img/audio-inverse-14x14@2x.png");
  }
  .standalone-call-btn-video-icon {
    background-image: url("../shared/img/video-inverse-14x14@2x.png");
  }
}

.btn-large {
  /* Dimensions from spec
   * https://people.mozilla.org/~dhenein/labs/loop-link-spec/#call-start */
  font-size: 1rem;
  padding: .3em .5rem;
}

  .btn-large + .btn-chevron {
    padding: 1rem;
    height: 100%; /* match full height of button */
  }

/*
 * Left / Right padding elements
 * used to center components
 * */
.flex-padding-1 {
  display: flex;
  flex: 1;
}

