/* Copyright 2019 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

html {
  scroll-behavior: smooth;
}

.sticky-bar {
  background-color: white;
  border-bottom: 1px solid black;
  color: black;
  overflow: auto;
  padding-bottom: 1.5ex;
  position: sticky;
  top: 0;
}

#log-display-config {
  display: none; /* only visible for Autofill, not for Password Manager */
  font-size: 120%;
  padding: 1ex;
}

#log-display-config label {
  padding-inline-end: 1em;
}

#marker-fake-button {
  background-color: lightgray;
  border: 1px solid black;
  margin-inline-end: 1em;
  padding: .5ex;
}

#logging-note {
  font-style: italic;
}

#logging-note-incognito {
  font-style: italic;
}

/* Initially, nothing is visible, to avoid flicker. */
#log-entries,
#logging-note,
#logging-note-incognito {
  display: none;
}

/* Visibility settings for non-Incognito tabs. */
[data-incognito=false] #log-entries,
[data-incognito=false] #logging-note {
  display: block;
}

/* Visibility settings for Incognito tabs. */
[data-incognito=true] #logging-note-incognito {
  display: block;
}

#version-info {
  margin: 3px;
  padding: 3px;
}

.version {
  font-family: monospace;
  max-width: 430px;
  padding-inline-start: 5px;
  vertical-align: top;
  word-break: break-word;
}

.label {
  font-family: monospace;
  font-weight: 200;
  vertical-align: top;
}

.log-entry,
.marker {
  padding: 3px;
}

.marker {
  background-color: red;
  font-size: 200%;
  overflow-wrap: break-word;
  white-space: normal;
  word-wrap: break-word;
}

.marker::before {
  content: 'Position marked: ';
}

/*
 * Colors can be taken from
 * https://material.io/design/color/#tools-for-picking-colors
 * Pick the rows of entries labeled with 100
 */

.log-entry[scope='Context'] {
  background-color: #F5F5F5;
}

.log-entry[scope='Parsing'] {
  background-color: #FFECB3;
}

.log-entry[scope='AbortParsing'] {
  background-color: #FFCDD2;
}

.log-entry[scope='Filling'] {
  background-color: #D1C4E9;
}

.log-entry[scope='Submission'] {
  background-color: #BBDEFB;
}

.log-entry[scope='AutofillServer'] {
  background-color: #D7CCC8;
}

.log-entry[scope='Metrics'] {
  background-color: #B2EBF2;
}

/*
 * Checkboxes add/remove hide-<Scope> classes to the #log-entries. Hiding of the
 * relevant <div>'s and adjacent <hr>'s is implemented by these classes.
 */

.hide-Context .log-entry[scope='Context'],
.hide-Context .log-entry[scope='Context'] + hr {
  display: none;
}

.hide-Parsing .log-entry[scope='Parsing'],
.hide-Parsing .log-entry[scope='Parsing'] + hr {
  display: none;
}

.hide-AbortParsing .log-entry[scope='AbortParsing'],
.hide-AbortParsing .log-entry[scope='AbortParsing'] + hr {
  display: none;
}

.hide-Filling .log-entry[scope='Filling'],
.hide-Filling .log-entry[scope='Filling'] + hr {
  display: none;
}

.hide-Submission .log-entry[scope='Submission'],
.hide-Submission .log-entry[scope='Submission'] + hr {
  display: none;
}

.hide-AutofillServer .log-entry[scope='AutofillServer'],
.hide-AutofillServer .log-entry[scope='AutofillServer'] + hr {
  display: none;
}

.hide-Metrics .log-entry[scope='Metrics'],
.hide-Metrics .log-entry[scope='Metrics'] + hr {
  display: none;
}

.form {
  border: 1px black solid;
  margin: 3px;
  padding: 3px;
}

.form td {
  vertical-align: text-top;
}
