Add styles based on the documentation tool

src/flyout.css

@@ -155,3 +155,12 @@ small a {
   text-decoration: none;
   color: var(--readthedocs-flyout-link-color, rgb(42, 128, 185));
 }
+
+/* Specific styles */
+.mkdocs-material {
+  --addons-flyout-font-size: 0.6rem;
+}
+
+.sphinx-furo {
+  --addons-flyout-font-size: 0.75rem;
+}

src/flyout.js

@@ -8,7 +8,13 @@ import { classMap } from "lit/directives/class-map.js";
 import { default as objectPath } from "object-path";
 
 import styleSheet from "./flyout.css";
-import { AddonBase, addUtmParameters, getLinkWithFilename } from "./utils";
+import {
+  AddonBase,
+  addUtmParameters,
+  getLinkWithFilename,
+  docTool,
+} from "./utils";
+import { SPHINX, MKDOCS_MATERIAL } from "./constants";
 import {
   EVENT_READTHEDOCS_SEARCH_SHOW,
   EVENT_READTHEDOCS_FLYOUT_HIDE,
@@ -20,6 +26,7 @@ export class FlyoutElement extends LitElement {
 
   static properties = {
     config: { state: true },
+    classes: { state: true, type: Object },
     opened: { type: Boolean },
     floating: { type: Boolean },
     position: { type: String },
@@ -31,6 +38,7 @@ export class FlyoutElement extends LitElement {
     super();
 
     this.config = null;
+    this.classes = {};
     this.opened = false;
     this.floating = true;
     this.position = "bottom-right";
@@ -67,6 +75,22 @@ export class FlyoutElement extends LitElement {
     }
   };
 
+  firstUpdated() {
+    console.log("Flyout first update.");
+    const doctool = docTool.documentationTool;
+    if (doctool === MKDOCS_MATERIAL) {
+      console.log("MkDocs Material custom style.");
+      this.classes["mkdocs-material"] = true;
+    } else if (doctool == SPHINX && docTool.isSphinxFuroLikeTheme()) {
+      console.log("Sphinx Furo custom style.");
+      this.classes["sphinx-furo"] = true;
+    }
+
+    // FIXME: I don't understand why this doesn't trigger an update
+    // automatically, since `this.classes` is a reactive property.
+    this.requestUpdate();
+  }
+
   renderHeader() {
     library.add(faCodeBranch);
     library.add(faLanguage);
@@ -310,11 +334,12 @@ export class FlyoutElement extends LitElement {
       return nothing;
     }
 
-    const classes = { floating: this.floating, container: true };
-    classes[this.position] = true;
+    Object.assign(this.classes, { floating: this.floating, container: true });
+    this.classes[this.position] = true;
+    console.log(this.classes);
 
     return html`
-      <div class=${classMap(classes)}>
+      <div class=${classMap(this.classes)}>
         ${this.renderHeader()}
         <main class=${classMap({ closed: !this.opened })}>
           ${this.renderLanguages()} ${this.renderVersions()}