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

/* Common CSS used for every platform. */

/* Set the global 'box-sizing' state to 'border-box'.
 * *::after and *::before used to select pseudo-elements not selectable by *. */

:root {
  --google-blue-300: 138, 180, 248;
  --google-blue-600: 26, 115, 232;
  --google-blue-700: 25, 103, 210;
  --google-brown-900: 62, 39, 35;
  --google-grey-50: 248, 249, 250;
  --google-grey-900: 32, 33, 36;
  --google-purple-300: 197, 138, 249;
  --google-purple-700: 132, 48, 206;
  --google-yellow-50: 254, 247, 224;
  --google-yellow-100: 254, 239, 195;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

/* Remove all margins and padding from certain element and add word wrap. */

blockquote,
body,
caption,
dd,
dl,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
legend,
ol,
p,
pre,
ul,
table,
td,
th {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
}

/* Prevent 'sub' and 'sup' affecting 'line-height'. */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Base styling. */

body {
<if expr="is_ios">
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
</if>
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  transition-duration: 500ms;
  transition-property: color, background-color;
  transition-timing-function: ease;
}

/* Classes for light, dark and sepia themes.
 * Must agree with classes returned by useTheme() in dom_distiller_viewer.js
 * and with CSS class constants in viewer.cc */

.light {
  background-color: #FFF;
  color: rgb(var(--google-grey-900));
}

.dark {
  background-color: rgb(var(--google-grey-900));
  color: #FFF;
}

.sepia {
  background-color: rgb(var(--google-yellow-50));
  color: rgb(var(--google-brown-900));
}

.light a:link {
  color: rgb(var(--google-blue-600));
}

.sepia a:link {
  color: rgb(var(--google-blue-700));
}

.dark a:link {
  color: rgb(var(--google-blue-300));
}

.light a:visited {
  color: rgb(var(--google-purple-700));
}

.sepia a:visited {
  color: rgb(var(--google-purple-700));
}

.dark a:visited {
  color: rgb(var(--google-purple-300));
}

.light code,
.light pre {
  background-color: rgb(var(--google-grey-50));
  border-color: rgb(var(--google-grey-900));
}

.sepia code,
.sepia pre {
  background-color: rgb(var(--google-yellow-100));
  border-color: rgba(var(--google-brown-900), 0.5);
}

.dark code,
.dark pre {
  background-color: #000;
  border-color: rgba(255, 255, 255, 0.5);
}

.light tbody tr:nth-child(odd) {
  background-color: #EEE;
}

.light th,
.light td {
  border-inline-start: 2px solid #AAA;
}

.sepia tbody tr:nth-child(odd) {
  background-color: rgb(217, 196, 175);
}

.sepia th,
.sepia td {
  border-inline-start: 1px solid rgb(147, 125, 102);
}

.dark tbody tr:nth-child(odd) {
  background-color: #333;
}

.dark th,
.dark td {
  border-inline-start: 1px solid #555;
}

/* #content-wrap is added to be more specific than the color theme rules */
#content-wrap th:first-child {
  border-inline-start: none;
}

#content-wrap td:first-child {
  border-inline-start: none;
}


/* Font settings */

<if expr="not(is_ios)">
.serif {
  font-family: serif;
}

.sans-serif {
  font-family: 'Roboto', sans-serif;
}

.monospace {
  font-family: monospace;
}

.Lexend {
  font-family: 'Lexend', sans-serif;
  font-optical-sizing: auto;
}
</if>

<if expr="is_ios">
.serif {
  font-family: -apple-system-ui-serif, ui-serif, 'Georgia', serif;
}

.sans-serif {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.monospace {
  font-family: ui-monospace, SFMono-Regular, ui-monospace, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

.Lexend {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}
</if>

/* Content. */

<if expr="is_ios or is_android">
.desktop-only {
  display: none;
}
</if>

body .hidden {
  display: none;
}

#loading-indicator {
  padding-bottom: 2em;
  width: 100%;
}

#loading-indicator > img,
#loading-indicator > svg {
  display: block;
  height: 2.5em;
  margin: auto;
  width: 2.5em;
}

/* Video styling. */

video::-webkit-media-controls-fullscreen-button {
  display: none;
}

<if expr="is_ios or is_android">
.desktop-only {
  display: none;
}
</if>


/* Video styling. */

video::-webkit-media-controls-fullscreen-button {
  display: none;
}

/* Iframe sizing. */
.youtubeContainer {
  height: 0;
  /* This is the perecnt height of a standard HD video. */
  padding-bottom: 56.25%;
  position: relative;
  width: 100%;
}

.youtubeIframe {
  height: 100%;
  position: absolute;
  start: 0;
  top: 0;
  width: 100%;
}

/* Always hide nav elements. */
nav {
  display: none;
}