/* 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/. */

body {
  margin: 8px;
}

table {
  font-family: monospace;
  border: 1px solid var(--in-content-border-color);
  border-spacing: 0;
  margin-block: 1em;
}

.controls {
  font-size: 1.1em;
  display: inline-block;
  margin: 0 0.5em;
}

.control {
  margin: 0.5em 0;
}

.message > p {
  margin: 4px;
}

.log p,
.prefs p {
  font-family: monospace;
  padding-inline-start: 2em;
  text-indent: -2em;
  margin-block: 2px;
}

#content > div,
#mediactx > div {
  padding: 1em 2em;
  margin: 1em 0;
  border: 1px solid var(--in-content-box-border-color);
  border-radius: 10px;
  background-color: var(--background-color-box);
}

.autorefresh {
  font-size: var(--font-size-small);
  margin-inline-end: 0.5em;
}

.section-heading {
  display: flex;
  align-items: center;

  > h3,
  > h4 {
    margin-inline-end: 1em;
  }

  > .fold-trigger {
    margin-inline-end: 1em;
  }

  > button {
    margin-inline: 1em;
  }
}

.fold-target {
  border-inline-start: 1px solid var(--in-content-border-color);
  padding-inline-start: 1em;

  .section-body > & {
    display: block;
  }
}

.peer-connection > h3 {
  background-color: var(--in-content-box-info-background);
  padding: 4px;
}

h3 > span {
  margin-inline-end: 0.5em;
}

.peer-connection > button {
  margin-inline-start: 0;
}

.peer-connection table {
  width: 100%;
  text-align: center;
}

.peer-connection table th {
  font-weight: bold;
}

.peer-connection table th,
.peer-connection table td {
  padding: 0.4em;
  border: 1px solid var(--in-content-border-color);
}

.peer-connection table tr:nth-child(odd) {
  background-color: var(--table-row-background-color-alternate);
}

.peer-connection table caption {
  text-align: start;
}

.peer-connection table.raw-candidate {
  text-align: match-parent;
}

.bottom-border td {
  border-bottom: 2px solid currentColor;
}

.peer-connection-config div {
  margin-inline: 1em;
  padding: 4px;
  border: 1px solid var(--in-content-border-color);
}

.peer-connection-config div:nth-child(odd) {
  background-color: var(--table-row-background-color-alternate);
}

/* The pale colour scheme is taken from:
   https://personal.sron.nl/~pault/#sec:qualitative */
.ice-trickled {
  background-color: #cceeff; /* pale cyan */
}
.ice-succeeded {
  background-color: #ccddaa; /* pale green */
}
.ice-failed {
  background-color: #ffcccc; /* pale red */
}
.ice-cancelled {
  background-color: #eeeebb; /* pale yellow */
}
.ice-trickled,
.ice-succeeded,
.ice-failed,
.ice-cancelled {
  color: black;
}

.info-label {
  font-weight: bold;
}

.info-body,
.stat-label {
  padding-inline-start: 0.5em;
}

.section-ctrl {
  margin: 1em 1.5em;
}

div.fold-trigger {
  color: var(--blue-60);
  cursor: pointer;
}

@media screen {
  .fold-closed {
    display: none !important;
  }
}

@media print {
  .no-print {
    display: none !important;
  }
}

.tab-pane {
  display: none;
}

.active-tab-pane {
  border: 1px solid var(--in-content-border-color);
  display: block;
}

.tab-button {
  color: var(--in-content-button-text-color);
}

.active-tab-button {
  color: var(--in-content-button-text-color-active);
  background: var(--in-content-button-background-active);
}

.sdp-history {
  display: flex;
  height: 400px;
}

.sdp-history-link {
  text-decoration: underline;
}

.sdp-history h5 {
  background-color: var(--in-content-box-info-background);
}

.sdp-history div {
  border: 1px solid var(--in-content-border-color);
  padding: 1em;
  width: 50%;
  overflow: scroll;
}

.line-graph {
  border: 1px solid var(--in-content-border-color);
  margin-inline: 1px;
  padding: 1px;
}

.svg-graph {
  border: 1px solid var(--in-content-border-color);
  margin-inline: 1px;
}

.copy-button-base {
  padding-inline-end: 0.25em;
  cursor: default;
}

.copy-button {
  visibility: hidden;
}

.prefList > li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.pathDisplay {
  margin-inline-end: 1em;
}

.subsection-heading > h4 > span {
  margin-inline-end: 0.5em;
}

.prefList > li:hover > .copy-button,
.subsection-heading:hover > h4 > .copy-button {
  visibility: visible;
}

.copy-button-fade-out {
  opacity: 0;
  transition: opacity 0.5s;
}

.copy-button-fade-in {
  opacity: 1;
  transition: opacity 0.5s;
}