/* Material Symbols font with selected icons */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200,1,200&icon_names=account_tree,bolt,build,category,deployed_code");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons+Round");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons+Sharp");

@font-face {
  font-family: "CupertinoIcons";
  src: url("../fonts/CupertinoIcons.ttf") format("truetype");
  font-display: swap;
}

/* Hide the original label text */
code.doc-symbol { font-size: 0; }

/* Show only the icon */
code.doc-symbol::before {
  font-family: "Material Symbols Outlined";
  font-variation-settings: 'FILL' 1, 'GRAD' 200, 'opsz' 24, 'wght' 200;
  font-size: .82rem;
  position: relative;
  top: .25em;
}

.doc-heading .doc-symbol::before {
  font-size: 1.0rem;
  top: .21em;
}

code.doc-symbol-class::before {
  content: "category";
}

code.doc-symbol-attribute::before {
  content: "build";
}

code.doc-symbol-event::before {
  content: "bolt";
}

code.doc-symbol-method::before {
  content: "deployed_code";
}

/* Overrides */
[data-md-color-scheme="default"] {
  --doc-symbol-class-fg-color: #f0a502;
  --doc-symbol-attribute-fg-color: #0b8dd9; /* ae106f */
  --doc-symbol-attribute-bg-color: #9500721a;

  --doc-symbol-event-fg-color: #f8aa01;
  --doc-symbol-event-bg-color: #e5ff001a;
}

[data-md-color-scheme="slate"] {
  --doc-symbol-class-fg-color: #f0a502;
  --doc-symbol-attribute-fg-color: #0b8dd9; /* ae106f */
  --doc-symbol-attribute-bg-color: #9500721a;

  --doc-symbol-event-fg-color: #f8aa01;
  --doc-symbol-event-bg-color: #e5ff001a;
}

code.doc-symbol-event,
a code.doc-symbol-event {
  color: var(--doc-symbol-event-fg-color);
  background-color: var(--doc-symbol-event-bg-color);
}

/* Overrides */

/* Command symbol */
:root, :host,
    /* Light mode */
[data-md-color-scheme="default"] {
    --doc-symbol-command-fg-color: #9538001;
    --doc-symbol-command-bg-color: #9538001a;
}

/* Dark mode */
[data-md-color-scheme="slate"] {
    --doc-symbol-command-fg-color: #ffa6571;
    --doc-symbol-command-bg-color: #ffa6571a;
}

code.doc-symbol-command,
a code.doc-symbol-command {
    color: var(--doc-symbol-command-fg-color);
    background-color: var(--doc-symbol-command-bg-color);
}

code.doc-symbol-command::after {
    content: "cmd";
}

/* Command symbol */

/* Icon previews */
.flet-icon-preview {
  align-items: center;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.45rem;
  display: inline-flex;
  font-size: 1.45rem;
  justify-content: center;
  line-height: 1;
  margin: 0.1rem 0 0.9rem;
  min-height: 2.2rem;
  min-width: 2.2rem;
  padding: 0.3rem;
}

.flet-icon-preview-material {
  font-family: "Material Icons";
  font-feature-settings: "liga";
}

.flet-icon-preview-material-outlined {
  font-family: "Material Icons Outlined";
  font-feature-settings: "liga";
}

.flet-icon-preview-material-rounded {
  font-family: "Material Icons Round";
  font-feature-settings: "liga";
}

.flet-icon-preview-material-sharp {
  font-family: "Material Icons Sharp";
  font-feature-settings: "liga";
}

.flet-icon-preview-cupertino {
  font-family: "CupertinoIcons";
}

.flet-icon-preview-missing {
  color: var(--md-default-fg-color--light);
  display: inline-block;
  font-size: 0.85rem;
  margin: 0.1rem 0 0.9rem;
}
/* Icon previews */