/*
 * Common rules start here
 */

:root:not([data-bs-theme=dark]) {
  /* Colors */

  --system-red: rgb(255, 56, 60);
  --system-orange: rgb(255, 141, 40);
  --system-yellow: rgb(255, 204, 0);
  --system-green: rgb(52, 199, 89);
  --system-mint: rgb(0, 200, 179);
  --system-teal: rgb(0, 195, 208);
  --system-cyan: rgb(0, 192, 232);
  --system-blue: rgb(0, 136, 255);
  --system-indigo: rgb(88, 86, 214);
  --system-purple: rgb(97, 85, 245);
  --system-pink: rgb(255, 45, 85);
  --system-brown: rgb(172, 127, 94);

  --system-gray0: rgb(72, 72, 77);
  --system-gray1: rgb(142, 142, 147);
  --system-gray2: rgb(174, 174, 178);
  --system-gray3: rgb(199, 199, 204);
  --system-gray4: rgb(209, 209, 214);
  --system-gray5: rgb(229, 229, 234);
  --system-gray6: rgb(242, 242, 247);
  --system-gray7: rgb(249, 249, 255);
  --system-gray8: rgb(255, 255, 255);

  --h2-color: rgb(189, 0, 0);
  --h3-color: rgb(159, 103, 34);;
  --h3-color-strong: rgb(173, 81, 0);
  --h4-color: rgb(29, 80, 163);
  --h4-color-strong: rgb(10, 80, 144);
  --h4-color-strong-writable: rgb(97, 29, 163);

  --color-filter: filter: brightness(0) saturate(100%) invert(22%) sepia(7%) saturate(669%) hue-rotate(201deg) brightness(89%) contrast(97%);
  --example-background-color: rgba(235, 235, 255, 0.644);
  --playground-console-background: rgb(0, 0, 0, 0.02);
}

:root:not([data-bs-theme=light]) {
  /* Colors */

  --system-red: rgb(255, 66, 69);
  --system-orange: rgb(255, 146, 48);
  --system-yellow: rgb(255, 214, 0);
  --system-green: rgb(48, 209, 88);
  --system-mint: rgb(0, 218, 195);
  --system-teal: rgb(0, 210, 224);
  --system-cyan: rgb(60, 211, 254);
  --system-blue: rgb(0, 145, 255);
  --system-indigo: rgb(107, 93, 255);
  --system-purple: rgb(219, 52, 242);
  --system-pink: rgb(255, 55, 95);
  --system-brown: rgb(183, 138, 102);

  --system-gray0: rgb(204, 204, 209);
  --system-gray1: rgb(142, 142, 147);
  --system-gray2: rgb(99, 99, 102);
  --system-gray3: rgb(72, 72, 74);
  --system-gray4: rgb(58, 58, 60);
  --system-gray5: rgb(44, 44, 46);
  --system-gray6: rgb(28, 28, 30);
  --system-gray7: rgb(21, 21, 23);
  --system-gray8: rgb(14, 14, 16);

  --nav-border-color: rgba(158, 158, 158, 0.17);

  --h2-color: rgb(228, 228, 93);
  --h3-color: rgb(185, 137, 79);
  --h3-color-strong: rgb(232, 201, 133);
  --h4-color: rgb(60, 107, 184);
  --h4-color-strong: rgb(130, 173, 241);
  --h4-color-strong-writable: rgb(175, 206, 255);

  --color-filter: filter: brightness(0) saturate(100%) invert(78%) sepia(0%) saturate(301%) hue-rotate(279deg) brightness(92%) contrast(89%);
  --example-background-color: rgba(0, 0, 0, 0.471);
  --playground-console-background: rgba(0, 0, 0, 0.2);
}

@media all and not (max-width: 1199px) {
  .post-tail-wrapper > .nav-wrapper {
    display: none;
  }
}

html {
  overflow: auto;
}

/* rouge console */

/* rest of text */
.language-console .highlight pre,
.language-console .highlight .o {
  @extend .na;
}

/* $ */
.language-console .highlight .gp {
  @extend .k;
}

/* some parameter */
.language-console .highlight .nb {
  @extend .mf;
}

/* tocbot navigation */
ul.is-collapsible {
  max-height: unset;
}

/* nav solo trigger and popover */

#nav-solo-trigger {
  @extend #toc-solo-trigger;
}

#nav-solo-trigger .label {
  @extend .label;
}

#nav-popup {
  @extend #toc-popup;
}

#nav-popup-content {
  @extend #toc-popup-content;
}

/* append your custom style below */

.red {
  color: var(--system-red) !important;
}

.green {
  color: var(--system-green) !important;
}

.blue {
  color: var(--system-blue) !important;
}

.yellow {
  color: var(--system-yellow) !important;
}

.bold {
  font-weight: bold;
}

#topbar-title {
  text-transform: uppercase;
}

li.nav-item:has(> a[href="/x_ite/tags/"]) {
  display: none;
}

.nav-wrapper {
  margin-top: 4rem;
  border-left: 1px solid var(--nav-border-color);
  transition: top 0.2s ease-in-out;
  -webkit-animation: fade-up 0.8s;
  animation: fade-up 0.8s;
}

