/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
  --ifm-code-font-size: 95%;
  
  /* custom navbar height */
  --ifm-navbar-height: 40px;
}

.docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

#__docusaurus {
  min-height: inherit !important;
  height: 100%;
}

html[data-theme="dark"] .docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.3);
}

/** ###########################################################################
 * fix links
 * ############################################################################*/

/* Override non-category links to be horizonally compact */
li > a.menu__link {
  justify-content: flex-start;
}

/** ###########################################################################
 * misc
 * ############################################################################*/

.color-gray {
  color: lightgray;
}

.color-red {
  color: red;
}

.color-orange {
  color: orange;
}

.border-gray {
  border: 1px solid gray;
}

.border-purple {
  border: 1px solid purple;
}

.border-screen {
  border: 1px solid purple;
}

.round {
  border-radius: 50%;
}

.valign-middle {
  vertical-align: middle;
}

.flex {
  display: flex;
  flex: 1;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-center {
  justify-content: space-evenly;
  align-items: center;
}

.flex-center-slim {
  justify-content: center;
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

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

.no-wrap {
  white-space: nowrap;
}

.code-block {
  border-radius: 0 !important;
  margin: 0 !important;
}

.code-block code {
  flex-basis: auto;
  /* default value */
  flex-grow: 1;
  padding: 2px;
  height: 100%;
}

.code-block div,
pre {
  height: 100%;
}

.mr-05 {
  margin-right: 0.5rem;
}

.mb-05 {
  margin-bottom: 0.5rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.m-none {
  margin: 0;
}

.p-2px {
  padding: 2px;
}

.h-full {
  height: 100%;
}

.w-full {
  width: 100%;
}

.w-half {
  width: 50%;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-help {
  cursor: help;
}

.highlight-on-hover:hover {
  color: yellow;
}

/** ###########################################################################
 * grid
 * ############################################################################*/

.grid {
  display: grid;
}

.grid-2-col {
  display: grid;
  grid-template-columns: calc(50% - 2px) calc(50% - 2px);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
}

/* .flex-center {
  justify-content: center;
} */

/** ###########################################################################
 * images
 * ############################################################################*/

/**
 * https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
 */
.img-crisp {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/** ###########################################################################
 * zoomable
 * ############################################################################*/

[data-theme="dark"] .medium-zoom-overlay {
  background-color: var(--ifm-background-color) !important;
}

/** ###########################################################################
 * run-button
 * ############################################################################*/

.run-button a::before {
  display: inline-block;
  width: 28px;
  margin-left: -8px;
  text-align: center;
  /* list-style: url(../img/play.svg) no-repeat; */
}

/* .section1 > div > a::before {
  content: url(../img/play.svg);
} */

/* .run-button > .menu__link {
  color: red;
} */

/**
 * @see https://stackoverflow.com/questions/68412480/how-to-add-icon-to-docusaurus-sidebar-group-or-item/70423077#70423077
 */
[data-theme="dark"] .run-button a::before {
  content: url(/dark/play.svg);
}

[data-theme="light"] .run-button a::before {
  content: url(/light/play.svg);
}

/** ###########################################################################
 * select-trace
 * ############################################################################*/

.sidebar-select-trace a::before {
  display: inline-block;
  width: 28px;
  margin-left: -8px;
  text-align: center;
  /**
   * NOTE: this references image from staticDirectories directly.
   * @see https://github.com/facebook/docusaurus/issues/6208
   */
  content: url(/crosshair_red.svg);
}

/** ###########################################################################
 * call-graph
 * ############################################################################*/

.sidebar-call-graph a::before {
  display: inline-block;
  width: 28px;
  margin-left: -8px;
  text-align: center;
  /* padding-right: 0.5rem; */
}

[data-theme="dark"] .sidebar-call-graph a::before {
  content: url(/dark/tree.svg);
}

[data-theme="light"] .sidebar-call-graph a::before {
  content: url(/light/tree.svg);
}

/** ###########################################################################
 * code deco
 * ############################################################################*/

.sidebar-code-decorations a::before {
  /* padding-right: 0.5rem; */
  display: inline-block;
  width: 28px;
  margin-left: -8px;
  text-align: center;
  /* position: absolute; */

  color: red;
  content: "↱";
}

/** ###########################################################################
 * search
 * ############################################################################*/

.sidebar-search a::before {
  /* padding-right: 0.5rem; */
  display: inline-block;
  width: 28px;
  margin-left: -8px;
  text-align: center;

  content: "🔍";
}

/** ###########################################################################
 * navbar
 * ############################################################################*/

.navbar {
  /* height: 40px; */
  padding-top: 0;
  padding-bottom: 4px;
}

.navbar__brand {
  /* margin-top: -6px; */
}

.nav-icon svg {
  /* get rid of the default*/
  display: none;
}

.nav-icon span::before,
.nav-icon span::after {
  /* hackfix: vertical alignment is messed up (probably because it does not care about image height) */
  vertical-align: sub;
}

.btn-dbux-marketplace span::before {
  content: "";
  display: inline-block;
  height: 1rem;
  width: 1rem;
  background-image: url(/img/vscode-icon.png);
  background-size: 1rem 1rem;
}

.btn-dbux-marketplace span::after {
  display: inline-block;
  /**
   * @see https://vsmarketplacebadge.apphb.com
   */
  content: url(https://vsmarketplacebadge.apphb.com/version-short/Domi.dbux-code.svg);
}

.btn-dbux-discord span::after {
  display: inline-block;
  content: url(https://img.shields.io/discord/743765518116454432.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2);
}

/** ###########################################################################
 * custom
 * ############################################################################*/

button.active {
  background-color: var(--ifm-color-primary-dark);
  border-color: var(--ifm-color-primary-dark);
}

.space-between {
  justify-content: space-between;
}

.full-width {
  width: 100%;
}

.width-fit {
  width: fit-content;
}

.no-margin {
  margin: 0 !important;
}

.no-padding {
  padding: 0 !important;
}

.no-horizontal-padding {
  padding-left: 0;
  padding-right: 0;
}

.ellipsis-10 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
}

.ellipsis-20 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20rem;
}

.of-hidden {
  overflow: hidden;
}

.space-1 {
  padding: 0.5rem;
  display: inline-block;
}
