@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/*-------------------------------------------------------------------------
 * Connect FontAwesome file with FontAwesome family name.  Supplements
 * fontawesome.min.css.  Without this, the codes like `fa-github` don't
 # work in the Furo theme as they did with RTD theme.
 *-------------------------------------------------------------------------*/
@font-face {
  font-family: FontAwesome;
  src: url("../fonts/fontawesome-webfont.woff2") format("woff2"),
    url("../fonts/fontawesome-webfont.woff") format("woff");
}

.fa {
  font-family: FontAwesome, "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
}

/*-------------------------------------------------------------------------
 * Colors
 *-------------------------------------------------------------------------*/

body,
body[data-theme="light"] {
  --color-link: #000;
  --color-sidebar-link-text--top-level: #000;
  --color-sidebar-item-background--hover: #f0f0f0;
  --color-toc-item-text--active: #000;
  --color-toc-item-text: #000;
  --color-sidebar-background: transparent;
}

@media (prefers-color-scheme: dark) {
  body {
    --color-link: #fff;
    --color-sidebar-link-text--top-level: #fff;
    --color-sidebar-item-background--hover: #222;
    --color-toc-item-text--active: #fff;
    --color-toc-item-text: #fff;
    --color-sidebar-background: transparent;
  }
}

body[data-theme="dark"] {
  --color-link: #fff;
  --color-sidebar-link-text--top-level: #fff;
  --color-sidebar-item-background--hover: #222;
  --color-toc-item-text--active: #fff;
  --color-toc-item-text: #fff;
  --color-sidebar-background: transparent;
}

/*-------------------------------------------------------------------------
 * Element Overrides
 *-------------------------------------------------------------------------*/
section + section {
  margin-top: 4rem;
}

table,
th,
td {
  border: 1px solid #bbb;
  padding: 10px;
}

span.pre {
  padding-right: 8px;
}

span.pre {
  padding-right: 8px;
}

span.pre:first-child {
  padding-right: 0px;
}

code.sig-name {
  /*margin-left:8px;*/
}

.sidebar-drawer {
  width: fit-content;
  padding: 1rem;
}

.sidebar-tree label .icon {
  opacity: 0.25;
}

.main {
  justify-content: center;
  gap: 6rem;
  padding: 3rem;
}

.content {
  padding: 0;
  width: 100%;
  max-width: 696px;
}

.no-toc {
  display: block;
}

/*-------------------------------------------------------------------------
 * `home-img` class is (at this writing) exclusively used for the large
 * buttons on the landing page.  The rules below provide their hover
 * movement behavior.
 *-------------------------------------------------------------------------
 */
.home-img {
  width: 32%;
  transition: transform 0.3s ease-out;
}

.home-img:hover {
  transform: translate(0, -10px);
}

.sidebar-logo {
  max-width: 120px;
  align-self: left;
}

/*-------------------------------------------------------------------------
 * Version Dropdown Styling
 *-------------------------------------------------------------------------*/
#version_dropdown {
  background-color: var(--color-sidebar-background);
  color: var(--color-foreground-primary);
  margin: 4px 0;
  width: 150px;
  border-radius: 5px;
}