.nav-wrapper a.active {
  font-weight: bold;
}

.content h1 {
  color: var(--link-color);
  font-weight: bold;
}

.content h2 {
  color: var(--h2-color);
}

.content h3 {
  color: var(--h3-color);
}

.content h3 strong {
  color: var(--h3-color-strong);
}

.content h4 {
  color: var(--h4-color);
}

.content h4 strong {
  color: var(--h4-color-strong);
}

.content h4.writable strong {
  color: var(--h4-color-strong-writable);
}

.content h5 {
  font-weight: bold;
}

.content dl dt {
  color: var(--h3-color-strong);
}

.content dl dt strong {
  color: var(--h3-color);
}

.content details {
  box-shadow: var(--language-border-color) 0 0 0 1px;
  border-radius: 10px;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
}

.content details summary {
  font-weight: bold;
}

.content details[open] summary {
  margin-bottom: .5rem;
}

.content .example-icon {
  margin: 0 0.2rem;
}

.post-tail-wrapper .nav-wrapper {
  border: 1px solid var(--nav-border-color);
  border-radius: 10px;
}

.post-tail-wrapper .nav-wrapper h2 {
  margin-top: 0.5rem;
  font-size: 1rem;
}

.post-tail-wrapper .nav-wrapper a {
  font-size: var(--bs-body-font-size);
}

.clear {
  clear: both;
}

small, .small {
  font-size: 75%;
}

.content x3d-canvas,
.content iframe {
  display: inline-block;
  border: none;
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/* xr-button */

x3d-canvas.buttons-tr::part(buttons) {
  top: 10px;
  right: -16px;
  bottom: unset;
  left: unset;
}

x3d-canvas.buttons-cr::part(buttons) {
  top: 50%;
  right: -16px;
  bottom: unset;
  left: unset;
}

x3d-canvas.buttons-br::part(buttons) {
  top: unset;
  right: -16px;
  bottom: 10px;
  left: unset;
}

x3d-canvas.buttons-bl::part(buttons) {
  flex-direction: row-reverse;
  padding: 0px 16px 0px 24px;
  top: unset;
  right: unset;
  bottom: 10px;
  left: -16px;
}

x3d-canvas.buttons-tl::part(buttons) {
  flex-direction: row-reverse;
  padding: 0px 16px 0px 24px;
  top: 10px;
  right: unset;
  bottom: unset;
  left: -16px;
}

/* */

span[data-label-text="X3D" i],
span[data-label-text="VRML" i] {
  text-transform: uppercase;
}

.table-wrapper > table tbody tr td,
.table-wrapper > table thead th {
  white-space: initial;
}

.table-wrapper > table.browser-compatibility {
  width: 100%;
  table-layout: fixed;
}

.badge-link {
  cursor: pointer;
}

.badge-link img {
  display: inline;
}

input[type=checkbox] {
  cursor: pointer;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  mask-image: url(../img/icons/xmark.svg);
  mask-repeat: no-repeat;
  mask-size: 16px 16px;
  width: 16px;
  height: 16px;
  background-color: var(--text-color);
}

input[type=checkbox]:checked {
  mask-image: url(../img/icons/check.svg);
  background-color: var(--system-green);
}

input[type=button].button,
input[type=file].button {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
  background: none;
  border: 1px solid var(--text-color);
  border-radius: 1rem;
  padding: 0 0.7rem 0.5rem;
  height: 2rem;
  color: var(--text-color);
}

input.button::file-selector-button {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  background: none;
  outline: none;
  border: none;
  padding-bottom: 0.5rem;
}

/* Special Safari only Selector */
_::-webkit-full-page-media, _:future, :root input.button::file-selector-button {
  top: -2px;
}

input[type=button].button:hover,
input[type=file].button:hover {
  border: 1px solid var(--system-gray0);
  color: var(--system-gray0);
}

input[type=button].button:focus,
input[type=file].button:focus {
  border: 1px solid var(--system-green);
  color: var(--system-green);
}

input[type=""],
input[type=text],
input[type=number] {
  border: none;
  border-radius: 1rem;
  height: 2rem;
  padding: 0 1rem;
  background: var(--system-gray8);
}

input[type=""]:focus,
input[type=text]:focus,
input[type=number]:focus {
  outline: 1px solid var(--system-green);
}

input[type=range].range {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
  top: -2px;
  margin-left: 0.3rem;
  background: var(--text-color);
  height: 4px;
}

input[type=range].range:hover {
  background: var(--system-gray0);
}

input[type=range].range:focus {
  background: var(--system-green);
}

/* Must have a selector for each browser separately. */
input[type=range].range::-webkit-slider-thumb {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: var(--text-color);
  height: 0.8rem;
  width: 0.8rem;
  border-radius: 50%;
}

input[type=range].range:hover::-webkit-slider-thumb {
  background: var(--system-gray0);
}

/* Must have a selector for each browser separately. */
input[type=range].range::-moz-range-thumb {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: var(--text-color);
  height: 0.8rem;
  width: 0.8rem;
  border-radius: 50%;
}

input[type=range].range:hover::-moz-range-thumb {
  background: var(--system-gray0);
}

button {
  cursor: pointer;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  background: none;
  padding: 0;
  color: var(--text-color);
}

button:hover {
  color: var(--system-gray0);
}

button i {
  cursor: pointer;
  padding-right: 0.5rem;
}

button:hover,
button i:hover {
  color: var(--system-gray0);
}

button.selected {
  color: var(--system-green);
}

select.select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  display: block;
  outline: none;
  background: none;
  border: 1px solid var(--text-color);
  border-radius: 1rem;
  margin: 0.3rem 0;
  padding: 0 0.7rem 0.06rem 0.7rem;
  width: 100%;
  height: 2rem;
  color: var(--text-color);
  font-size: inherit;
  font-family: inherit;
}

