/*
pyodide-mkdocs-theme
Copyleft GNU GPLv3 🄯 2024 Frédéric Zinelli

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.
If not, see <https://www.gnu.org/licenses/>.
*/

/* https://pustelto.com/blog/optimizing-css-for-faster-page-loads/ */

/* NOTE: this file must be loaded BEFORE the one about header-btns (overloading order) */


:root {
  --main-color: 87, 147, 240;
  --main-theme: rgb(var(--main-color));
  --gutter-theme: transparent;
  --background-theme: transparent;
  --code-outline-color: #959595;
}

/* footer */
.md-copyright{
  width: 100%;
  line-height: unset;
}
.md-copyright_pyodide {
  display:flex
}
.md-copyright_pyodide p {
  margin: 0;
}
#pyodide-footer {
  margin-left: auto;
}
.md-social_pyodide {
  display:block;
  justify-content: left;
}
.md-social {
  padding: 0;
  margin: 0;
  margin-left: auto;
}


.md-typeset code,
.md-typeset pre code,
.md-typeset .linenos {
  background-color: var(--background-theme);    /* Override main.css value*/
  border-radius: 0.2em;
  box-shadow: 0px 0px 1px var(--code-outline-color);
  font-size: 0.94em;
  padding: 0 0.3em;
  word-break: break-word;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Override */
.md-typeset div.highlight code,
.md-typeset div.highlight pre code,
.md-typeset div.highlight .linenos {
  box-shadow:none;
}

[dir="ltr"] .md-header__source {
  margin-left: 0;
}
.md-typeset .highlighttable {  /* so that code blocks do not overflow from admonitions */
  overflow: auto;
}

/* Formate "Remarques:" dans l'admonition des solutions comme si c'était un h3,
mais sans lien dessus */
.md-typeset .rem_fake_h3 {
  font-size: 1.25em;
  letter-spacing: -.01em;
  line-height: 1.5;
  font-style: italic;
  font-weight: bold;
  margin-top: 2.5em;
}

.md-typeset h4.doc-heading.fake-h4 {
  margin-top: 5em;
}


/* Extra CSS for mkdocs-enumerate-headings-plugin */
.enumerate-headings-plugin {
  filter: opacity(35%);
}


.vertical{
  display:grid;
  grid-template-columns: 1fr;
}
.horizontal{
  display:grid;
  grid-template-rows: 1fr;
}


/*
------------------------
    Tooltips related
------------------------
*/


.tooltip {
  position: relative;
  /* display: grid;  FIX - py_btn in span not working anymore */
  cursor: pointer;
  align-items: center;
}

.tooltip .tooltiptext code {
  color: white;
}

/*The tooltip itself (bottom position by default)*/
.tooltip .tooltiptext {
  --tip-gap: 5px;
  --rev-tip-gap: calc(-1 * var(--tip-gap));
  --rev-tool_shift: calc(-1 * var(--tool_shift));
  visibility: hidden;
  background-color: var(--main-theme);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 10;
  font-size: 0.8rem;
  padding: 5px 10px;
}
.tooltiptext.bottom {
  top: 100%;
  left: 50%;
  transform: translate(var(--rev-tool_shift), var(--tip-gap));
}
.tooltiptext.right {
  left: 100%;
  top: 50%;
  transform: translate(var(--tip-gap), var(--rev-tool_shift));
}
.tooltiptext.left {
  right: 100%;
  top: 50%;
  transform: translate( calc(2 * var(--rev-tip-gap)), var(--rev-tool_shift));
}
.tooltiptext.top {
  bottom: 100%;
  left: 50%;
  transform: translate(var(--rev-tool_shift), 0);
}


/*tiny tooltip arrow pointing toward the source*/
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--main-theme) transparent;
}
.tooltiptext.bottom::after {
  margin-left: -5px;
  bottom: 100%;
  left: var(--tool_shift);
}
.tooltiptext.top::after {
  margin-left: -5px;
  top: 100%;
  left: var(--tool_shift);
  transform: rotate(180deg) translate(0, -2px);
}
.tooltiptext.left::after {
  margin-top: -4px;
  left: 100%;
  top: var(--tool_shift);
  transform: rotate(90deg) translate(0, -2px);
}
.tooltiptext.right::after {
  margin-top: -4px;
  right: 100%;
  top: var(--tool_shift);
  transform: rotate(-90deg);
}



.tooltip:hover .tooltiptext, .history-box, .history-btn:hover {
  visibility: visible;
  cursor: pointer;
  box-shadow: 2px 3px 5px var(--hover-fg-color,#555);
}


/* Buttons or images holding tooltips messages. */
.tooltip > img, .history-btn, .qcm-builder-btn, .add-qcm-item {
  width: 32px;
  border: 1px solid rgba(85, 119, 196);
  padding: 3px;
  border-radius: 9px;
  background-image: linear-gradient(to bottom, rgb(191, 255, 255), 15%, var(--ide-btn-color, rgba(var(--main-color), 0.8)));
}
.tooltip:hover:not(.p5-btn) > img,
.history-btn:hover,
.qcm-builder-btn:hover {
  text-shadow: 0px 0px rgba(87, 147, 240, 0);
  position: relative;
  left: 1px;
  top: 1px;
  box-shadow: 2px 3px 5px var(--hover-fg-color,#555);
}


#search-btns-left, #search-btns-right {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 5px;
}


.svg-switch-btn > svg { opacity: 80%; }
.svg-switch-btn.deactivated > svg { opacity: 30%; }
.svg-switch-btn:hover > svg { opacity: 55%; }


.py_mk_figure {
  display: flex;
  text-align:center;
  justify-content: center;
  align-content:center;
  flex-direction: column;
  margin:auto;
  min-height:5em;
}
.py_mk_figure>.p5_wrapper, .py_mk_figure>canvas {
  margin: auto;
}

.p5_wrapper {
  display: flex;
  align-items: center;
  align-self: center;
  justify-items: center;
  justify-self: center;
}
.p5_wrapper.p5_right  { flex-direction: row-reverse; }
.p5_wrapper.p5_top    { flex-direction: column; }
.p5_wrapper.p5_bottom { flex-direction: column-reverse; }

.p5_btns_wrapper { padding: 5px; }
.p5_btns_wrapper.p5_left   { flex-direction: column; }
.p5_btns_wrapper.p5_right  { flex-direction: column; }
.p5_btns_wrapper.p5_top    { flex-direction: row; }
.p5_btns_wrapper.p5_bottom { flex-direction: row; }

.tooltip.p5-btn > img {
  width: 24px;
}