/*-------------------------------------------------------------------------
 * `lv_example` Sections
 *-------------------------------------------------------------------------
 * The below contains a documented example to show the relationships of
 * the rules below to their selected elements within the example itself.
 *-------------------------------------------------------------------------
 * `lv_example` sections are the output of `./docs/src/_ext/lv_example.py`
 * custom Sphinx extension.  These are generated when the `.rst` source
 * file contains a pattern like this:
 *
 *     A very simple *hello world* label    // Sphinx+docutils (.rst parser) generates
 *     ---------------------------------    //   the <section> element and title from this.
 *
 *     .. lv_example:: get_started/lv_example_get_started_1  // `lv_example.py` generates the
 *       :language: c                                        //   rest of the <section> content
 *                                                           //   below from this.
 *-------------------------------------------------------------------------
 * Visible layout consists of a <section> element containing:
 * - <h3> element with title
 * - <div> element containing live running web-assembly example of LVGL UI
 * - <div> element containing [> Show C Code]  [G View on GitHub] buttons
 *     and the C code below them.
 *
 * <section id="a-very-simple-hello-world-label">   // Contains whole example, buttons and code.
 *   <h3>A very simple <em>hello world</em> label...</h3>  // The title itself.
 *   <div class="lv-example-container">             // Container for running example.
 *     <div class="lv-example" data-real-src="..." data-is-loaded="true">
 *       <iframe src="..."></iframe>                // Running web-assembly example.
 *     </div>
 *     <div class="lv-example-description"></div>   // Whole area to the right of running example.
 *   </div>
 *   <div class="toggle docutils container">        // Contains buttons + code;
 *     <div class="header docutils container" ...>  // Contains buttons + code; `open` class is added to this to element "open" the code <div> element.
 *       <p>C code &nbsp;</p>                       // [C code] "button"; JS code in `page.html` template arms this "button" with its events when `$(document).ready` event fires.
 *       <a class="lv-example-link-button" ...>     // [View on GitHub] "button"; provides hyperlink to the example code on GitHub.
 *         <i class="fa fa-github"></i>             // "GitHub Cat" icon
 *         &nbsp;View on GitHub                     // text of "button"
 *       </a>
 *     </div>
 *     <div class="highlight-c notranslate" ...>
 *       <div class="highlight">
 *         <pre>
 *           ...                                    // Highlighted C code
 *         </pre>
 *       </div>
 *     </div>
 *   </div>
 *   <hr>
 * </section>
 */
.toggle .header {
  display: block;
  clear: both;
  cursor: pointer;
  font-weight: bold;
}

/* Selects <div class="header docutils container" ...> element.
 * Places "disclosure triangle" icon + non-breaking space to its left.*/
.toggle .header:before {
  font-family: FontAwesome, "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
  content: "\f0da \00a0 Show "; /* \f0da = "closed" disclosure triangle; \f00a0 = non-breaking space */
  display: inline-block;
  font-size: 1.1em;
}

/* Selects <div class="header docutils container" ...> element when it also contains
 * `open` class, which class is toggled by JS code in `page.html` template. */
.toggle .header.open:before {
  content: "\f0d7 \00a0 Hide "; /* \f0d7 = "open" disclosure triangle; \f00a0 = non-breaking space */
}

/* Selects the [> C code] "button". */
.header p {
  display: inline-block;
  font-size: 1.1em;
  margin-bottom: 8px;
}

/* Selects web-assembly example <div> and child <iframe> elements. */
.lv-example,
.lv-example > iframe {
  border: none;
  outline: none;
  padding: 0;
  display: block;
  width: 320px;
  height: 240px;
  flex: none;
  position: relative;
}

/* Selects only the <iframe> elements. */
.lv-example > iframe {
  position: absolute;
  top: 0;
  left: 0;
}

/* Selects outer example <div> container elements. */
.lv-example-container {
  display: flex;
  padding-bottom: 16px;
}

/* Selects <div class="lv-example-description"></div>
 * which is the whole area to the right of running example. */
.lv-example-description {
  flex: 1 1 auto;
  margin-left: 1rem;
}

/* Selects [View on GitHub] "button". */
.lv-example-link-button {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #2980b9;
  color: white;
  margin: 0 4px;
}

/* Selects [View on GitHub] "button" when in `:hover` state. */
.lv-example-link-button:hover {
  color: white;
  filter: brightness(120%);
}

/* Selects [View on GitHub] "button" when in `:visited` state. */
.lv-example-link-button:visited {
  color: white;
}

/*-------------------------------------------------------------------------
 * The `lv-api-...` classes do not select anything at this writing (29-Mar-2025).
 *-------------------------------------------------------------------------
 */
.lv-api-expansion-button {
  padding: 4px;
}

/* There are no elements that these select at this writing (29-Mar-2025). */
.lv-api-expansion-button::before {
  font-family: FontAwesome, "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
  display: inline-block;
  font-size: 1.1em;
  cursor: pointer;
}