select.select:hover {
  border: 1px solid var(--system-gray0);
  color: var(--system-gray0);
}

select.select:focus {
  border: 1px solid var(--system-green);
  color: var(--system-green);
}

select.select option {
  color: var(--text-color);
  background: var(--main-bg);
}

/* Patreon Link  */

.content .patreon {
  display: block;
  border: 1px solid !important;
  border-radius: .625rem;
  padding: .5rem;
  text-align: center;
}

.content .sponsors img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #4a4a4a;
}

/* Documentation */

.content .fields {
  font-size: 0.85rem;
}

/* Laboratory */

table.slim-table tbody tr {
  padding: 0px;
}

table.slim-table tbody tr td {
  padding: 1px;
}

table.slim-table tbody tr td:has(img) {
  line-height: 0;
}

/*
 * Website specify rules start here
 */

/* teaser */

.content .teaser {
    aspect-ratio: 16 / 5;
}

.content .teaser::part(surface) {
  cursor: default !important;
}

.content .mascot-wrapper {
  position: relative;
}

.content .mascot {
  pointer-events: none;
  aspect-ratio: 780 / 280;
  position: absolute;
  transform: translateY(-70%);
}

/* examples grid */

.examples {
  display: grid;
  grid-template-columns: repeat(7, auto);
  gap: 2px;
}

@media all and (max-width: 576px) {
  .examples {
    gap: 1px;
  }
}

.examples a:hover {
  outline: 1px solid #d2603a;
}

/* example overlay */

.example {
  z-index: 100;
  position: fixed;
  width: min-content;
  bottom: 1rem;
  right: 1rem;
  background: var(--example-background-color);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--nav-border-color);
  box-shadow: 0px 0px 10px black;
}

.example .header a {
  padding-left: 0.4rem;
  color: var(--text-muted-color);
}

.example .header:hover a {
  color: var(--text-color);
}

.example .header a:hover,
.example a:hover {
  color: #d2603a;
}

.example p {
  margin-top: 0;
  margin-bottom: 0;
}

.example .toolbar {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: var(--example-background-color);
  overflow: hidden;
}

.example .toolbar > * {
   cursor: pointer;
   padding: 0 3px;
}

.example .toolbar > span:hover {
  color: var(--system-gray0);
}

.example .toolbar > span.selected {
   color: var(--system-green);
}

.example .toolbar > span.dot::before {
   content: "·";
   margin: 0 3px 0 4px;
   color: var(--text-color);
}

.example .toolbar > span.separator {
   border-left: 1px solid var(--text-color);
   margin: 0 0 0 5px;
}

.example .toolbar > span.separator + span.separator {
  display: none;
}

.example .footer > * {
  padding: 0 3px;
}

.example .footer > .dot::before {
  content: "·";
  margin: 0 3px 0 4px;
}

.example .footer a {
  cursor: pointer;
}

.example x3d-canvas {
  display: block;
  width: 53vw;
  height: auto;
  aspect-ratio: 16 / 9;
}

@media all and (max-width: 849px) {
  .example {
    bottom: 4px;
  }

  .example x3d-canvas {
    width: 88vw;
  }
}

@media all and (max-width: 576px) {
  .example {
    left: 15px;
    right: 15px;
    width: auto;
  }

  .example x3d-canvas {
    width: 100%;
  }
}

.example .fa-circle-xmark {
  position: absolute;
  display: block;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 10px;
  left: -24px;
  top: -20px;
  cursor: pointer;
  color: var(--system-gray8);
}

.example .fa-circle-xmark:hover {
  color: var(--main-bg);
}

.example .fa-circle-xmark::after {
  content: " ";
  z-index: -1;
  position: relative;
  display: block;
  border: 9px solid var(--text-color);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  left: -1px;
  top: -17px;
  background: var(--text-color);
}

.example-links {
  list-style-type: none;
  padding: 0px;
}

.example-links li {
  display: inline-block;
}

.example-links li:not(:first-child)::before {
  content: "·";
  margin: 0 7px 0 4px;
}

/* monaco editor */

.monaco-editor,
.monaco-editor * {
  all: revert;
}

/* Platform link  */

.platform {
  display: inline-block;
  margin-right: 0;
  border: 1px solid !important;
  border-radius: .625rem;
  padding: 1rem;
  text-align: center;
  font-size: 1.54rem;
}

.platform i {
  font-size: 3rem;
}