@import 'default.css';

/* ----- Dark Theme ----- */
:root,
body.dark {
  --border: #444;
  --h1: #0cf;
  --dt: #abc;
  --pre: #cdf;
  --quote: #400;
  --pass: #0c0;
  --th: #333;
  --td: #444;
}

/* ----- Light Theme ----- */
@media screen and (prefers-color-scheme: light) {
  :root {
    --border: #ddd;
    --h1: #066;
    --dt: #345;
    --pre: #f2f1f1;
    --quote: #f4f6fa;
    --pass: #080;
    --th: #f7f7fb;
    --td: #fbfbfd;
  }
}

/* ----- General ----- */
html {
  scroll-padding-top: 2.5em;
}

body {
  font-size: 0.9em;
}

img {
  vertical-align: text-top;
}

img[src$=".svg"]:not([src$="js.svg"]):not([src$="css.svg"]) {
  filter: var(--img-filter);
}

article {
  padding: 0.5em;
}

h1, h2 {
  font-weight: normal;
}

h1 {
  color: var(--h1);
  font-size: 2.5em;
  border-bottom: 1px solid var(--border);
}

h2 {
  font-size: 2em;
}

:not(h1) + h2 {
  margin-top: 1.5em;
}

h1 img, h2 img, h3 img {
  width: 1em;
}

h2 span, h3 span {
  color: var(--dim);
  font-size: 0.8em;
  font-style: italic;
  font-weight: normal;
  margin-left: 0.5em;
}

h3 sup {
  background-color: #cd853f;
  color: #fff;
  padding: 0.1em 0.4em;
}

strong {
  color: #905;
}

dt {
  color: var(--dt);
  background-color: var(--code);
  display: table;
  padding: 0.2em 0.5em;
  margin-bottom: 0.2em;
}

dl.plain dt {
  color: var(--color);
  background-color: unset;
  font-weight: bold;
}

dd + dt {
  margin-top: 0.5em;
}

dd > dl {
  margin-top: 0.5em;
}

dt img, dd img {
  width: 1.2em;
}

dt span {
  margin-left: 0.5em;
  color: var(--dim);
  font-style: italic;
  font-weight: normal;
  font-size: 0.9em;
}

dd sup, p sup {
  color: #05f;
}

s {
  text-decoration: line-through solid var(--highlight);
}

article li::marker { /* FF68 */
  color: var(--dim);
}

article li img {
  max-width: 70vw;
}

div.grid-2 {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 1em;
  row-gap: 1em;
}

a[href^="http"]::after {
  content: '🔗';
  margin-left: 0.3em;
  font-size: 0.7em;
}

/* dino.svg */
a[href^="https://addons.mozilla.org/"]::before,
a[href^="https://extensionworkshop.com/"]::before,
a[href^="https://support.mozilla.org/"]::before,
/* moz.svg */
a[href^="https://blog.mozilla.org/"]::before,
a[href^="https://developer.mozilla.org/"]::before,
a[href^="https://www.mozilla.org/"]::before,
/* mix */
a[href^="https://bugzilla.mozilla.org/show_bug.cgi?id="]::before,
a[href^="https://codemirror.net/"]::before,
a[href^="https://developer.chrome.com/"]::before,
a[href^="https://github.com/"]::before,
a[href*=".github.io/"]::before {
  content: '';
  background: url('../image/logo/dino.svg') no-repeat center / contain;
  display: inline-block;
  height: 0.9em;
  width: 0.9em;
  margin-right: 0.3em;
  /* vertical-align: text-bottom; */
  filter: var(--img-filter);
}

a[href^="https://blog.mozilla.org/"]::before,
a[href^="https://developer.mozilla.org/"]::before,
a[href^="https://www.mozilla.org/"]::before {
  background-image: url('../image/logo/moz.svg');
  border-radius: 1em;
}

a[href^="https://bugzilla.mozilla.org/show_bug.cgi?id="]::before {
  background-image: url('../image/logo/bugzilla.svg');
}

a[href^="https://github.com/"]::before,
a[href*=".github.io/"]::before {
  background-image: url('../image/logo/github.svg');
}

a[href^="https://codemirror.net/"]::before {
  background-image: url('../image/logo/codemirror.svg');
}

a[href^="https://developer.chrome.com/"]::before {
  background-image: url('../image/logo/chrome.svg');
}

/* ----- Navigation ----- */
nav {
  background-color: var(--nav);
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: 0px 3px 6px var(--shadow);
}

nav div {
  display: inline-block;
}

nav > a, nav div {
  position: relative;
  display: inline-block;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transition: all 0.5s ease-in-out;
}

nav > a:hover, nav div:hover {
  border-top-color: var(--highlight);
}

nav a {
  color: var(--h1);
  display: inline-block;
  padding: 0.3em 0.5em;
  text-align: center;
  min-width: 5em;
}

nav div ul {
  position: absolute;
  left: 0;
  top: 1em;
  display: none;
  background-color: var(--nav);
  box-shadow: 0px 8px 16px 0px var(--shadow);
  list-style: none;
  padding: 0;
  border-radius: 5px;
}

nav div:hover > ul {
  display: block;
  animation: fade 0.5s ease-in-out;
}