/* There are no elements that these select at this writing (29-Mar-2025). */
.unexpanded .lv-api-expansion-button::before {
  content: "\f0da \00a0";
}

.expanded .lv-api-expansion-button::before {
  content: "\f0d7 \00a0";
}

/* This hides the <dd> elements that contain a code-element's documentation
 * when it has class "unexpanded".  "expanded" and "unexpanded" classes in the
 * <dl> elements are added and managed dynamically via code in `custom.js`. */
dl.cpp.unexpanded dd {
  display: none;
}

/* Selects all <div> elements with "body" class.
 * There are no elements that this selects at this writing (29-Mar-2025). */
div.body {
  min-width: 360px;
  max-width: 1920px;
}

/* Selects CPP-expression content <span> elements generated from
 * :cpp:expr:`...` Interpreted-Text-Role expressions in the `.rst` source files. */
.cpp-expr {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", Courier, monospace;
  color: #e74c3c;
  padding: 2px 5px;
  border: 1px solid #e1e4e5;
  font-size: 75%;
}

/*-------------------------------------------------------------------------
 * Custom Banners...
 *
 * ...are inserted between these two elements at the top of the page:
<a class="skip-to-content muted-link" href="#furo-main-content">Skip to content</a>

<div class="lv-custom-banner-list">
  <p class="lv-custom-banner highest-priority">
     Highest-priority announcement!
  </p>
  <p class="lv-custom-banner high-priority">
     We are hiring a Front-End Developer in our Editor Team (Electron, React, Node.JS)!
  </p>
  <a href="specified_url" class="lv-custom-banner normal-priority">
    <p>
      Normal-priority announcement.
    </p>
  </a>
</div>

<div class="page">
  ...page content...
 *-------------------------------------------------------------------------*/
.lv-custom-banner-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: auto;
  border-top: 4px solid darkgreen;
}

.lv-custom-banner {
  box-sizing: border-box;
  padding: 0.5rem;
  min-width: 100%;
  text-align: center;
  border-bottom: 4px solid darkgreen;
  margin: 0;
}

/* Hyperlinks within banners (when banner label had a hyperlink in it) */
.lv-custom-banner a {
  color: var(--color-announcement-text);
  text-decoration-color: var(--color-announcement-text);
}

.lv-custom-banner a:hover {
  color: var(--color-announcement-text);
  text-decoration-color: var(--color-link--hover);
}

/* Paragraphs within banner HTML (when Banners text contains <p> elements). */
.lv-custom-banner p {
  margin: 0;
}

/* Banner priorities */
.lv-custom-banner.highest-priority {
  background-image: linear-gradient(45deg, black, darkred);
  color: white;
  padding: 18px 3em;
}

.lv-custom-banner.high-priority {
  background-image: linear-gradient(45deg, black, darkgreen);
  color: white;
  padding: 14px 3em;
}

.lv-custom-banner.normal-priority {
  background-image: linear-gradient(45deg, black, #5e5e5e);
  color: white;
  padding: 10px 3em;
}

.lv-custom-banner.low-priority {
  background-image: linear-gradient(45deg, black, darkblue);
  color: white;
  padding: 8px 3em;
}

.lv-custom-banner.lowest-priority {
  background-image: linear-gradient(45deg, black, var(--color-sidebar-background));
  color: var(--color-content-foreground);
  padding: 8px 3em;
}

/*-------------------------------------------------------------------------
 * Field Lists
 *-------------------------------------------------------------------------*/
.field-list ul {
  margin: 0;
  padding-left: 1em;
}

.field-list p {
  margin: 0;
}

dl.field-list {
  display: grid;
  grid-template-columns: auto minmax(70%, 95%);
  margin-bottom: 24px; /* Up from 16 */
}

dl.field-list > dt {
  font-weight: 600;
  word-break: break-word;
  padding-left: 1em;
  padding-right: 1em;
  margin-bottom: 0.15em;
  display: inline-grid;
  grid-template-columns: max-content auto;
}

dl.field-list > dd {
  margin: 0;
}