nav ul::after {
  content: '';
  position: absolute;
  top: -1.8em;
  left: 0.5em;
  border-width: 1em;
  border-style: solid;
  border-color: transparent transparent var(--nav) transparent;
}

nav li {
  white-space: nowrap;
  position: relative;
}


nav li.arrow::after {
  content: '›';
  position: absolute;
  right: 0.5em;
  top: 0;
  font-size: 1.5em;
  color: var(--h1);
  opacity: 0.5;
  font-weight: bold;
}

nav li:hover {
  background-color: var(--hover);
}

nav li a {
  border: 0;
  display: block;
  text-align: left;
}

nav li ul {
  left: 10em;
  top: 0.5em;
  z-index: 2;
}

nav li ul::after {
  content: '';
  top: 0;
  left: -1.8em;
  border-width: 1em;
  border-style: solid;
  border-color: transparent var(--nav) transparent transparent;
}

nav li:hover ul {
  display: block;
  animation: fade 0.5s ease-in-out;
}

@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
/* ----- /Navigation ----- */

/* ----- Pre/figure ----- */
pre {
  color: #000;
  background-color: var(--pre);
  padding: 1em;
  font-size: 1.2em;
}

pre code {
  display: block;
  font-size: 1em;
  padding: 1em;
  background-color: #f5fffa;
  position: relative;
  /* margin: auto -1em; */
}

pre code::after {
  content: '✔';
  color: #080;
  opacity: 0.6;
  font-size: 2em;
  position: absolute;
  top: 0.1em;
  right: 0.2em;
}

pre code.deprecated {
  background-color: #fff5f5;
}

pre code.deprecated::after {
  content: '✘';
  color: #f00;
}

.error {
  color: #800;
  background-color: #fff5f5;
  display: table;
}

.scroll {
  max-height: 25em;
  overflow: auto;
  scrollbar-width: thin;
}

q {
  font-style: italic;
}

blockquote {
  background-color: var(--quote);
  font-size: 0.9em;
  font-style: italic;
  padding: 0.5em 3.5em 1em;
  mask: url('../image/blob.svg') 0 0/100% 100%;
}

td blockquote {
  margin: 0.5em;
}

cite {
  display: block;
  margin-top: 1em;
  color: var(--dim);
}

cite::before {
  content: '— source: ';
}

kbd {
  color: #333;
  padding: 0.1em 0.4em;
  margin: auto 0.2em;
  background: transparent linear-gradient(to bottom, #eee, #fff 60%);
  border-radius: 4px;
  border: 1px solid #ccc;
  line-height: 1;
  display: inline-block;
  font-family: monospace;
}

.note, .footnote, .warning {
  border: 1px solid var(--border);
  border-left: 4px solid #17f;
  padding: 0.3em 0.5em 0.3em 2em;
  margin-top: 0.5em;
  border-radius: 4px;
  display: table;
  position: relative;
}

.note::before, .footnote::before, .warning::before {
  content: '📌';
  position: absolute;
  top: 0.3em;
  left: 0.8em;
}

.footnote {
  font-size: 0.9em;
  font-style: italic;
}

.warning {
  border-left-color: #f30;
}

.warning::before {
  content: '⚠️';
}

.experimental::after {
  content: '';
  background: url('../image/beaker.svg') no-repeat center / contain;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
  vertical-align: text-bottom;
}

/* ----- Table ----- */
caption, .caption {
  padding: 0.5em 0;
  font-weight: bold;
  text-align: left;
  letter-spacing: 0.2em;
}

.caption {
  margin-bottom: 0;
}

.caption + pre {
  margin-top: 0;
}

.caption span {
  margin-left: 0.5em;
  color: var(--dim);
  font-style: italic;
  font-weight: normal;
  letter-spacing: normal;
}

table, th, td {
  border: 1px solid var(--border);
}

table {
  border-collapse: collapse;
  margin-bottom: 1em;
  min-width: 70%;
}

ul + table,
dl + table {
  margin-top: 1em;
}

th {
  background-color: var(--th);
  text-align: left;
  padding: 0.5em;
}

tbody th {
  font-weight: normal;
  min-width: 10em;
}

th span, .small {
  color: var(--dim);
  font-style: italic;
  font-weight: normal;
  font-size: 0.9em;
}

th sup {
  color: var(--dim);
}

th img {
  width: 1em;
}

tr:nth-child(even) td {
  background-color: var(--td);
}

td {
  padding: 0.5em;
}

td p {
  margin: 0;
  display: block !important;
}

.code td,
td.code {
  font-family: monospace;
  font-size: 1.2em;
  white-space: pre;
}

td .pass,
td .fail {
 font-family: monospace;
 font-size: initial;
}

td.top {
  vertical-align: top;
}

code.small {
  font-size: initial;
}

.slim th:first-of-type,
.slim td {
  padding: 0.2em 0.5em;
}

.pass {
  color: var(--pass);
}

.fail {
  color: #f00;
}

.pass::before {
  content: '✔ ';
}

.fail::before {
  content: '✘ ';
}

.unknown::before {
  content: '❓ ';
}

.dim {
  color: var(--dim);
}