/* Compiled Kakano theme */
/*

# Kakano Theme for Obsidian

Principles:
- **Strong color**
  Users should be able to easily select a color for each vault and have the theme generate shades and gradients automatically.
- **Help new users**
  Obsidian can be intimidating for new users. I think a good way to help with this is to clarify which parts of the window are user content (white background, strong contrast) and which are navigation and other controls (colored background, lower contrast).
- **Standardise controls**
  Obsidian’s exuberant plugin scene is fantastic, but it also means that there’s a lot of inconsistency in the design of controls and modals – even between core plugins. I’ve tried to find ways to make similar controls have similar appearance. Likewise, I’ve aimed to follow conventions from the underlying OS, such as having close controls on the left on macOS.
- **Be opinionated enough**
  I’d like Kakano to provide a great user experience by default without the user having to make any choices beyond their base color. It has settings, but I want each one to be there because different users genuinely have different needs, not just because I failed to make a decision.

*/
/* #region Plugin compatibility */

/* @plugins
core:
- audio-recorder
- backlink
- bases
- bookmarks
- command-palette
- daily-notes
- file-explorer
- file-recovery
- footnotes-view
- global-search
- graph
- note-composer
- outgoing-link
- outline
- page-preview
- properties-view
- random-note
- slash-commands
- starred
- switcher
- sync
- tag-pane
- templates
- word-count
- workspaces
community:
- calendar
- dataview
- folder-note-plugin
- nldates-obsidian
- obsidian-columns
- obsidian-jira-issue
- obsidian-kanban
- obsidian-map-view
- obsidian-style-settings
- obsidian-tasks-plugin
- oz-clear-unused-images
- recent-files-obsidian
- table-editor-obsidian
*/

/* #endregion */
/* #region Style Settings plugin config */

/* @settings

name: Kakano Theme
id: kakano-style
settings:
  -
    id: heading-baseColor
    title: Base color
    type: heading
    level: 1
    collapsed: false
  -
    id: infoText-baseColor
    description: "The Kakano theme uses a base color for each vault, and generates different shades and gradients from it. You can either select from one of the preset colors, or specify an exact color."
    type: info-text
    markdown: true
  -
    id: theme-setting-predefinedBaseColor
    title: 'Preset base color'
    description: 'If you just want a quick color, choose one of these.'
    type: class-select
    allowEmpty: true
    default: theme-setting-baseColorPreset-kahurangi
    options:
      -
        label: 'Use accent color'
        value: theme-setting-baseColorPreset-accent
      -
        label: 'Whero – Red'
        value: theme-setting-baseColorPreset-whero
      -
        label: 'Karaka – Orange'
        value: theme-setting-baseColorPreset-karaka
      -
        label: 'Kōwhai – Yellow'
        value: theme-setting-baseColorPreset-koowhai
      -
        label: 'Kākāriki – Green'
        value: theme-setting-baseColorPreset-kaakaariki
      -
        label: 'Kārikiōrangi – Cyan'
        value: theme-setting-baseColorPreset-kaarikioorangi
      -
        label: 'Kahurangi – Blue'
        value: theme-setting-baseColorPreset-kahurangi
      -
        label: 'Waiporoporo – Purple'
        value: theme-setting-baseColorPreset-waiporoporo
      -
        label: 'Māwhero – Pink'
        value: theme-setting-baseColorPreset-maawhero
      -
        label: 'Mangu – Black'
        value: theme-setting-baseColorPreset-mangu
      -
        label: 'Mā – White'
        value: theme-setting-baseColorPreset-maa
      -
        label: 'Kiwikiwi – Grey'
        value: theme-setting-baseColorPreset-kiwikiwi
  -
    id: base
    title: Exact base color
    description: 'Set an exact base color. Make sure "Preset base color" is empty, and click Save to apply.'
    type: variable-color
    format: hsl-split
    default: '#2176B0'
  -
    id: heading-notes
    title: Notes
    type: heading
    level: 1
    collapsed: false
  -
    id: heading-notes-appearance
    title: Appearance
    type: heading
    level: 2
    collapsed: true
  -
    id: theme-setting-lightModeNoteBg
    title: 'Light mode note background'
    description: 'In light mode, note backgrounds can be full white (default) or near white with a slight tint of the base color.'
    type: class-select
    allowEmpty: false
    default: theme-setting-lightModeNoteBgFullWhite
    options:
      -
        label: 'Near white'
        value: theme-setting-lightModeNoteBgNearWhite
      -
        label: 'Full white'
        value: theme-setting-lightModeNoteBgFullWhite
  -
    id: theme-value-darkModeNoteBg
    title: 'Dark mode note background'
    description: 'In dark mode, note backgrounds can be near black (default) or full black. Near black is a bit easier on the eyes. Full black will save a little energy on OLED screens which will switch back pixels completely off. And some people just like the way it looks.'
    type: class-select
    allowEmpty: false
    default: theme-value-darkModeNoteBgNearBlack
    options:
      -
        label: 'Near black (less eye strain)'
        value: theme-value-darkModeNoteBgNearBlack
      -
        label: 'Full black (OLED screen will switch pixels off)'
        value: theme-value-darkModeNoteBgFullBlack
  -
    id: theme-setting-distinguishNonContentTabs
    title: "Distinguish non-editable tabs"
    description: "Most tabs have content created by you (e.g. notes, canvases, kanban charts) but some aren't directly editable (e.g. graphs, calendars, maps). When this setting is on, the non-editable tabs are shaded differently when inactive."
    default: true
    type: class-toggle
  -
    id: theme-setting-wrapTabs
    title: "Wrap Tabs"
    description: "EXPERIMENTAL If there are more tabs than fit in a single row, allow them to wrap to multiple rows."
    default: false
    type: class-toggle
  -
    id: setting-properties-position
    title: 'Properties position'
    description: 'Place properties before or after your main note content. Note that this only applies to Live Preview mode.'
    type: class-select
    allowEmpty: false
    default: 'setting-properties-position-above'
    options:
      -
        label: 'Above main note content'
        value: 'setting-properties-position-above'
      -
        label: 'Below main note content'
        value: 'setting-properties-position-below'
  -
    id: theme-setting-embeddedNoteTitleVisibility
    title: 'Embedded note titles'
    description: "When a note is embedded in another note, show or hide the source note's title."
    type: class-select
    allowEmpty: false
    default: theme-setting-embeddedNoteTitleVisibilityHover
    options:
      -
        label: 'Always hidden'
        value: theme-setting-embeddedNoteTitleVisibilityHide
      -
        label: 'Visible on hover'
        value: theme-setting-embeddedNoteTitleVisibilityHover
      -
        label: 'Always visible'
        value: theme-setting-embeddedNoteTitleVisibilityShow
  -
    id: theme-setting-stickyEmbeddedLinks
    title: 'Embedded links scroll position'
    description: 'EXPERIMENTAL Embedded links can be placed at the below your content (so you scroll to the bottom to see them), or pinned so they stay visible as you scroll.'
    type: class-select
    allowEmpty: false
    default: 'theme-setting-stickyEmbeddedLinks-off'
    options:
      -
        label: 'Place below content (scroll down to view)'
        value: 'theme-setting-stickyEmbeddedLinks-off'
      -
        label: 'Pin (stay visible while content scrolls)'
        value: 'theme-setting-stickyEmbeddedLinks-on'
  -
    id: heading-typographySettings
    title: Typography
    type: heading
    level: 2
    collapsed: true
  -
    id: theme-setting-differentiateBulletLevels
    title: 'Style nested bullet levels differently'
    description: "Show different bullets for different levels of nesting"
    type: class-toggle
    default: true
  -
    id: heading-HeadingSettings
    title: Headings
    type: heading
    level: 3
    collapsed: false
  -
    id: theme-setting-headingFont
    title: Heading font
    description: Font used for headings. Leave empty to use the same font as body text, as defined by `Text font` in `Appearance`.
    type: variable-text
    default: ""
    quotes: true
  -
    id: theme-setting-headingScaleFactor
    title: 'Heading scale factor – desktop/tablet'
    description: 'Scale factor for heading sizes. Larger numbers will increase the difference between different heading sizes, smaller numbers will decrease the difference.'
    type: class-select
    allowEmpty: false
    default: theme-setting-headingScaleFactor1point2
    options:
      -
        label: '1.067 - Minor Second'
        value: theme-setting-headingScaleFactor1point067
      -
        label: '1.125 - Major Second'
        value: theme-setting-headingScaleFactor1point125
      -
        label: '1.200 - Minor Third'
        value: theme-setting-headingScaleFactor1point2
      -
        label: '1.250 - Major Third'
        value: theme-setting-headingScaleFactor1point25
      -
        label: '1.333 - Perfect Fourth'
        value: theme-setting-headingScaleFactor1point333
      -
        label: '1.414 - Augmented Fourth'
        value: theme-setting-headingScaleFactor1point414
      -
        label: '1.500 - Perfect Fifth'
        value: theme-setting-headingScaleFactor1point5
      -
        label: '1.618 - Golden Ratio'
        value: theme-setting-headingScaleFactor1point618
  -
    id: theme-setting-headingScaleFactorPhone
    title: 'Heading scale factor – phone'
    description: "Scale factor for heading sizes on smaller phone screens. With space at a premium, you'll usually want this to be smaller than the desktop scale factor"
    type: class-select
    allowEmpty: false
    default: theme-setting-headingScaleFactorPhone1point125
    options:
      -
        label: '1.067 - Minor Second'
        value: theme-setting-headingScaleFactorPhone1point067
      -
        label: '1.125 - Major Second'
        value: theme-setting-headingScaleFactorPhone1point125
      -
        label: '1.200 - Minor Third'
        value: theme-setting-headingScaleFactorPhone1point2
      -
        label: '1.250 - Major Third'
        value: theme-setting-headingScaleFactorPhone1point25
      -
        label: '1.333 - Perfect Fourth'
        value: theme-setting-headingScaleFactorPhone1point333
      -
        label: '1.414 - Augmented Fourth'
        value: theme-setting-headingScaleFactorPhone1point414
      -
        label: '1.500 - Perfect Fifth'
        value: theme-setting-headingScaleFactorPhone1point5
      -
        label: '1.618 - Golden Ratio'
        value: theme-setting-headingScaleFactorPhone1point618
  -
    id: heading-lineWidthSettings
    title: Line length
    type: heading
    level: 3
    collapsed: false
  -
    id: infoText-lineWidth
    description: "Maximum line length in characters. 50-75 characters is often recommended for readability in languages with Latin scripts. 15-35 characters may be better for Chinese, Japanese and Korean characters.
    <br><br>
    These settings apply when the **Readable line length** setting is enabled in **Editor**"
    type: info-text
    markdown: true
  -
    id: theme-setting-lineWidth
    title: 'Line length for Live Preview and Source Mode'
    description: ''
    type: variable-number-slider
    default: 60
    min: 10
    max: 120
    step: 5
  -
    id: theme-setting-lineWidthReadingView
    title: 'Line length for Reading View'
    description: ''
    type: variable-number-slider
    default: 60
    min: 10
    max: 120
    step: 5
  -
    id: heading-editing
    title: Editing
    type: heading
    level: 2
    collapsed: true
  -
    id: infoText-editing
    description: "These settings apply to the **Live Preview** and **Source** modes, but not to the **Reading** mode."
    type: info-text
    markdown: true
  -
    id: theme-setting-highlightActiveLine
    title: 'Highlight active line'
    description: "Show a background color behind the active line while editing."
    type: class-toggle
  -
    id: theme-setting-codeBlockLineNumbers
    title: 'Line numbers in code blocks'
    description: "Show line numbers in code blocks"
    type: class-toggle
    default: true
  -
    id: heading-layout
    title: Layout
    type: heading
    level: 2
    collapsed: true
  -
    id: theme-setting-centerImages
    title: 'Center images'
    description: "Center images horizontally"
    type: class-toggle
    default: true
  -
    id: infoText-centerImages
    description: "Images can also be centered individually e.g. `![[image_file_name.jpg|center]]`"
    type: info-text
    markdown: true
  -
    id: theme-setting-wideTables
    title: 'Wide tables'
    description: "Allow wide tables to extend left and right beyond the margins for body text."
    type: class-toggle
    default: true
  -
    id: heading-ui
    title: User Interface
    type: heading
    level: 1
    collapsed: false
  -
    id: heading-ui-background
    title: Background
    type: heading
    level: 2
    collapsed: true
  -
    id: theme-value-gradientContrast
    title: 'Background gradient contrast'
    description: 'Degree of contrast for background gradients. Set to zero for a flat background color.'
    type: variable-number-slider
    default: 0.2
    min: 0
    max: 1
    step: 0.1
  -
    id: heading-customGradient
    title: Custom Gradient
    type: heading
    level: 3
    collapsed: true
  -
    id: theme-setting-customGradient
    title: 'Use a custom gradient for the background'
    description: "Kakano normally provides a smooth gradient background using the same hue as the base color. This setting overrides that so you can have a gradient with different hues top and bottom. Note that the colors you set here won't be used directly: they'll be lightened for light mode and darkened for dark mode."
    type: class-toggle
  -
    id: theme-color-customGradientBaseTop
    title: Custom Gradient Top
    description: 'Base color for the top of the gradient'
    type: variable-color
    format: hsl
    default: '#ff0000'
  -
    id: theme-color-customGradientBaseBottom
    title: Custom Gradient Bottom
    description: 'Base color for the bottom of the gradient'
    type: variable-color
    format: hsl
    default: '#0000ff'
  -
    id: heading-layout
    title: Layout
    type: heading
    level: 2
    collapsed: true
  -
    id: theme-setting-fullWidthStatusBar
    title: 'Full width status bar'
    description: "EXPERIMENTAL If you have many items in your status bar, you may find that it overflows onto the sidebars. This setting will push the main app workspace up so the status bar can use the full window width."
    type: class-toggle
  -
    id: heading-icons
    title: Icons
    type: heading
    level: 2
    collapsed: true
  -
    id: theme-setting-enableIconsInSettings
    title: 'Enable icons in Settings'
    description: "Obsidian normally shows icons beside settings groups. If you find that distracting, this setting allows you to hide them."
    type: class-toggle
    default: true
  -
    id: theme-setting-enableIconsInMenus
    title: 'Enable icons in non-native Menus'
    description: "Obsidian normally shows icons for menu items. This setting does not apply if Native Menus are enabled."
    type: class-toggle
    default: true
  -
    id: heading-mobile
    title: Mobile
    type: heading
    level: 1
    collapsed: true
  -
    id: theme-setting-mobileHorizontalPadding
    title: 'Mobile horizontal spacing'
    description: "Width of space to the left and right of the note content. Set to zero if you'd like the note to extend to the full width, 0.5 or 1 if you'd like to see your background gradient."
    type: variable-number-slider
    default: 0.5
    min: 0
    max: 1
    step: 0.25
  -
    id: theme-setting-mobileCardsUI
    title: 'Mobile cards UI'
    description: "EXPERIMENTAL Scale the main workspace down when there's a modal in the foreground, creating a 3D cards effect. Currently unfinished, but you can see it when you open a prompt."
    type: class-toggle
  -
    id: heading-compatibility
    title: Compatibility
    type: heading
    level: 1
    collapsed: false
  -
    id: heading-compatibility-builtin
    title: Built-in feature Toggles
    type: heading
    level: 2
    collapsed: true
  -
    id: theme-setting-enableBuiltInAlternativeCheckboxes
    title: 'Enable built-in alternative checkboxes'
    description: "Kakano provides styles for some common alternative checkbox states. Different themes have built-in support for different sets of alternative checkboxes, so some users may prefer to use their own CSS snippets that work across multiple themes. If you'd like to do this, you can disable Kakano's built-in alternative checkboxes to ensure that they don't clas with the snippet."
    type: class-toggle
    default: true
  -
    id: infoText-alternativeCheckboxesReferenceSet
    description: "> [!info]
    > The [Alternative Checkboxes Reference Set project](https://github.com/damiankorcz/Alternative-Checkboxes-Reference-Set) is working on standardising alternative checkboxes."
    type: info-text
    markdown: true
  -
    id: theme-setting-enableImageAdjustmentWithAltText
    title: 'Enable image adjustment with alt text'
    description: "With this setting enabled, Kakano recognises keywords in alt text to position images left/right/center and round corners. None of these are crucial functionality, so if you need to use alt text for its real purpose of accessibility, you can disable this setting."
    type: class-toggle
    default: true
  -
    id: heading-communityPlugins
    title: Community Plugins Toggles
    type: heading
    level: 2
    collapsed: true
  -
    id: infoText-communityPlugins
    description: "By default, Kakano changes the appearance of many community plugins to provide a more consistent appearance. If you prefer the standard appearance for a plugin you can disable Kakano's changes."
    type: info-text
    markdown: true
  -
    id: theme-setting-overrideAdvancedTables
    title: 'Advanced Tables'
    type: class-toggle
    default: true
  -
    id: theme-setting-overrideCalendar
    title: 'Calendar'
    type: class-toggle
    default: true
  -
    id: theme-setting-overrideClearUnusedImages
    title: 'Clear Unused Images'
    type: class-toggle
    default: true
  -
    id: theme-setting-overrideColumns
    title: 'Columns'
    type: class-toggle
    default: true
  -
    id: theme-setting-overrideDataview
    title: 'Dataview'
    type: class-toggle
    default: true
  -
    id: theme-setting-overrideExcalidraw
    title: 'Excalidraw'
    type: class-toggle
    default: true
  -
    id: theme-setting-overrideFolderNote
    title: 'Folder Note'
    type: class-toggle
    default: true
  -
    id: theme-setting-overrideJiraIssue
    title: 'Jira Issue'
    type: class-toggle
    default: true
  -
    id: theme-setting-overrideKanban
    title: 'Kanban'
    type: class-toggle
    default: true
  -
    id: theme-setting-overrideMapView
    title: 'Map View'
    type: class-toggle
    default: true
  -
    id: theme-setting-overridePluginUpdateTracker
    title: 'Plugin Update Tracker'
    type: class-toggle
    default: true
  -
    id: theme-setting-overrideRecentFiles
    title: 'Recent Files'
    type: class-toggle
    default: true
  -
    id: theme-setting-overrideTasks
    title: 'Tasks'
    type: class-toggle
    default: true
  -
    id: theme-setting-overrideStyleSettings
    title: 'Style Settings'
    type: class-toggle
    default: true
*/

/* #endregion */
/* #region Custom properties */
/* #region   General */

body {
  --background-input: light-dark(var(--theme-color-baseTransparent12), var(--theme-color-darkenTransparent06));
  --background-modifier-message: var(--theme-color-noticeBg);
  --background-secondary: transparent;
  --bases-cards-shadow: var(--shadow-s);
  --bases-cards-shadow-hover: var(--shadow-s);
  --callout-padding: var(--theme-padding-block);
  --checkbox-border-color-hover: var(--interactive-accent-hover);
  --checkbox-border-color: var(--interactive-accent);
  --checkbox-color: var(--interactive-accent);
  --clickable-icon-radius: 0.25rem;
  --code-background: light-dark(
    var(--theme-color-darkenTransparent06),
    var(--theme-color-lightenTransparent06)
  );
  --code-comment: light-dark(
    var(--theme-color-darkenTransparent50),
    var(--theme-color-lightenTransparent50)
  );
  --code-normal: var(--text-normal);

  --divider-width: 0;
  --embed-background: var(--theme-color-baseTransparent12);
  --embed-border-bottom: none;
  --embed-border-left: none;
  --embed-border-right: none;
  --embed-border-top: none;
  --embed-padding: 1em;

  /* Using 0.625rem here as approximately 1ch. We can't use ch because we want line width to be constant across font sizes, so it's the same for headings and body text. */
  --file-line-width: calc(0.625rem * var(--theme-setting-lineWidth));

  --file-margins: 0 2em;
  --flair-background: var(--theme-color-base);
  --flair-color: var(--text-on-accent);
  --font-ui-smaller: 0.8rem;
  --header-height: calc(var(--icon-size) + 1rem);
  --heading-spacing: 0.67em;
  --input-border-width: 2px;
  --input-radius: 5px;
  --list-marker-color: var(--text-normal);
  --list-bullet-radius: 50%;
  --list-bullet-size: 0.25em;
  --list-bullet-transform: none;
  --list-marker-color-collapsed: var(--list-marker-color);
  --list-indent: 1.5em;
  --metadata-divider-width: 0;
  --metadata-gap: 0.5em;
  --metadata-property-box-shadow-hover: none;
  --modal-border-color: black;
  --modal-border-width: 0;
  --modal-height: 85vh;
  --modal-max-height: calc(
    100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - 2em
  );
  --modal-max-width: calc(
    100vw - var(--safe-area-inset-left) - var(--safe-area-inset-right) - 2em
  );
  --modal-width: 65rem;
  --nav-item-background-hover: var(--theme-color-baseTransparent75);
  --nav-item-children-margin-start: calc(
    var(--size-4-4) / 2 - var(--nav-indentation-guide-width) / 2
  );
  --nav-item-children-padding-start: calc(
    1em - var(--nav-indentation-guide-width) / 2
  );
  --nav-item-color-highlighted: var(--nav-item-hover);
  --nav-item-padding: 0.375em 0.75em 0.375em 0.75em;
  --nav-item-parent-padding: 0.25em 0 0.25em 0;
  --p-spacing: 1em;
  --pill-focus-left-adjust: 0;
  --pill-focus-width: 100%;
  --prompt-border-color: transparent;
  --prompt-border-width: 0;
  --radius-s: 0.25rem;
  --radius-m: 0.5rem;
  --radius-l: 0.75rem;
  --radius-xl: 1rem;
  --ribbon-background-collapsed: transparent;
  --ribbon-background: transparent;
  --ribbon-width: 3em;
  --setting-group-heading-color: var(--text-normal);
  --setting-group-heading-size: var(--font-ui-medium);
  --setting-group-heading-weight: var(--font-semibold);
  --setting-items-background: none;
  --setting-items-padding: 0;
  --setting-items-radius: 0;
  --setting-items-border-width: 0;
  --setting-items-border-color: var(--background-modifier-border);
  --sidebar-markdown-font-size: calc(
    var(--font-text-size) * var(--theme-value-sidebarFontScalingFactor)
  );
  --slider-track-background: var(--theme-color-baseTransparent50);
  --status-bar-background: var(--theme-color-gradientTop);
  --status-bar-text-color: var(--text-normal);
  --tab-container-background: transparent;
  --tab-curve: calc(var(--tab-radius) * 0.5);
  --tab-outline-width: 0;
  --tab-radius-active: 0.25em;
  --tab-radius: 0.25em;
  --tab-switcher-preview-background-shadow: var(--shadow-l);
  --tab-switcher-preview-shadow: none;
  --tab-switcher-preview-shadow-active: none;
  --tab-text-color-focused-highlighted: var(--theme-color-base);
  --tab-text-color-focused-active-current: var(--text-normal);
  --tag-weight: 400;
  --text-on-accent: var(--theme-color-baseLightened95);
  --text-muted: color-mix(in srgb, var(--text-normal), transparent 30%);
  --titlebar-background-focused: transparent;
  --titlebar-background: transparent;
  --vault-profile-color-hover: var(--theme-color-controlHover);

  /* Other new variables for this theme */
  --theme-color-dragTarget: var(--theme-color-baseTransparent50);
  --theme-color-dragTargetBg: var(--theme-color-baseTransparent25);
  --theme-color-graphViewBg: transparent;
  --theme-color-tabBgInactiveHover: var(--theme-color-baseTransparent75);
  --theme-color-tableHeaderBg: var(--theme-color-baseTransparent12);
  --theme-color-dataviewEmpty: light-dark(
    var(--theme-color-baseLightened40),
    var(--theme-color-baseDarkened40)
  );
  --theme-color-card: var(--nav-item-color);
  --theme-color-cardBg: var(--background-primary);
  --theme-color-cardHover: var(--nav-item-color-hover);
  --theme-color-cardBgHover: var(--theme-color-base);
  --theme-setting-lineWidth: 60;
  --theme-spacing-mobileHorizontalSpacing: calc(
    var(--theme-setting-mobileHorizontalPadding) * 1rem
  );
  --theme-length-fullBorderRadius: 9999px;
  --theme-length-checkboxBorderWidth: 1px;
  --theme-length-closeButtonWidth: 1.5rem;
  --theme-length-collapseIndicatorSize: 1.5rem;
  --theme-length-controlSetSpacing: 0.5rem;
  --theme-length-radiusXS: 0.125rem;
  --theme-length-statusBarHeight: 2rem; /* Additional radius size alongside built-in radius-x */
  --theme-value-sidebarFontScalingFactor: 0.8;

  --theme-length-cardMinWidth: 8em;
  --theme-length-cardMaxWidth: 1fr;
  --theme-grid-cardSet: repeat(
    auto-fit,
    minmax(var(--theme-length-cardMinWidth), var(--theme-length-cardMaxWidth))
  );
  --theme-length-cardImageHeight: 25em;
  --theme-cardImageFit: contain;
  --theme-cardAspectRatio: auto;

  --theme-padding-block: var(--theme-padding-blockVertical)
    var(--theme-padding-blockHorizontal); /* Used for callouts, embeds etc. */
  --theme-padding-blockHorizontal: 1.5em;
  --theme-padding-blockVertical: 0.75em;
}
/* #endregion */
/* #region   Overrides for colour presets */
/* Tweak some colours for presets, to improve contrast. Ideally I'd liek to do this for use-selected colours too, but the browser engine doesn't yet support contrast-color() */
body.css-settings-manager.theme-setting-baseColorPreset-maa {
  --text-on-accent: black;
  --nav-item-color-active: black;
  --icon-color: black;
  --icon-color-focused: black;
  --theme-color-controlLightweightActive: black;
  --theme-color-controlActive: black;
  --theme-color-controlHover: black;
  --theme-color-controlTextHover: black;
  --vault-profile-color-hover: black;
  --nav-item-color-hover: black;
  --interactive-accent: var(--theme-color-baseDarkened25);
  --icon-color-focused: black;
}
body.css-settings-manager.theme-dark.theme-setting-baseColorPreset-maa {
  --icon-color: white;
}
body.css-settings-manager.theme-dark.theme-setting-baseColorPreset-mangu {
  --text-on-accent: white;
  --nav-item-color-active: white;
  --icon-color: white;
  --icon-color-focused: white;
  --theme-color-controlLightweightActive: white;
  --theme-color-controlActive: white;
  --theme-color-controlHover: white;
  --vault-profile-color-hover: white;
  --nav-item-color-hover: white;
  --interactive-accent: var(--theme-color-baseLightened25);
}
/* #endregion */
/* #region   Colors */
/* #region     Base color */
body {
  /* Base all theme colours off these */
  /* The base HSL variables will be overridden by Style Settings if installed, otherwise they'll use the accent colour. */
  --base-h: var(--accent-h);
  --base-s: var(--accent-s);
  --base-l: var(--accent-l);

  /* The base color, derived from either the accent or the Style Settings base color. Note that this may be overridden by one of the preset colours below. */
  --theme-color-base: hsl(var(--base-h), var(--base-s), var(--base-l));
}
/* #endregion */
/* #region     Preset base colours, if users don't want to set an exact colour.  */
body.css-settings-manager.theme-setting-baseColorPreset-accent {
  --base-h: var(--accent-h);
  --base-s: var(--accent-s);
  --base-l: var(--accent-l);
}
body.css-settings-manager.theme-setting-baseColorPreset-whero {
  --base-h: 0;
  --base-s: 65%;
  --base-l: 50%;
}
body.css-settings-manager.theme-setting-baseColorPreset-karaka {
  --base-h: 30;
  --base-s: 80%;
  --base-l: 50%;
}
body.css-settings-manager.theme-setting-baseColorPreset-koowhai {
  --base-h: 52;
  --base-s: 70%;
  --base-l: 45%;
}
body.css-settings-manager.theme-setting-baseColorPreset-kaakaariki {
  --base-h: 90;
  --base-s: 65%;
  --base-l: 39%;
}
body.css-settings-manager.theme-setting-baseColorPreset-kaarikioorangi {
  --base-h: 175;
  --base-s: 57%;
  --base-l: 40%;
}
body.css-settings-manager.theme-setting-baseColorPreset-kahurangi {
  --base-h: 215;
  --base-s: 67%;
  --base-l: 45%;
}
body.css-settings-manager.theme-setting-baseColorPreset-waiporoporo {
  --base-h: 275;
  --base-s: 50%;
  --base-l: 40%;
}
body.css-settings-manager.theme-setting-baseColorPreset-maawhero {
  --base-h: 335;
  --base-s: 60%;
  --base-l: 60%;
}
body.css-settings-manager.theme-setting-baseColorPreset-mangu {
  --base-h: 240;
  --base-s: 5%;
  --base-l: 20%;
}
body.css-settings-manager.theme-setting-baseColorPreset-maa {
  --base-h: 50;
  --base-s: 0%;
  --base-l: 95%;
}
body.css-settings-manager.theme-setting-baseColorPreset-kiwikiwi {
  --base-h: 40;
  --base-s: 5%;
  --base-l: 50%;
}
/* #endregion */
/* #region   Base colour variants */

body {
  --theme-color-baseLightened95: color-mix(
    in srgb,
    var(--theme-color-base),
    white calc(100% * 0.95)
  );
  --theme-color-baseLightened85: color-mix(
    in srgb,
    var(--theme-color-base),
    white calc(100% * 0.85)
  );
  --theme-color-baseLightened80: color-mix(
    in srgb,
    var(--theme-color-base),
    white calc(100% * 0.8)
  );
  --theme-color-baseLightened70: color-mix(
    in srgb,
    var(--theme-color-base),
    white calc(100% * 0.7)
  );
  --theme-color-baseLightened60: color-mix(
    in srgb,
    var(--theme-color-base),
    white calc(100% * 0.6)
  );
  --theme-color-baseLightened40: color-mix(
    in srgb,
    var(--theme-color-base),
    white calc(100% * 0.4)
  );
  --theme-color-baseLightened25: color-mix(
    in srgb,
    var(--theme-color-base),
    white calc(100% * 0.25)
  );
  --theme-color-baseLightened12: color-mix(
    in srgb,
    var(--theme-color-base),
    white calc(100% * 0.125)
  );

  --theme-color-baseDarkened12: color-mix(
    in srgb,
    var(--theme-color-base),
    black calc(100% * 0.125)
  );
  --theme-color-baseDarkened25: color-mix(
    in srgb,
    var(--theme-color-base),
    black calc(100% * 0.25)
  );
  --theme-color-baseDarkened40: color-mix(
    in srgb,
    var(--theme-color-base),
    black calc(100% * 0.4)
  );
  --theme-color-baseDarkened60: color-mix(
    in srgb,
    var(--theme-color-base),
    black calc(100% * 0.6)
  );
  --theme-color-baseDarkened70: color-mix(
    in srgb,
    var(--theme-color-base),
    black calc(100% * 0.7)
  );
  --theme-color-baseDarkened80: color-mix(
    in srgb,
    var(--theme-color-base),
    black calc(100% * 0.8)
  );
  --theme-color-baseDarkened85: color-mix(
    in srgb,
    var(--theme-color-base),
    black calc(100% * 0.85)
  );
  --theme-color-baseDarkened90: color-mix(
    in srgb,
    var(--theme-color-base),
    black calc(100% * 0.9)
  );

  /* Base color with transparency */
  --theme-color-baseTransparent75: hsl(
    from var(--theme-color-base) h s l / 0.75
  );
  --theme-color-baseTransparent50: hsl(
    from var(--theme-color-base) h s l / 0.5
  );
  --theme-color-baseTransparent35: hsl(
    from var(--theme-color-base) h s l / 0.35
  );
  --theme-color-baseTransparent25: hsl(
    from var(--theme-color-base) h s l / 0.25
  );
  --theme-color-baseTransparent12: hsl(
    from var(--theme-color-base) h s l / 0.12
  );
  --theme-color-baseTransparent06: hsl(
    from var(--theme-color-base) h s l / 0.06
  );
  --theme-color-lightenTransparent75: hsl(from white h s l / 0.75);
  --theme-color-lightenTransparent50: hsl(from white h s l / 0.5);
  --theme-color-lightenTransparent25: hsl(from white h s l / 0.25);
  --theme-color-lightenTransparent12: hsl(from white h s l / 0.12);
  --theme-color-lightenTransparent06: hsl(from white h s l / 0.06);
  --theme-color-darkenTransparent75: hsl(from black h s l / 0.75);
  --theme-color-darkenTransparent50: hsl(from black h s l / 0.5);
  --theme-color-darkenTransparent25: hsl(from black h s l / 0.25);
  --theme-color-darkenTransparent12: hsl(from black h s l / 0.12);
  --theme-color-darkenTransparent06: hsl(from black h s l / 0.06);
/* #endregion */
/* #region   Gradients */
  --theme-gradient-topToBottom: linear-gradient(
    0deg,
    var(--theme-color-gradientTop) 0%,
    var(--theme-color-gradientBottom) 100%
  );
  --theme-gradient-bottomToTop: linear-gradient(
    0deg,
    var(--theme-color-gradientBottom) 0%,
    var(--theme-color-gradientTop) 100%
  );
  --theme-gradient-cardSet: linear-gradient(
    0deg,
    var(--theme-color-gradientCardSetBottom) 0%,
    var(--theme-color-gradientCardSetTop) 100%
  );
  --theme-gradient-cardSetGenerated: linear-gradient(
    0deg,
    var(--theme-color-gradientCardSetGeneratedBottom) 0%,
    var(--theme-color-gradientCardSetGeneratedTop) 100%
  );
  --theme-gradient-DarkenedTopToBottom: linear-gradient(
    0deg,
    var(--theme-color-gradientDarkenedTop) 0%,
    var(--theme-color-gradientDarkenedBottom) 100%
  );
  /* 0 for flat colour with no gradient. 1 for extreme gradient. Default to 0.2, */
  --theme-value-gradientContrast: 0.2;
}
/* #endregion */
/* #region   Hues derived from base color */
.theme-light,
.theme-dark {
  --color-red: hsl(from var(--theme-color-base) 356 s l);
  --color-orange: hsl(from var(--theme-color-base) 27 s l);
  --color-yellow: hsl(from var(--theme-color-base) 57 s l);
  --color-green: hsl(from var(--theme-color-base) 124 s l);
  --color-cyan: hsl(from var(--theme-color-base) 179 s l);
  --color-blue: hsl(from var(--theme-color-base) 219 s l);
  --color-purple: hsl(from var(--theme-color-base) 253 s l);
  --color-pink: hsl(from var(--theme-color-base) 331 s l);

  --theme-color-redDarkened: hsl(
    from var(--color-red) h calc(s * 1.5) calc(l * 0.5)
  );
  --theme-color-redLightened: hsl(
    from var(--color-red) h calc(s * 1.5) calc(l * 1.5)
  );
  --theme-color-orangeDarkened: hsl(
    from var(--color-orange) h calc(s * 1.5) calc(l * 0.5)
  );
  --theme-color-orangeLightened: hsl(
    from var(--color-orange) h calc(s * 1.5) calc(l * 1.5)
  );
  --theme-color-yellowDarkened: hsl(
    from var(--color-yellow) h calc(s * 1.5) calc(l * 0.5)
  );
  --theme-color-yellowLightened: hsl(
    from var(--color-yellow) h calc(s * 1.5) calc(l * 1.5)
  );
  --theme-color-greenDarkened: hsl(
    from var(--color-green) h calc(s * 1.5) calc(l * 0.5)
  );
  --theme-color-greenLightened: hsl(
    from var(--color-green) h calc(s * 1.5) calc(l * 1.5)
  );
  --theme-color-cyanDarkened: hsl(
    from var(--color-cyan) h calc(s * 1.5) calc(l * 0.5)
  );
  --theme-color-cyanLightened: hsl(
    from var(--color-cyan) h calc(s * 1.5) calc(l * 1.5)
  );
  --theme-color-blueDarkened: hsl(
    from var(--color-blue) h calc(s * 1.5) calc(l * 0.5)
  );
  --theme-color-blueLightened: hsl(
    from var(--color-blue) h calc(s * 1.5) calc(l * 1.5)
  );
  --theme-color-purpleDarkened: hsl(
    from var(--color-purple) h calc(s * 1.5) calc(l * 0.5)
  );
  --theme-color-purpleLightened: hsl(
    from var(--color-purple) h calc(s * 1.5) calc(l * 1.5)
  );
  --theme-color-pinkDarkened: hsl(
    from var(--color-pink) h calc(s * 1.5) calc(l * 0.5)
  );
  --theme-color-pinkLightened: hsl(
    from var(--color-pink) h calc(s * 1.5) calc(l * 1.5)
  );

  --theme-color-redTransparent25: hsl(from var(--color-red) h s l / 0.25);
  --theme-color-redTransparent75: hsl(from var(--color-red) h s l / 0.75);
  --theme-color-orangeTransparent25: hsl(from var(--color-orange) h s l / 0.25);
  --theme-color-orangeTransparent75: hsl(from var(--color-orange) h s l / 0.75);
  --theme-color-yellowTransparent25: hsl(from var(--color-yellow) h s l / 0.25);
  --theme-color-yellowTransparent75: hsl(from var(--color-yellow) h s l / 0.75);
  --theme-color-greenTransparent25: hsl(from var(--color-green) h s l / 0.25);
  --theme-color-greenTransparent75: hsl(from var(--color-green) h s l / 0.75);
}
/* #endregion */
/* #region   Light mode */
.theme-light,
.theme-light .theme-dark {
  /* Using `.theme-light .theme-dark` here because the Minimal Theme Settings plugin inserts `.theme-dark` into the DOM for the ribbon and left sidebar for `Light mode background contrast -> High contrast` even when the Minimal Theme isn't active. As lots of people will have Minimal Theme Settings enabled while using Kakano, I override it here. */

  /* Built-in variables */
  --background-modifier-active-hover-alt: var(--theme-color-baseLightened25);
  --background-modifier-active-hover: var(--theme-color-baseLightened60);
  --background-modifier-border-focus: var(--theme-color-base);
  --background-modifier-border: var(--theme-color-baseLightened25);
  --background-modifier-hover: var(--theme-color-base);
  --blockquote-border-color: var(--theme-color-baseLightened80);
  --caret-color: hsl(var(--accent-h), 150%, 50%);
  --collapse-icon-color: var(--theme-color-base);
  --collapse-icon-color-collapsed: var(--theme-color-base);
  --empty-pane-color: var(--theme-color-baseDarkened70);
  --icon-color-focused: white;
  --icon-color-hover: hsl(
    var(--base-h),
    calc(var(--base-s) * 0.2),
    calc(var(--base-l) * 1.5)
  );
  --icon-color-hover: white;
  --icon-color: var(--theme-color-base);
  --modal-background: var(--theme-color-baseLightened80);
  --nav-collapse-icon-color-collapsed: var(--theme-color-baseTransparent75);
  --nav-collapse-icon-color: var(--theme-color-baseTransparent75);
  --nav-indentation-guide-color: var(--theme-color-baseTransparent25);
  --nav-item-background-active: var(--theme-color-base);
  --nav-item-background-selected: var(--theme-color-baseTransparent25);
  --nav-item-color-active: var(--theme-color-baseLightened80);
  --nav-item-color: var(--theme-color-baseDarkened80);
  --nav-item-color-hover: white;
  --raised-background: var(--theme-color-baseLightened80);
  --search-clear-button-color: var(--theme-color-base);
  --search-icon-color: var(--theme-color-base);
  --status-bar-text-color: black;
  --tab-background-active: var(--background-primary);
  --tab-background-inactive: var(--theme-color-baseLightened80);
  --tab-text-color: var(--theme-color-baseTransparent50);
  --tab-text-color-active: var(--theme-color-baseTransparent50);
  --tab-text-color-focused: var(--theme-color-baseDarkened25);
  --tab-text-color-focused-active: var(--theme-color-baseDarkened25);

  --tag-color: hsl(
    var(--accent-h),
    calc(var(--accent-s)),
    calc(var(--accent-l) * 0.9)
  );
  --tag-background: hsl(
    var(--accent-h),
    var(--accent-s),
    var(--accent-l),
    0.15
  );
  --text-normal: var(--theme-color-baseDarkened90);
  --text-faint: var(--theme-color-baseDarkened70);
  --background-prompt: var(--theme-color-baseLightened95);
  --interactive-accent: var(--theme-color-base);
  --interactive-accent-hover: var(--theme-color-base);
  --table-border-color: var(--theme-color-baseLightened60);
  --table-header-border-color: var(--theme-color-baseLightened60);

  --metadata-property-background: var(--theme-color-baseLightened95);
  --metadata-property-background-hover: var(--theme-color-baseTransparent12);
  --metadata-label-background-active: var(--theme-color-baseLightened95);
  --metadata-input-background-active: var(--theme-color-baseLightened95);

  /* Background for content area */
  --background-primary: white;
  /* Background for controls area */
  --background-secondary: var(--theme-color-baseLightened60);

  /* New variables for this theme */
  --theme-color-activeLineHighlight: var(--theme-color-baseTransparent12);
  --theme-color-audioRecordingActive: var(--theme-color-redDarkened);
  --theme-color-blockId: var(--theme-color-baseLightened);
  --theme-color-calendarDayBg: var(--theme-color-lightenTransparent75);
  --theme-color-communityItemBg: var(--theme-color-baseLightened80);
  --theme-color-communityItemBgActive: var(--theme-color-base);
  --theme-color-communityItemBgHover: var(--theme-color-baseLightened60);
  --theme-color-communityItemBgSelected: var(--theme-color-baseLightened12);
  --theme-color-contentItemBg: var(--theme-color-lightenTransparent50);
  --theme-color-contentItemBgActive: var(--theme-color-base);
  --theme-color-contentItemBgHover: var(--theme-color-lightenTransparent25);
  --theme-color-controlBg: var(--theme-color-baseLightened95);
  --theme-color-controlLowWeightBg: var(--theme-color-lightenTransparent50);
  --theme-color-controlContentArea: var(--theme-color-base);
  --theme-color-controlContentAreaHover: var(--theme-color-baseLightened80);
  --theme-color-controlUIHover: var(--theme-color-baseLightened60);
  --theme-color-controlUISelected: var(--theme-color-baseLightened80);
  --theme-color-controlSetBg: var(--theme-color-baseLightened80);
  --theme-color-controlText: var(--theme-color-baseDarkened70);
  --theme-color-controlTextHover: var(--theme-color-baseLightened80);
  --theme-color-controlLightweightActive: var(--theme-color-baseLightened95);
  --theme-color-emptyStateBg: var(--theme-color-baseLightened80);
  --theme-color-graphLine: black; /* Canvas doesn't support color-mix */
  --theme-color-hotkey: var(--theme-color-base);
  --theme-color-inputBorder: var(--theme-color-baseLightened25);
  --theme-color-inputPlaceholder: var(--theme-color-base);
  --theme-color-interactiveActive: var(--theme-color-baseLightened25);
  --theme-color-kanbanLaneBg: var(--theme-color-baseLightened80);
  --theme-color-log: var(--theme-color-baseDarkened80);
  --theme-color-logBg: var(--theme-color-baseLightened25);
  --theme-color-modalContentBg: var(--theme-color-baseLightened60);
  --theme-color-menuBg: var(--theme-color-baseLightened80);
  --theme-color-mobileToolbarBg: var(--theme-color-baseLightened80);
  --theme-color-navFileTag: var(--theme-color-base);
  --theme-color-navFileTagActive: var(--nav-item-color-active);
  --theme-color-navFileTagActiveBorder: var(--nav-item-color-active);
  --theme-color-navFileTagBorder: var(--theme-color-base);
  --theme-color-notice: var(--theme-color-baseLightened95);
  --theme-color-noticeBg: var(--theme-color-baseDarkened80);
  --theme-color-promptInstructions: var(--theme-color-baseDarkened40);
  --theme-color-settingsBg: var(--theme-color-baseLightened80);
  --theme-color-settingsBgStripe: var(--theme-color-baseLightened95);
  --theme-color-settingsGroupBg: var(--theme-color-lightenTransparent50);
  --theme-color-suggestionBg: var(--theme-color-baseLightened85);
  --theme-color-switcherBgActive: var(--theme-color-base);
  --theme-color-tagHover: hsl(
    var(--accent-h),
    calc(var(--accent-s) * 1.02),
    calc(var(--accent-l) * 1.035)
  );
  --theme-color-tagBgHover: hsl(
    var(--accent-h),
    calc(var(--accent-s) * 1.02),
    calc(var(--accent-l) * 1.035),
    0.1
  );
  --theme-color-tagBgSidebar: hsl(
    var(--accent-h),
    calc(var(--accent-s) * 1.2),
    calc(var(--accent-l) * 1),
    0.15
  );
  --theme-color-tagBgSidebarHover: hsl(
    var(--accent-h),
    calc(var(--accent-s) * 1.22),
    calc(var(--accent-l) * 1.15),
    0.15
  );
  --theme-color-tagSidebar: hsl(
    var(--accent-h),
    calc(var(--accent-s) * 1),
    calc(var(--accent-l) * 0.4)
  );
  --theme-color-tagSidebarHover: hsl(
    var(--accent-h),
    calc(var(--accent-s) * 1.02),
    calc(var(--accent-l) * 0.46)
  );
  --theme-color-textMeta: var(--theme-color-base);
  --theme-color-textSelected: var(--theme-color-baseLightened80);
  --theme-color-warningBg: var(--theme-color-baseLightened95);
  --theme-color-gradientCardsetTop: var(--theme-color-baseTransparent12);
  --theme-color-gradientCardsetBottom: var(--theme-color-baseTransparent06);
  --theme-color-gradientCardsetGeneratedTop: var(
    --theme-color-baseTransparent35
  );
  --theme-color-gradientCardsetGeneratedBottom: var(
    --theme-color-baseTransparent12
  );
  --theme-color-shadow: var(--theme-color-baseDarkened25);

  --theme-shadow-control: 0 1px 2px
    hsl(
      var(--base-h),
      calc(var(--base-s) * 1.5),
      calc(var(--base-l) * 0.25),
      0.5
    );
  --theme-shadow-input: 0 1px 2px
      hsl(
        var(--base-h),
        calc(var(--base-s) * 1.5),
        calc(var(--base-l) * 0.25),
        0.2
      ),
    0 3.4px 6.7px
      hsl(
        var(--base-h),
        calc(var(--base-s) * 1),
        calc(var(--base-l) * 0.25),
        0.15
      ),
    0 15px 30px
      hsl(
        var(--base-h),
        calc(var(--base-s) * 0.75),
        calc(var(--base-l) * 0.25),
        0.05
      );

  /*
  Gradient from contrast setting

  At 0 contrast, this sets both ends of the gradient to base color plus 50% white
  At 0.2 (default), it matches --theme-color-baseLightened60 and --theme-color-baseLightened40
  At 1, the top is white, bottom is base color
  */
  --theme-color-gradientTop: color-mix(
    in srgb,
    var(--theme-color-base),
    white calc(100% * (0.5 + 0.5 * var(--theme-value-gradientContrast)))
  );
  --theme-color-gradientBottom: color-mix(
    in srgb,
    var(--theme-color-base),
    white calc(100% * (0.5 - 0.5 * var(--theme-value-gradientContrast)))
  );
  --theme-color-gradientDarkenedTop: color-mix(
    in srgb,
    var(--theme-color-base),
    white calc(100% * (0.5 - 0.25 * var(--theme-value-gradientContrast)))
  );
  --theme-color-gradientDarkenedBottom: color-mix(
    in srgb,
    var(--theme-color-base),
    white calc(100% * (0.5 - 1.25 * var(--theme-value-gradientContrast)))
  );
}
body.theme-light.theme-setting-customGradient {
  --theme-color-gradientTop: color-mix(
    in srgb,
    var(--theme-color-customGradientBaseTop),
    white calc(100% * (0.5 + 0.5 * var(--theme-value-gradientContrast)))
  );
  --theme-color-gradientBottom: color-mix(
    in srgb,
    var(--theme-color-customGradientBaseBottom),
    white calc(100% * (0.5 - 0.5 * var(--theme-value-gradientContrast)))
  );
}
.theme-light,
.theme-light .metadata-property:not([data-property-key="tags"]) {
  --pill-background: var(--theme-color-baseTransparent75);
  --pill-background-hover: var(--theme-color-base);
  --pill-color: white;
  --pill-color-hover: white;
  --pill-color-remove: var(--theme-color-baseLightened80);
  --pill-color-remove-hover: var(--theme-color-baseLightened80);
  --pill-background-remove-hover: var(--theme-color-baseLightened25);
}
.theme-light.theme-setting-lightModeNoteBgNearWhite {
  --background-primary: color-mix(
    in srgb,
    var(--theme-color-base),
    white calc(100% * 0.97)
  );
}
/* #endregion */
/* #region   Dark mode */
.theme-dark,
.theme-dark .theme-light {
  /* Built-in variables */
  --background-modifier-active-hover-alt: var(--theme-color-baseDarkened25);
  --background-modifier-active-hover: var(--theme-color-baseDarkened70);
  --background-modifier-border-focus: var(--theme-color-baseDarkened25);
  --background-modifier-border: var(--theme-color-baseDarkened25);
  --background-modifier-hover: var(--theme-color-base);
  --blockquote-border-color: var(--theme-color-baseDarkened80);
  --caret-color: hsl(var(--accent-h), 150%, 80%);
  --collapse-icon-color: var(--theme-color-base);
  --collapse-icon-color-collapsed: var(--theme-color-base);
  --empty-pane-color: var(--theme-color-baseDarkened70);
  --icon-color-focused: var(--theme-color-baseLightened80);
  --icon-color-hover: hsl(
    var(--base-h),
    calc(var(--base-s) * 0.2),
    calc(var(--base-l) * 1.5)
  );
  --icon-color-hover: var(--theme-color-baseLightened80);
  --icon-color: var(--theme-color-base);
  --modal-background: var(--theme-color-baseDarkened80);
  --nav-collapse-icon-color-collapsed: var(--theme-color-baseTransparent75);
  --nav-collapse-icon-color: var(--theme-color-baseTransparent75);
  --nav-indentation-guide-color: var(--theme-color-baseTransparent25);
  --nav-item-background-active: var(--theme-color-base);
  --nav-item-background-selected: var(--theme-color-baseTransparent25);
  --nav-item-color-active: var(--theme-color-baseDarkened80);
  --nav-item-color: var(--theme-color-baseLightened60);
  --nav-item-color-hover: black;
  --raised-background: var(--theme-color-baseDarkened80);
  --search-clear-button-color: var(--theme-color-base);
  --search-icon-color: var(--theme-color-base);
  --tag-color: hsl(
    var(--accent-h),
    calc(var(--accent-s) * 1.1),
    calc(var(--accent-l) * 1.2)
  );
  --tag-background: hsl(var(--accent-h), var(--accent-s), var(--accent-l), 0.3);
  --tab-background-active: var(--background-primary);
  --tab-background-inactive: var(--theme-color-baseDarkened85);
  --tab-text-color: var(--theme-color-baseTransparent50);
  --tab-text-color-active: var(--theme-color-baseTransparent50);
  --tab-text-color-focused: var(--theme-color-baseLightened25);
  --tab-text-color-focused-active: var(--theme-color-baseLightened25);
  --text-normal: var(--theme-color-baseLightened60);
  --text-faint: var(--theme-color-baseLightened25);
  --background-prompt: var(--theme-color-baseDarkened80);
  --interactive-accent: var(--theme-color-base);
  --table-border-color: var(--theme-color-baseDarkened70);
  --table-header-border-color: var(--theme-color-baseDarkened70);

  --metadata-property-background: var(--theme-color-baseDarkened80);
  --metadata-property-background-hover: var(--theme-color-baseTransparent12);
  --metadata-label-background-active: var(--theme-color-baseDarkened90);
  --metadata-input-background-active: var(--theme-color-baseDarkened90);

  /* Background for content area */
  /* This may be overridden below by the theme-value-darkModeNoteBg style setting. */
  --background-primary: color-mix(
    in srgb,
    var(--theme-color-base),
    black calc(100% * 0.95)
  );
  /* Background for controls area */
  --background-secondary: var(--theme-color-baseDarkened70);

  /* New variables for this theme */
  --theme-color-activeLineHighlight: var(--theme-color-baseTransparent12);
  --theme-color-audioRecordingActive: var(--theme-color-redLightened);
  --theme-color-blockId: var(--theme-color-baseDarkened25);
  --theme-color-calendarDayBg: var(--theme-color-darkenTransparent50);
  --theme-color-communityItemBg: var(--theme-color-baseDarkened80);
  --theme-color-communityItemBgActive: var(--theme-color-base);
  --theme-color-communityItemBgHover: var(--theme-color-baseDarkened70);
  --theme-color-communityItemBgSelected: var(--theme-color-baseDarkened12);
  --theme-color-contentItemBg: rgb(0, 0, 0, 0.2);
  --theme-color-contentItemBgActive: var(--theme-color-base);
  --theme-color-contentItemBgHover: rgb(0, 0, 0, 0.1);
  --theme-color-controlBg: var(--theme-color-baseDarkened25);
  --theme-color-controlLowWeightBg: var(--theme-color-darkenTransparent25);
  --theme-color-controlContentArea: var(--theme-color-baseLightened60);
  --theme-color-controlContentAreaHover: var(--theme-color-baseDarkened80);
  --theme-color-controlUIHover: var(--theme-color-baseDarkened70);
  --theme-color-controlUISelected: var(--theme-color-baseDarkened70);
  --theme-color-controlSetBg: var(--theme-color-baseDarkened80);
  --theme-color-controlText: var(--theme-color-baseLightened60);
  --theme-color-controlTextHover: var(--theme-color-baseDarkened80);
  --theme-color-controlLightweightActive: var(--theme-color-baseLightened95);
  --theme-color-emptyStateBg: var(--theme-color-baseDarkened80);
  --theme-color-graphLine: white; /* Canvas doesn't support color-mix */
  --theme-color-hotkey: var(--theme-color-base);
  --theme-color-inputBorder: var(--theme-color-baseLightened25);
  --theme-color-inputPlaceholder: var(--theme-color-base);
  --theme-color-interactiveActive: var(--theme-color-baseDarkened25);
  --theme-color-kanbanLaneBg: var(--theme-color-baseDarkened80);
  --theme-color-log: var(--theme-color-baseLightened80);
  --theme-color-logBg: var(--theme-color-baseDarkened25);
  --theme-color-menuBg: var(--theme-color-baseDarkened80);
  --theme-color-mobileToolbarBg: var(--theme-color-baseDarkened80);
  --theme-color-modalContentBg: var(--theme-color-baseDarkened70);
  --theme-color-navFileTag: var(--theme-color-baseDarkened25);
  --theme-color-navFileTagActive: var(--nav-item-color-active);
  --theme-color-navFileTagActiveBorder: var(--nav-item-color-active);
  --theme-color-navFileTagBorder: var(--theme-color-baseDarkened25);
  --theme-color-notice: var(--theme-color-baseDarkened90);
  --theme-color-noticeBg: var(--theme-color-baseLightened95);
  --theme-color-promptInstructions: var(--theme-color-baseLightened40);
  --theme-color-settingsBg: var(--theme-color-baseDarkened80);
  --theme-color-settingsBgStripe: var(--theme-color-baseDarkened90);
  --theme-color-settingsGroupBg: var(--theme-color-darkenTransparent50);
  --theme-color-suggestionBg: var(--theme-color-baseDarkened85);
  --theme-color-switcherBgActive: var(--theme-color-base);
  --theme-color-tagHover: hsl(
    var(--accent-h),
    calc(var(--accent-s) * 1.05),
    calc(var(--accent-l) * 1.29)
  );
  --theme-color-tagBgHover: hsl(
    var(--accent-h),
    calc(var(--accent-s) * 1.2),
    calc(var(--accent-l) * 0.8),
    0.75
  );
  --theme-color-tagBgSidebar: hsl(
    var(--accent-h),
    calc(var(--accent-s) * 1.2),
    calc(var(--accent-l) * 0.25),
    0.5
  );
  --theme-color-tagBgSidebarHover: hsl(
    var(--accent-h),
    calc(var(--accent-s) * 1.1),
    calc(var(--accent-l) * 0.8),
    0.5
  );
  --theme-color-tagSidebar: hsl(
    var(--accent-h),
    calc(var(--accent-s) * 1.1),
    calc(var(--accent-l) * 1.2)
  );
  --theme-color-tagSidebarHover: hsl(
    var(--accent-h),
    calc(var(--accent-s) * 1.4),
    calc(var(--accent-l) * 1.3)
  );

  --theme-color-textMeta: var(--theme-color-base);
  --theme-color-textSelected: var(--theme-color-baseDarkened80);
  --theme-color-warningBg: var(--theme-color-baseLightened95);
  --theme-color-gradientCardsetTop: var(--theme-color-baseTransparent06);
  --theme-color-gradientCardsetBottom: var(--theme-color-baseTransparent12);
  --theme-color-gradientCardsetGeneratedTop: var(
    --theme-color-baseTransparent12
  );
  --theme-color-gradientCardsetGeneratedBottom: var(
    --theme-color-baseTransparent25
  );
  --theme-color-shadow: var(--theme-color-baseDarkened90);

  --theme-shadow-control: 0px 1px 2px
    hsl(
      var(--base-h),
      calc(var(--base-s) * 0.1),
      calc(var(--base-l) * 0.1),
      0.1
    );
  --theme-shadow-input: 0px 1px 2px
      hsl(
        var(--base-h),
        calc(var(--base-s) * 0.5),
        calc(var(--base-l) * 0.1),
        0.5
      ),
    0px 3.4px 6.7px
      hsl(
        var(--base-h),
        calc(var(--base-s) * 1),
        calc(var(--base-l) * 0.1),
        0.25
      ),
    0px 15px 30px
      hsl(
        var(--base-h),
        calc(var(--base-s) * 0.75),
        calc(var(--base-l) * 0.1),
        0.15
      );
  /*
  Gradient from contrast setting

  At 0 contrast, this sets both ends of the gradient to base color plus 70% black
  At 0.2 (default), it matches --theme-color-baseDarkened70 and --theme-color-baseDarkened80
  At 1, the top is base color, bottom pure black
  */
  --theme-color-gradientTop: color-mix(
    in srgb,
    var(--theme-color-base),
    black calc(100% * (0.7 - 0.5 * var(--theme-value-gradientContrast)))
  );
  --theme-color-gradientBottom: color-mix(
    in srgb,
    var(--theme-color-base),
    black calc(100% * (0.7 + 0.5 * var(--theme-value-gradientContrast)))
  );
}
body.theme-dark.theme-setting-customGradient {
  --theme-color-gradientTop: color-mix(
    in srgb,
    var(--theme-color-customGradientBaseTop),
    black calc(100% * (0.7 - 0.5 * var(--theme-value-gradientContrast)))
  );
  --theme-color-gradientBottom: color-mix(
    in srgb,
    var(--theme-color-customGradientBaseBottom),
    black calc(100% * (0.7 + 0.5 * var(--theme-value-gradientContrast)))
  );
}
.theme-dark,
.theme-dark .metadata-property:not([data-property-key="tags"]) {
  --pill-background: var(--theme-color-baseTransparent75);
  --pill-background-hover: var(--theme-color-base);
  --pill-color: black;
  --pill-color-hover: black;
  --pill-color-remove: var(--theme-color-baseDarkened80);
  --pill-color-remove-hover: var(--theme-color-baseDarkened80);
  --pill-background-remove-hover: var(--theme-color-baseDarkened25);
}
.theme-dark.theme-value-darkModeNoteBgFullBlack {
  /* Override note background when specified by style settings. */
  /* There's no equivalent of this for light mode. */
  --background-primary: black;
}
/* #endregion */
/* #region   Light/dark modes */
body {
  --bases-cards-cover-background: light-dark(var(--theme-color-darkenTransparent06), var(--theme-color-lightenTransparent06));
  --icon-color-active: light-dark(white, black);

  --theme-color-calendarBg: light-dark(var(--theme-color-baseLightened85), var(--theme-color-baseDarkened80));

  --theme-color-control: light-dark(
    var(--theme-color-baseDarkened70),
    var(--theme-color-baseLightened60)
  );
  --theme-color-controlActive: light-dark(var(--theme-color-baseLightened95),var(--theme-color-baseDarkened90));
  --theme-color-controlHover: light-dark(var(--theme-color-baseLightened95), var(--theme-color-baseDarkened90));
  --theme-color-controlBgActive: var(--theme-color-base);
  --theme-color-controlBgHover: light-dark(var(--theme-color-baseLightened40), var(--theme-color-baseDarkened40));

  --theme-color-controlHasActiveMenu: light-dark(var(--theme-color-baseLightened80), var(--theme-color-baseDarkened80));

  --theme-color-jiraIssueInfoBg: light-dark(
    var(--theme-color-blueLightened),
    var(--theme-color-blueDarkened)
  );
  --theme-color-jiraIssueWarningBg: light-dark(control
    var(--theme-color-yellowLightened),
    var(--theme-color-yellowDarkened)
  );
  --theme-color-jiraIssueSuccessBg: light-dark(
    var(--theme-color-greenLightened),
    var(--theme-color-greenDarkened)
  );
  --theme-color-jiraIssueStatusBg: light-dark(
    var(--theme-color-baseDarkened90),
    var(--theme-color-baseDarkened90)
  );
  --theme-color-jiraIssueDeleteBg: var(--color-red);
  --theme-color-jiraIssueStatus: var(--theme-color-baseLightened95);
  --theme-color-jiraIssueDangerBg: var(--theme-color-redTransparent25);
  --theme-color-jiraIssueDanger: white;
  --theme-color-jiraIssueTableStripe: light-dark(
    var(--theme-color-lightenTransparent50),
    var(--theme-color-darkenTransparent50)
  );
  --theme-color-lineNumbers: light-dark(var(--theme-color-baseLightened60), var(--theme-color-baseDarkened60));
  --theme-color-navigationButtonBgHover: var(--theme-color-base);
  --theme-color-queryComponentBg: var(--theme-color-baseTransparent12);
  --theme-color-tabNavBg: light-dark(var(--theme-color-baseLightened60), var(--theme-color-baseDarkened60));
  --theme-color-tabNavActiveBg: light-dark(var(--theme-color-baseLightened70), var(--theme-color-baseDarkened70));
}
/* #endregion */
/* #region   Shadows */
body.theme-light,
.theme-light .theme-dark,
body.theme-dark,
.theme-dark .theme-light {
  --input-shadow: var(--theme-shadow-control);
  --shadow-l: 0 0 0.2rem
      color-mix(in srgb, var(--theme-color-shadow) 2%, transparent),
    0 0.2rem 0.4rem
      color-mix(in srgb, var(--theme-color-shadow) 4%, transparent),
    0 0.4rem 1.2rem
      color-mix(in srgb, var(--theme-color-shadow) 6%, transparent),
    0 1.2rem 2rem color-mix(in srgb, var(--theme-color-shadow) 8%, transparent),
    0 2rem 4rem color-mix(in srgb, var(--theme-color-shadow) 10%, transparent);
  --shadow-s: 0 0 0.05rem
      color-mix(in srgb, var(--theme-color-shadow) 2%, transparent),
    0 0.05rem 0.1rem
      color-mix(in srgb, var(--theme-color-shadow) 4%, transparent),
    0 0.1rem 0.3rem
      color-mix(in srgb, var(--theme-color-shadow) 6%, transparent),
    0 0.3rem 0.5rem
      color-mix(in srgb, var(--theme-color-shadow) 8%, transparent),
    0 0.5rem 1rem color-mix(in srgb, var(--theme-color-shadow) 10%, transparent);
  --theme-shadow-indent: 0 0 0.2rem
      color-mix(in srgb, var(--theme-color-shadow) 3%, transparent),
    0 0 0.2rem color-mix(in srgb, var(--theme-color-shadow) 6%, transparent),
    0 0 0.4rem color-mix(in srgb, var(--theme-color-shadow) 9%, transparent),
    0 0 1.2rem color-mix(in srgb, var(--theme-color-shadow) 12%, transparent),
    0 0 2rem color-mix(in srgb, var(--theme-color-shadow) 15%, transparent);
  --theme-shadow-indent-small: 0 0 0.05rem
      color-mix(in srgb, var(--theme-color-shadow) 4%, transparent),
    0 0 0.2rem color-mix(in srgb, var(--theme-color-shadow) 8%, transparent),
    0 0 0.6rem color-mix(in srgb, var(--theme-color-shadow) 12%, transparent),
    0 0 1rem color-mix(in srgb, var(--theme-color-shadow) 16%, transparent),
    0 0 2rem color-mix(in srgb, var(--theme-color-shadow) 20%, transparent);}
/* #endregion */
/* #endregion */
/* #endregion */
/* #region Keyframe animations */
@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* #endregion */
/* #region Typography */
/* #region   Reading and Live Preview modes */
body {
  --theme-value-headingScaleFactor: 1.2;
  --blockquote-border-thickness: 0.25em;
  /* Use the system font by default for both text and interface, unless user has chosen something else.  */
  --font-default: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-monospace-default: ui-monospace, Menlo, SFMono-Regular, Consolas,
    "Roboto Mono", "Source Code Pro", monospace;
  --font-text-theme: var(--font-default);
  --font-interface-theme: var(--font-default);
  --font-monospace-theme: var(--font-monospace-default);
  --h1-size: calc(var(--theme-value-headingScaleFactor) * var(--h2-size));
  --h2-size: calc(var(--theme-value-headingScaleFactor) * var(--h3-size));
  --h3-size: calc(var(--theme-value-headingScaleFactor) * var(--h4-size));
  --h4-size: calc(var(--theme-value-headingScaleFactor) * var(--h5-size));
  --h5-size: calc(var(--theme-value-headingScaleFactor) * var(--h6-size));
  --h6-size: var(--font-text-size);
  /* Heading weights increase inversely with size, to maintain distinction from body text */
  --h1-weight: 100;
  --h2-weight: 200;
  --h3-weight: 300;
  --h4-weight: 400;
  --h5-weight: 500;
  --h6-weight: 500;
  /* Inline title isn't huge, but has Greater weight */
  --inline-title-size: var(--h3-size);
  --inline-title-weight: var(--h4-weight);
  --inline-title-line-height: var(--line-height-normal);
  --inline-title-style: normal;
  --inline-title-variant: normal;
  --inline-title-font: inherit;
  --inline-title-color: inherit;

  --line-height-normal: 1.6;
  --link-decoration-thickness: 1px;
  --link-unresolved-decoration-style: dashed;
  --h1-line-height: var(--line-height-normal);
  --h2-line-height: var(--line-height-normal);
  --h3-line-height: var(--line-height-normal);
  --h4-line-height: var(--line-height-normal);
  --h5-line-height: var(--line-height-normal);
  --h6-line-height: var(--line-height-normal);

  /* Hanging punctuation isn't supported in Electron yet (Dec 2023), but here for when it is. */
  hanging-punctuation: first allow-end last;

  ::spelling-error {
    text-decoration: wavy var(--color-red) underline from-font;
  }
}

body.theme-setting-headingScaleFactor1point067 {
  --theme-value-headingScaleFactor: 1.067;
}
body.theme-setting-headingScaleFactor1point125 {
  --theme-value-headingScaleFactor: 1.125;
}
body.theme-setting-headingScaleFactor1point2 {
  --theme-value-headingScaleFactor: 1.2;
}
body.theme-setting-headingScaleFactor1point25 {
  --theme-value-headingScaleFactor: 1.25;
}
body.theme-setting-headingScaleFactor1point333 {
  --theme-value-headingScaleFactor: 1.333;
}
body.theme-setting-headingScaleFactor1point414 {
  --theme-value-headingScaleFactor: 1.414;
}
body.theme-setting-headingScaleFactor1point5 {
  --theme-value-headingScaleFactor: 1.5;
}
body.theme-setting-headingScaleFactor1point618 {
  --theme-value-headingScaleFactor: 1.618;
}
/* More compact typography to fit more on small screens */
.is-phone {
  --theme-value-headingScaleFactorPhone: 1.2;
  --h1-size: calc(var(--theme-value-headingScaleFactorPhone) * var(--h2-size));
  --h2-size: calc(var(--theme-value-headingScaleFactorPhone) * var(--h3-size));
  --h3-size: calc(var(--theme-value-headingScaleFactorPhone) * var(--h4-size));
  --h4-size: calc(var(--theme-value-headingScaleFactorPhone) * var(--h5-size));
  --h5-size: calc(var(--theme-value-headingScaleFactorPhone) * var(--h6-size));
  --line-height-normal: 1.5;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point067 {
  --theme-value-headingScaleFactorPhone: 1.067;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point125 {
  --theme-value-headingScaleFactorPhone: 1.125;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point2 {
  --theme-value-headingScaleFactorPhone: 1.2;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point25 {
  --theme-value-headingScaleFactorPhone: 1.25;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point333 {
  --theme-value-headingScaleFactorPhone: 1.333;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point414 {
  --theme-value-headingScaleFactorPhone: 1.414;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point5 {
  --theme-value-headingScaleFactorPhone: 1.5;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point618 {
  --theme-value-headingScaleFactorPhone: 1.618;
}
/* Smaller font size for markdown documents in sidebar */
.mod-sidedock {
  --h1-size: calc(var(--theme-value-headingScaleFactor) * var(--h2-size));
  --h2-size: calc(var(--theme-value-headingScaleFactor) * var(--h3-size));
  --h3-size: calc(var(--theme-value-headingScaleFactor) * var(--h4-size));
  --h4-size: calc(var(--theme-value-headingScaleFactor) * var(--h5-size));
  --h5-size: calc(var(--theme-value-headingScaleFactor) * var(--h6-size));
  --h6-size: calc(
    var(--theme-value-sidebarFontScalingFactor) * var(--font-text-size)
  );
}

.HyperMD-header-1, .inline-title h1, .markdown-rendered h1, .HyperMD-header-2, .inline-title h2, .markdown-rendered h2, .HyperMD-header-3, .inline-title h3, .markdown-rendered h3, .HyperMD-header-4, .inline-title h4, .markdown-rendered h4, .HyperMD-header-5, .inline-title h5, .markdown-rendered h5, .HyperMD-header-6, .inline-title h6, .markdown-rendered h6 {
  letter-spacing: 0;
}
.markdown-rendered
  div:has(> :is(p, pre, table, ul, ol))
  + div
  > :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
}

.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
  font-family: var(--theme-setting-headingFont), var(--font-text-theme);
}

/* Space before headings... */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
  padding: var(--heading-spacing) 0 0 0;
  margin: 0;
}
/* ...except when they immediately follow another heading */
.markdown-rendered
  :is(
    .markdown-preview-sizer > div:has(h1),
    .markdown-preview-sizer > div:has(h2),
    .markdown-preview-sizer > div:has(h3),
    .markdown-preview-sizer > div:has(h4),
    .markdown-preview-sizer > div:has(h5),
    .markdown-preview-sizer > div:has(h6)
  )
  + :is(
    .markdown-preview-sizer > div:has(h1),
    .markdown-preview-sizer > div:has(h2),
    .markdown-preview-sizer > div:has(h3),
    .markdown-preview-sizer > div:has(h4),
    .markdown-preview-sizer > div:has(h5),
    .markdown-preview-sizer > div:has(h6)
  )
  :is(h1, h2, h3, h4, h5, h6) {
  padding-top: 0;
}
/* ...or they're first on the page */
.markdown-rendered .mod-header + div > h1 {
  padding-top: 0;
}

/* Markdown formatting shown while editing e.g. ### for headings */

.markdown-source-view .HyperMD-quote,
.callout {
  font-weight: 300;
}

.markdown-rendered hr {
  display: flex;
  align-items: center;
  border: none;
  border-top: var(--hr-thickness) solid;
  border-color: var(--hr-color);
  margin: 2em 0;
}
.markdown-rendered code {
  padding: 0.25em 0.5em;
}

/* #region     Lists */
li.is-collapsed .list-bullet:after {
  box-shadow: none;
}
@media (hover: hover) {
  li.is-collapsed .list-collapse-indicator:hover ~ .list-bullet:after,
  .list-collapse-indicator:hover.is-collapsed ~ .list-bullet:after {
    background-color: var(--list-marker-color-collapsed);
    box-shadow: none;
  }

  .list-collapse-indicator:hover ~ .list-bullet:after {
    box-shadow: none;
  }
}
/* #endregion */
/* #region     Collapse indicators */
/* Appearance consistent with navigation controls */
.collapse-indicator,
.list-collapse-indicator {
  background-color: var(--background-primary);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  width: var(--theme-length-collapseIndicatorSize);
  height: var(--theme-length-collapseIndicatorSize);
  border: none;
  color: var(--theme-color-control);
  flex-wrap: wrap;
}
@media (hover: hover) {
  .collapse-indicator:hover,
  .list-collapse-indicator:hover,
  .view-content .list-collapse-indicator:hover svg.svg-icon,
  .view-content .collapse-indicator:hover svg.svg-icon {
    color: var(--theme-color-controlTextHover);
    background-color: var(--theme-color-navigationButtonBgHover);
  }
}
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  position: relative;
}
.markdown-preview-view .heading-collapse-indicator {
  margin-inline-start: -2rem;
  top: auto;
}
.markdown-preview-view h1 .heading-collapse-indicator {
  bottom: 0.5em;
}
.markdown-preview-view h2 .heading-collapse-indicator {
  bottom: 0.45em;
}
.markdown-preview-view h3 .heading-collapse-indicator {
  bottom: 0.4em;
}
.markdown-preview-view h4 .heading-collapse-indicator {
  bottom: 0.3em;
}
.markdown-preview-view h5 .heading-collapse-indicator {
  bottom: 0.2em;
}
.markdown-preview-view h6 .heading-collapse-indicator {
  bottom: 0.1em;
}
.markdown-rendered .list-collapse-indicator {
  padding-inline-end: 0;
}
/* #endregion */
/* #region     Links */
#center-content h1 a {
  --text-decoration-color: var(--link-color);
  --text-decoration-style: dashed;
}
#center-content h1 a,
#center-content h2 a,
#center-content h3 a,
#center-content h4 a,
#center-content h5 a,
#center-content h6 a {
  text-underline-offset: 0.125em;
}
@media (hover: hover) {
}
#center-content h1 a {
  --link-decoration-thickness: max(calc(var(--h1-weight) / 400 * 1px), 1px);
}
#center-content h2 a {
  --link-decoration-thickness: max(calc(var(--h2-weight) / 400 * 1px), 1px);
}
#center-content h3 a {
  --link-decoration-thickness: max(calc(var(--h3-weight) / 400 * 1px), 1px);
}
#center-content h4 a {
  --link-decoration-thickness: max(calc(var(--h4-weight) / 400 * 1px), 1px);
}
#center-content h5 a {
  --link-decoration-thickness: max(calc(var(--h5-weight) / 400 * 1px), 1px);
}
#center-content h6 a {
  --link-decoration-thickness: max(calc(var(--h6-weight) / 400 * 1px), 1px);
}
#center-content h1 a.is-unresolved {
  --link-decoration-thickness: max(calc(var(--h1-weight) / 200 * 2px), 1px);
}
#center-content h2 a.is-unresolved {
  --link-decoration-thickness: max(calc(var(--h2-weight) / 400 * 2px), 1px);
}
#center-content h3 a.is-unresolved {
  --link-decoration-thickness: max(calc(var(--h3-weight) / 400 * 2px), 1px);
}
#center-content h4 a.is-unresolved {
  --link-decoration-thickness: max(calc(var(--h4-weight) / 400 * 2px), 1px);
}
#center-content h5 a.is-unresolved {
  --link-decoration-thickness: max(calc(var(--h5-weight) / 400 * 2px), 1px);
}
#center-content h6 a.is-unresolved {
  --link-decoration-thickness: max(calc(var(--h6-weight) / 400 * 2px), 1px);
}

/* #endregion */
/* #region     Tables */

.markdown-rendered th,
.markdown-rendered table:not(.calendar) thead tr > th:nth-child(2n + 2) {
  background: var(--theme-color-tableHeaderBg);
}
.markdown-rendered td,
.markdown-rendered th {
  padding: 0.375em 0.75em;
}
/* #endregion */
/* #region     Embeds */
/* Default appearance for embeds */
.internal-embed,
.internal-query {
  background-color: var(--embed-background);
  border-bottom: var(--embed-border-bottom);
  border-inline-start: var(--embed-border-left);
  border-radius: var(--radius-m);
  border-inline-end: var(--embed-border-right);
  border-top: var(--embed-border-top);
  margin: 0;
}
/* I'm treating images as a special case, because they don't have any controls and a colored surround would often be distracting. */
.internal-embed.image-embed {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
}

.markdown-embed .embed-title {
  font-size: var(--font-ui-small);
  font-weight: var(--nav-item-weight-hover);
  color: var(--background-modifier-hover);
  margin: 0 2rem 0 0;
  align-items: center;
  display: none;
}

body.theme-setting-embeddedNoteTitleVisibilityHide .embed-title {
  display: none;
}
body.theme-setting-embeddedNoteTitleVisibilityShow
  .internal-embed:has(.embed-title:not(:empty)) {
  padding-top: 0.5rem;
}
body.theme-setting-embeddedNoteTitleVisibilityShow .embed-title {
  display: flex;
}
@media (hover: hover) {
  body.theme-setting-embeddedNoteTitleVisibilityHover
    .internal-embed:has(.embed-title:not(:empty)) {
    padding-top: 1.5rem;
  }
  body.theme-setting-embeddedNoteTitleVisibilityHover
    .internal-embed:has(.embed-title:not(:empty)):hover
    .embed-title {
    display: flex;
    position: absolute;
    top: 0.5rem;
    left: 1rem;
  }
}
.markdown-embed .markdown-embed-content {
  height: fit-content;
  max-height: var(--embed-max-height);
  overflow: auto;
}
.markdown-embed-link {
  position: absolute;
  top: 0;
  right: auto;
  left: calc(100% + 0.25em);
}
.file-embed-link {
  position: absolute;
  top: 0;
  right: 0;
}
/* #region       Image positioning and styling */

/* We'll sometimes have images inside columns, so we'd like them to fit into the available space. */
body.theme-setting-enableImageAdjustmentWithAltText {
  /* Center images */
  .markdown-preview-view img[alt~=center] {
    display: block;
    margin: 0 auto;
  }
  /* Float images left/right */
  /* Unfortunately, floats make live preview mode confused about how to assign line numbers. Left/right floating only applies to reading view */
  .markdown-preview-view img[alt~=right] {
    margin: 0 0 1em 1em !important;
    float: right;
  }
  .markdown-preview-view img[alt~=left] {
    margin: 0 1em 1em 0 !important;
    float: left;
  }

  /* Round corners of images */
  .markdown-preview-view img[alt~=round],
  .markdown-preview-view .image-embed[alt~=round] img {
    border-radius: 0.5em;
  }
  .markdown-preview-view img[alt~=circle],
  .markdown-preview-view .image-embed[alt~=circle] img {
    border-radius: var(--theme-length-fullBorderRadius);
  }
}
body.theme-setting-centerImages {
  .markdown-preview-view img {
    display: block;
    margin: 0 auto;
  }
}
/* #endregion */
/* Audio embed */
/* Not technically an embed, but when we've opened an audio file directly in fiule navigation we ant to see the same controls. */
.video-container > audio {
  background-color: var(--embed-background);
  border-bottom: var(--embed-border-bottom);
  border-inline-start: var(--embed-border-left);
  border-radius: var(--radius-m);
  border-inline-end: var(--embed-border-right);
  border-top: var(--embed-border-top);
  margin: 0;
}
audio::-webkit-media-controls-enclosure {
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  max-height: none;
  line-height: 0;
}
audio::-webkit-media-controls-panel {
  background: transparent;
  border: none;
  padding: 0.25rem;
  border-radius: var(--radius-m);
}

/* Video embed */
/* Not technically an embed, but when we've opened an audio file directly in fiule navigation we ant to see the same controls. */
#center-content video {
  background-color: var(--embed-background);
  border-bottom: var(--embed-border-bottom);
  border-inline-start: var(--embed-border-left);
  border-radius: var(--radius-m);
  border-inline-end: var(--embed-border-right);
  border-top: var(--embed-border-top);
  margin: 0;
}

/* Markdown embed e.g. embedded note */
.markdown-embed {
  padding: var(--embed-padding);
}
.markdown-embed .markdown-rendered .mod-header {
  margin-bottom: 0;
}

/* PDF embed */

/* Query embed */
.internal-query .search-result-container {
  padding: 0 1em 1em 1em;
  max-height: 800px;
  overflow: auto;
  border: none;
  background-color: var(--background-secondary);
  background-color: transparent;
  border-radius: 0;
}
.internal-query .internal-query-header {
  padding: 0.5em 0 0.5em 1em;
  color: var(--text-normal);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@media (hover: hover) {
}

/* Iframe embed */
.markdown-source-view iframe,
#center-content iframe {
  background-color: var(--embed-background);
  border-bottom: var(--embed-border-bottom);
  border-inline-start: var(--embed-border-left);
  border-radius: var(--radius-m);
  border-inline-end: var(--embed-border-right);
  border-top: var(--embed-border-top);
  height: 20em;
  width: 100%;
}
/* #endregion */
/* #region     Blocks and Callouts */
.callout {
  /* Embeds and dataviews would normally have a background colour, but we skip it inside a callout because it can look messy. */
  --embed-background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}
.callout .callout-title {
  margin-inline-start: -0.5em;
}
.callout.is-collapsible .callout-title {
  cursor: pointer;
}
.callout .callout-content {
  margin-top: 0;
  padding-top: 0;

  & p:first-child {
    margin-top: 0;
  }

  & p:last-child {
    margin-bottom: 0;
  }
}
@media (hover: hover) {
  .callout.is-collapsible .callout-title:hover {
    text-decoration: underline;
  }
}

.markdown-source-view .code-block-flair {
  top: 0.25em;
  right: 0.25em;
}
body:not(.is-mobile) {
  /* Move edit controls to the sidebar outside the block */
}
/* #endregion */

/********** Diagrams **********/
.mermaid {
  --theme-color-mermaidBorder: black;
  text-align: center;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle,
.mermaid svg[aria-roledescription="pie"] .legend rect {
  stroke: var(--theme-color-mermaidBorder) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(1),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(1) rect {
  fill: var(--color-red) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(2),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(2) rect {
  fill: var(--color-cyan) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(3),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(3) rect {
  fill: var(--color-orange) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(4),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(4) rect {
  fill: var(--color-blue) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(5),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(5) rect {
  fill: var(--color-yellow) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(6),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(6) rect {
  fill: var(--color-purple) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(7),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(7) rect {
  fill: var(--color-green) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(8),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(8) rect {
  fill: var(--color-pink) !important;
}
/* #endregion */
/* #region   Source and Live Preview modes */
/* #region     Codeblocks */
body.theme-setting-codeBlockLineNumbers {
}
/* #endregion */
body.theme-setting-highlightActiveLine {
}
/* #region     Line numbers */

body:not(.is-mobile) {
  .markdown-source-view {
  }
}
/* #endregion */
/* #endregion */
/* #region   Source mode */
/* #endregion */
/* #region   Live Preview mode */
#center-content {
  text-wrap: pretty;
}
/* #region     Lists */
.list-bullet:after {
  border: solid 1px var(--list-marker-color);
}
body.theme-setting-differentiateBulletLevels {
  .markdown-preview-view .el-ul > ul > li > .list-bullet:after {
    background-color: var(--list-marker-color);
  }
  .markdown-preview-view .el-ul > ul > li > ul > li > .list-bullet:after {
    background-color: transparent;
  }
  .markdown-preview-view
    .el-ul
    > ul
    > li
    > ul
    > li
    > ul
    > li
    > .list-bullet:after {
    border-radius: 0;
    background-color: var(--list-marker-color);
  }
  .markdown-preview-view
    .el-ul
    > ul
    > li
    > ul
    > li
    > ul
    > li
    > ul
    > li
    > .list-bullet:after {
    border-radius: 0;
    background-color: transparent;
  }
}
/* #endregion */
/* #region     Footnotes */
/* #endregion */
/* #endregion */
/* #region   Reading view */
.metadata-error-container {
  background: none;
  padding: 0;
  border-radius: 0;
}
/* #endregion */
/* #region   Obsidian UI */
body {
  --font-ui-smaller: 0.7rem;
  --font-ui-small: 0.8rem;
  --font-ui-medium: 1rem;
  --font-ui-large: 1.125rem;
  --line-height-normal: 1.5;
  --line-height-tight: 1.3;
}
/* Standard size for settings headings */
.modal.mod-settings .setting-item-heading,
.modal.mod-settings h2,
.modal.mod-settings h3,
.modal.mod-settings h4,
summary.excalidraw-setting-h1 {
  padding: 0;
  margin: 1em 0 0.5rem 0;
  font-size: var(--font-ui-large);
  font-weight: var(--font-semibold);

  .setting-item-name {
    font-size: inherit;
  }
}
/* #endregion */
/* #region   Markdown Checkboxes */
@media (hover: hover) {
}
/* #endregion */
/* #endregion */

/* #region Alternative Checkboxes */
body.theme-setting-enableBuiltInAlternativeCheckboxes {
  /* Alternate incomplete states */
  & input.task-list-item-checkbox[data-task="/"]:checked,
  & input.task-list-item-checkbox[data-task="<"]:checked,
  & input.task-list-item-checkbox[data-task="!"]:checked,
  & input.task-list-item-checkbox[data-task="?"]:checked,
  & li[data-task="/"] > input:checked,
  & li[data-task="<"] > input:checked,
  & li[data-task="!"] > input:checked,
  & li[data-task="?"] > input:checked,
  & li[data-task="/"] > p > input:checked,
  & li[data-task="<"] > p > input:checked,
  & li[data-task="!"] > p > input:checked,
  & li[data-task="?"] > p > input:checked {
    background-image: none;
    background-color: transparent;
    position: relative;
    overflow: hidden;
  }
  & input[data-task="/"]:checked:after,
  & input[data-task="<"]:checked:after,
  & input[data-task="!"]:checked:after,
  & input[data-task="?"]:checked:after,
  & li[data-task="/"] > input:checked:after,
  & li[data-task="<"] > input:checked:after,
  & li[data-task="!"] > input:checked:after,
  & li[data-task="?"] > input:checked:after,
  & li[data-task="/"] > p > input:checked:after,
  & li[data-task="<"] > p > input:checked:after,
  & li[data-task="!"] > p > input:checked:after,
  & li[data-task="?"] > p > input:checked:after {
    content: "";
    top: -1px;
    left: -1px;
    position: absolute;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    display: block;
    background-color: var(--theme-color-controlContentArea);
    -webkit-mask-position: 50% 50%;
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
  }
  & input[data-task="/"]:checked:after,
  & li[data-task="/"] > input:checked:after,
  & li[data-task="/"] > p > input:checked:after {
    -webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="%23000000"><polyline points="12,-12 48,-12 48,36 12,36" transform="rotate(45) translate(5,-12)"></polyline></g></g></svg>');
  }
  & input[data-task="<"]:checked:after,
  & li[data-task="<"] > input:checked:after,
  & li[data-task="<"] > p > input:checked:after {
    -webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="%23000000"><polyline points="15,4.5 6,12 15,19.5 16.75,17.5 10,12 16.75,6.5"></polyline></g></g></svg>');
  }
  & input[data-task="!"]:checked:after,
  & li[data-task="!"] > input:checked:after,
  & li[data-task="!"] > p > input:checked:after {
    -webkit-mask-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" x2="12" y1="5" y2="13"/><line x1="12" x2="12" y1="19" y2="19"/></svg>');
  }
  & input[data-task="?"]:checked:after,
  & li[data-task="?"] > input:checked:after,
  & li[data-task="?"] > p > input:checked:after {
    -webkit-mask-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.5,6.852c0.463,-1.049 1.493,-2.872 4.5,-2.852c3.957,0.026 5.001,2.617 5,4.5c-0.002,2.952 -4.963,3.463 -5,7.5"/><path d="M12.25,20l-0.443,-0"/></svg>');
  }

  /* Complete states */
  .bases-tbody input[type=checkbox][data-indeterminate="true"]:not(:checked) {
    text-decoration: var(--checklist-done-decoration);
    color: var(--checklist-done-color);
  }
  & input[data-task="x"]:checked,
  & li[data-task="x"] > input:checked,
  & li[data-task="x"] > p > input:checked,
  & input[data-task="X"]:checked,
  & li[data-task="X"] > input:checked,
  & li[data-task="X"] > p > input:checked,
  & input.task-list-item-checkbox[data-task=">"]:checked,
  & li[data-task=">"] > input:checked,
  & li[data-task=">"] > p > input:checked,
  & input.task-list-item-checkbox[data-task="-"]:checked,
  & li[data-task="-"] > input:checked,
  & li[data-task="-"] > p > input:checked,
  .bases-tbody input[type=checkbox][data-indeterminate="true"]:not(:checked) {
    background-image: none;
    border-color: var(--theme-color-controlContentArea);
    position: relative;
    overflow: hidden;
    background-color: var(--theme-color-controlContentArea);
    color: white;
  }
  & input[data-task="x"]:checked:after,
  & li[data-task="x"] > input:checked:after,
  & li[data-task="x"] > p > input:checked:after,
  & input[data-task="x"]:checked:after,
  & li[data-task="x"] > input:checked:after,
  & li[data-task="x"] > p > input:checked:after,
  & input[data-task="-"]:checked:after,
  & li[data-task="-"] > input:checked:after,
  & li[data-task="-"] > p > input:checked:after,
  & input[data-task=">"]:checked:after,
  & li[data-task=">"] > input:checked:after,
  & li[data-task=">"] > p > input:checked:after,
  .bases-tbody input[type=checkbox][data-indeterminate="true"]:not(:checked):after {
    content: "";
    top: -1px;
    left: -1px;
    position: absolute;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    display: block;
    background-color: var(--checkbox-marker-color);
    -webkit-mask-repeat: no-repeat;
  }
  & input[data-task="x"]:checked:after,
  & li[data-task="x"] > input:checked:after,
  & li[data-task="x"] > p > input:checked:after {
    -webkit-mask-position: 52% 52%;
    -webkit-mask-size: 65%;
    -webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23000000"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
  }
  & input[data-task="-"]:checked:after,
  & li[data-task="-"] > input:checked:after,
  & li[data-task="-"] > p > input:checked:after,
  .bases-tbody input[type=checkbox][data-indeterminate="true"]:not(:checked):after {
    -webkit-mask-position: 50% 50%;
    -webkit-mask-size: 100%;
    -webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="%23000000"><polyline points="4,10.5 20,10.5 20,13.5 4,13.5"></polyline></g></g></svg>');
  }
  & input[data-task=">"]:checked:after,
  & li[data-task=">"] > input:checked:after,
  & li[data-task=">"] > p > input:checked:after {
    -webkit-mask-position: 50% 50%;
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="%23000000"><polyline points="9,4.5 18,12 9,19.5 7.25,17.5 14,12 7.25,6.5"></polyline></g></g></svg>');
  }
}
/* #endregion */

/* #region Mobile */

.is-mobile {
  --file-margins: 0;
  --mobile-sidebar-background: transparent;
  --view-header-height: auto;
  --input-radius: 0.5rem;
  --clickable-icon-radius: 0.25rem;
  --setting-items-radius: 0;
  --setting-items-border-width: 0;
  --setting-items-border-color: var(--background-modifier-border);
}
.is-mobile.is-dark,
.is-mobile.is-light {
  --setting-items-background: transparent;
}
.is-phone {
  /* I'm pretty sure this isn't used on mobile */
  --divider-width: 0;
  --metadata-divider-width: 0;
}
.is-phone .metadata-container {
  --metadata-divider-width: 0;
}

/* Mobile workspace */
.is-mobile #main-horizontal > .mod-root {
  padding: var(--safe-area-inset-top) calc(var(--theme-spacing-mobileHorizontalSpacing) + var(--safe-area-inset-right)) 0
    calc(var(--theme-spacing-mobileHorizontalSpacing) + var(--safe-area-inset-left));
  background: transparent;
}

.is-mobile #main-horizontal-split.mod-root #main-horizontal-tabs.mod-top {
  padding: 0;
}
.is-mobile .view-actions {
  padding: 0;
}
.is-phone .view-header .view-header-left .view-action {
  /* TODO: fix position for this when there's space left/right of main tab */
}
.is-mobile .view-header-title-container {
  height: auto;
  padding-inline-start: 0;
}
.is-phone #main-horizontal .mod-root #main-horizontal-tabs #main-horizontal-tab-container {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.is-phone
  #main-horizontal-fake-target-overlay:not(.is-in-sidebar)
  #main-horizontal-tabs
  #main-horizontal-leaf,
.is-phone .mod-root #main-horizontal-tabs #main-horizontal-leaf {
  background: transparent;
}
.is-phone #main-horizontal-leaf.mod-active .view-header {
  background: transparent;
}
.is-phone .view-header {
  padding: 0;
  column-gap: 1rem;
  row-gap: 0;
  border-bottom: none;
  flex-wrap: wrap;
  background: transparent;
}
.is-phone .view-header-title-container {
  background-color: var(--background-primary);
  border-top-left-radius: calc(
    var(--tab-radius) * min(var(--theme-setting-mobileHorizontalPadding), 0.5) /
      0.5
  );
  border-top-right-radius: calc(
    var(--tab-radius) * min(var(--theme-setting-mobileHorizontalPadding), 0.5) /
      0.5
  );
  order: 1;
  width: 100%;
  flex-shrink: 0;
  padding: 0.5em;
}
.is-phone #main-horizontal-split.mod-root .view-content {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: calc(
    var(--tab-radius) * min(var(--theme-setting-mobileHorizontalPadding), 0.5) /
      0.5
  );
  border-bottom-right-radius: calc(
    var(--tab-radius) * min(var(--theme-setting-mobileHorizontalPadding), 0.5) /
      0.5
  );
}

.mobile-navbar {
  padding-top: 0;
}

/* #region   Drawers */
#main-horizontal-drawer {
  background-color: var(--background-secondary);
  background: var(--theme-gradient-bottomToTop);
  bottom: 0;
  top: 0;

  &.theme-dark {
    /* Override weirdness in app theme */
    background: none;
  }

  .nav-header {
    border: none;
  }
}

.is-phone #main-horizontal-drawer {
    /* & .leaf-content[data-type="file-explorer"] { */
        .nav-buttons-container {
          margin: 0 1rem;
          padding: 0;
          justify-content: space-between;
        }
    /* } */
}

#main-horizontal-drawer #main-horizontal-leaf {

}
#main-horizontal-drawer-inner {
  display: flex;
  gap: 1rem;
}
#main-horizontal-drawer-active-tab-container {
  gap: 1rem;
}
#main-horizontal-drawer-tab-options,
#main-horizontal-drawer-header,
#main-horizontal-tab-options {
  margin: 0 1rem;
  padding: 0;
}
#main-horizontal-drawer-ribbon {
  border: none;
}
#main-horizontal-drawer .nav-buttons-container .nav-action-button {
  width: auto;
}

#main-horizontal-drawer-tab-select #main-horizontal-tab-header-inner {
  border-radius: var(--input-radius);
}
.mod-tappable,
#main-horizontal-drawer-active-tab-back-icon,
#main-horizontal-drawer-active-tab-icon {
  align-items: center;
  background-color: transparent;
  border-radius: var(--clickable-icon-radius);
  color: var(--theme-color-control);
  cursor: var(--cursor);
  display: flex;
  height: auto;
  justify-content: center;
  opacity: var(--icon-opacity);
  padding: var(--size-2-2) var(--size-2-3);
  transition: opacity 0.15s ease-in-out;
}
@media (hover: hover) {
  .mod-tappable:hover,
  #main-horizontal-drawer-active-tab-back-icon:hover,
  #main-horizontal-drawer-active-tab-icon:hover {
    /* Use hover state for feedback if using a pointing device */
    color: var(--theme-color-controlHover);
    background-color: var(--background-modifier-hover);
  }
}
#main-horizontal-drawer-tab-option-item {
  border-radius: var(--clickable-icon-radius);
  padding: var(--size-2-2) var(--size-2-3);
}
@media (hover: hover) {
  #main-horizontal-drawer-tab-option-item:hover {
    color: var(--theme-color-controlHover);
    background-color: var(--background-modifier-hover);
  }
  #main-horizontal-drawer-tab-option-item:hover
    #main-horizontal-drawer-tab-option-item-icon,
  #main-horizontal-drawer-tab-option-item:hover
    #main-horizontal-drawer-tab-option-item-title {
    color: var(--theme-color-controlHover);
  }
}
/* These are separate elements, but I want them to look like one */
#main-horizontal-drawer-active-tab-icon,
#main-horizontal-drawer-active-tab-icon + #main-horizontal-drawer-active-tab-title {
  padding: var(--size-2-2) var(--size-2-3);
  border-radius: var(--clickable-icon-radius);
}
/* Match height of #main-horizontal-drawer-active-tab-icon */
#main-horizontal-drawer-active-tab-title {
  height: calc(24px + var(--size-2-2) * 2);
  vertical-align: baseline;
  line-height: 24px;
}
#main-horizontal-drawer-active-tab-icon + #main-horizontal-drawer-active-tab-title {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  /* Hide gap */
  margin-inline-start: calc(-1 * var(--size-4-2));
}
#main-horizontal-drawer-active-tab-icon:has(+ #main-horizontal-drawer-active-tab-title) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
@media (hover: hover) {
  #main-horizontal-drawer-active-tab-icon + #main-horizontal-drawer-active-tab-title:hover,
  #main-horizontal-drawer-active-tab-icon:hover + #main-horizontal-drawer-active-tab-title,
  #main-horizontal-drawer-active-tab-icon:has(
      + #main-horizontal-drawer-active-tab-title:hover
    ) {
    color: var(--theme-color-controlHover);
    background-color: var(--background-modifier-hover);
  }
}
/* #endregion */
/* #region   Pull action */
.pull-action.mod-activated {
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
}
.pull-down-action {
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  width: auto;
  max-width: 30rem;
  margin: var(--safe-area-inset-top) auto 0 auto;
  padding: 0.5em 1em;
  text-align: center;
  border-radius: var(--radius-l);
}
.pull-action {
  position: absolute;
  background-color: var(--background-secondary);
  z-index: var(--layer-popover);
  color: var(--text-muted);
  font-size: 90%;
  transition: background-color ease-in-out 150ms;
}
/* #endregion */
/* #region   Mobile modals */
.is-phone {
  --theme-length-closeButtonWidth: 2rem;
}
.is-phone .modal-container {
  padding-top: max(
    calc(
      var(--safe-area-inset-top) + 2 *
        var(--theme-spacing-mobileHorizontalSpacing)
    ),
    calc(var(--safe-area-inset-top) + 0.5rem)
  );
  padding-bottom: max(
    calc(
      var(--safe-area-inset-bottom) + 2 *
        var(--theme-spacing-mobileHorizontalSpacing)
    ),
    calc(var(--safe-area-inset-bottom) + 0.5rem)
  );
  /* TODO: removing these as they spoil the slide-in effect, but need to check whether this looks right in practice before deleting */
  /* padding-inline-end: max(
    calc(
      var(--safe-area-inset-right) + 2 *
        var(--theme-spacing-mobileHorizontalSpacing)
    ),
    calc(var(--safe-area-inset-right) + 0.5rem)
  ); */
  /* padding-inline-start: max(
    calc(
      var(--safe-area-inset-left) + 2 *
        var(--theme-spacing-mobileHorizontalSpacing)
    ),
    calc(var(--safe-area-inset-left) + 0.5rem)
  ); */
}
.is-phone .mod-confirmation .modal {
  left: max(calc(var(--theme-spacing-mobileHorizontalSpacing)), 0.5rem);
  right: max(calc(var(--theme-spacing-mobileHorizontalSpacing)), 0.5rem);
  width: min(
    calc(
      100vw - 2 * var(--theme-spacing-mobileHorizontalSpacing),
      calc(100vw - 1rem)
    )
  );
}
.is-phone .modal,
.is-phone .modal.mod-lg,
.is-phone .modal.mod-sidebar-layout {
  border-radius: var(--modal-radius);
}

.is-phone .modal .modal-title {
  margin-inline-start: 2rem;
  margin-inline-end: 2rem;
}
.is-phone .modal.mod-sidebar-layout .modal-content > * {
  padding: 1em calc(1em + var(--safe-area-inset-right)) 1em
    calc(1em + var(--safe-area-inset-left));
}
.is-phone .vertical-tab-header-group {
  margin: 0 auto;
  width: 100%;

  .vertical-tab-header-group-items {
    border-radius: var(--radius-m);
    overflow: hidden;
  }
}
.is-phone
  .modal.mod-settings
  .vertical-tab-header
  > .vertical-tab-header-group:last-child {
  padding-bottom: inherit;
}
.is-phone .modal.mod-settings .vertical-tab-header {
  background: transparent;
}
.is-phone .modal.mod-settings .vertical-tab-nav-item {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: transparent;
  padding: 0 0.75em;
  margin: 0;
  border-radius: 0;
  border: none;
  transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
}
@media (hover: hover) {
  .is-phone .modal.mod-settings .vertical-tab-nav-item:hover {
    background-color: var(--theme-color-controlBgHover);
    .vertical-tab-nav-item-chevron {
      color: var(--theme-color-controlHover);
    }
  }
}
.is-phone .modal.mod-sidebar-layout .modal-title {
  border-bottom: none;
}
.is-phone .modal.mod-settings .vertical-tab-nav-item-chevron,
.is-phone .modal.mod-settings .vertical-tab-nav-item-title {
  border-bottom: none;
}
body.is-phone.theme-setting-mobileCardsUI .modal.mod-sidebar-layout .modal-title {
  padding: 0.5rem 1rem 0.5rem 1rem;
}
.is-phone .modal.mod-settings .vertical-tab-content {
  background-color: var(--theme-color-settingsGroupBg);
  padding: var(--size-4-5) max(var(--size-4-5), var(--safe-area-inset-right))
    100px max(var(--size-4-5), var(--safe-area-inset-left));
  border-radius: var(--radius-m);
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.is-phone {
  & .modal .modal-nav-action {
    top: 0.5rem;
  }
}
.is-phone .modal .modal-nav-action.mod-cta {
  color: var(--theme-color-controlText);
  right: 1rem;
}
.is-phone .modal .modal-nav-action.mod-secondary {
  left: 1rem;
}
.is-phone .mod-confirmation .modal .modal-title {
  border-bottom: none;
}
.is-phone .modal.mod-lg .modal-close-button,
.is-phone .modal.mod-sidebar-layout .modal-close-button {
  top: 0.5rem;
  width: var(--theme-length-closeButtonWidth);
  height: var(--theme-length-closeButtonWidth);
}
.is-phone .modal-setting-back-button {
  top: 0.5rem;
  padding: 0;
  left: calc(2 * var(--theme-length-closeButtonWidth));

  .modal-setting-back-button-icon {
    width: var(--theme-length-closeButtonWidth);
    height: var(--theme-length-closeButtonWidth);
  }
}

body.is-phone.theme-setting-mobileCardsUI
  .modal.mod-sidebar-layout
  .modal-setting-back-button {
  top: 0.5rem;
  left: 2.5rem;
  padding: 0;
}
body.is-phone.theme-setting-mobileCardsUI .community-modal-search-summary {
  padding: 0;
}
.is-phone .modal.mod-community-modal .modal-content .modal-sidebar {
  padding: 0;
}
.is-phone .mod-community-modal .community-modal-controls {
  padding: 1em;
}
.is-phone .modal.mod-lg .modal-header,
.is-phone .modal.mod-sidebar-layout .modal-header {
  padding: 0.5em 0;
  display: flex;
  justify-content: center;
  border-bottom: none;
}
/* #endregion */
/* #region   Mobile scaling */
/* Scale background elements smaller than foreground */
body.is-phone.theme-setting-mobileCardsUI:has(.modal-container)
  #main-horizontal
  > .mod-root
  .mod-active,
body.is-phone.theme-setting-mobileCardsUI:has(#main-horizontal-drawer)
  #main-horizontal
  > .mod-root
  .mod-active {
  transition: transform 0.5s ease-in-out;
  transform: scale(0.95) translateY(-1.5rem);
}
body.is-phone.theme-setting-mobileCardsUI:not(
    :has(.modal-container:focus-within)
  ):not(:has(.modal))
  #main-horizontal
  > .mod-root
  .mod-active {
  transition: transform 0.5s ease-in-out;
  transform: scale(1) translateY(0);
}
body.is-phone.theme-setting-mobileCardsUI:has(.modal-container)
  #main-horizontal
  > .mod-root
  .mod-active
  .view-header-title-container {
  border-top-left-radius: var(--tab-radius);
  border-top-right-radius: var(--tab-radius);
}
body.is-phone.theme-setting-mobileCardsUI:has(.modal-container)
  #main-horizontal
  > .mod-root
  .mod-active
  .view-content {
  border-bottom-left-radius: var(--tab-radius);
  border-bottom-right-radius: var(--tab-radius);
}
body.is-phone.is-phone.theme-setting-mobileCardsUI .modal-container {
  padding: max(calc(var(--theme-spacing-mobileHorizontalSpacing)), 0.5rem);
}
body.is-phone.theme-setting-mobileCardsUI .mod-confirmation .modal {
  left: max(calc(var(--theme-spacing-mobileHorizontalSpacing)), 0.5rem);
  right: max(calc(var(--theme-spacing-mobileHorizontalSpacing)), 0.5rem);
  width: min(
    calc(
      100vw - 2 * var(--theme-spacing-mobileHorizontalSpacing),
      calc(100vw - 1rem)
    )
  );
}
/* Style similarly to mobile prompt */
body.is-phone.theme-setting-mobileCardsUI .modal.mod-sidebar-layout {
  width: min(
    calc(100vw - 2 * var(--theme-spacing-mobileHorizontalSpacing)),
    calc(100vw - 1rem)
  );
  margin-inline-end: max(calc(var(--theme-spacing-mobileHorizontalSpacing)), 0.5rem);
  margin-inline-start: max(calc(var(--theme-spacing-mobileHorizontalSpacing)), 0.5rem);
  margin-top: calc(var(--safe-area-inset-top) + var(--header-height) + 1em);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
}
/* #endregion */
/* #region   Mobile toolbar */
.mobile-toolbar {
  background-color: var(--theme-color-mobileToolbarBg);
}
.mobile-toolbar-options-container.mod-fade:not(.mod-at-start):before,
.mobile-toolbar-options-container.mod-fade:not(.mod-at-end):after {
  background-color: var(--theme-color-mobileToolbarBg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: var(--mobile-toolbar-height);
  line-height: 1em;
  margin: 0;
  top: 0;
  width: 1rem;
  z-index: 1;
}
.mobile-toolbar-options-container.mod-fade:not(.mod-at-start):before {
  background-image: url('data:image/svg+xml; utf8, <svg width="8px" height="32px" viewBox="0 0 8 32" xmlns="http://www.w3.org/2000/svg" stroke="rgb(0,0,0,0.25)" fill="none" stroke-width="2"><path d="M7,1L1,16L7,31"/></svg>');
  content: "";
  left: 0;
}
.mobile-toolbar-options-container.mod-fade:not(.mod-at-end):after {
  background-image: url('data:image/svg+xml; utf8, <svg width="8px" height="32px" viewBox="0 0 8 32" xmlns="http://www.w3.org/2000/svg" stroke="rgb(0,0,0,0.25)" fill="none" stroke-width="2"><path d="M1,1L7,16L1,31"/></svg>');
  content: "";
  right: var(--toolbar-option-width);
}
/* #endregion */
/* #region   Mobile tab switcher */
.mobile-tab-switcher {
  .mobile-tab-switcher-scroll {
    background: var(--theme-gradient-DarkenedTopToBottom);
  }
  .mobile-tab-switcher-menubar {
    border-top: 0;
    background: var(--theme-color-settingsBg);
    box-shadow: var(--theme-shadow-indent);
    padding-top: 0;

    z-index: 1;
  }

  .mobile-tab-group-container {
    column-gap: 1em;
    row-gap: 0.75em;
  }

}
.mobile-tab .mobile-tab-preview {
  position: relative;
  height: 12rem;
  background-color: var(--tab-background-inactive);
  border-radius: var(--tab-switcher-preview-radius);
}
.mobile-tab.is-active .mobile-tab-preview {
  background-color: var(--background-primary);
}
.mobile-tab-preview-empty {
  background-color: transparent;
}
/* #endregion */
/* #endregion */

/* TODO: figure out the right balance for floating nav to minimise overlap */
.is-mobile.is-floating-nav.is-phone #main-horizontal-drawer .leaf-content .nav-header ~ div:last-child {
 margin-bottom: calc(44px + 0.5rem);
}

/* #region Workspace */
/* #region   Overall workspace */
* {
  scrollbar-color: var(--theme-color-baseTransparent25) transparent;
}
@media (hover: hover) {
  *:hover {
    scrollbar-color: var(--theme-color-baseTransparent50) transparent;
  }
}
body {
  position: relative;
}
.app-container {
  background-color: var(--background-secondary);
  background: var(--theme-gradient-bottomToTop);
}
body.theme-setting-fullWidthStatusBar #main-horizontal {
  margin-bottom: var(--theme-length-statusBarHeight);
}
#main-horizontal {
  background: transparent;
}
#main-horizontal-split.mod-root {
  background: transparent;
  background: var(--theme-gradient-topToBottom);
  padding-bottom: 1.5rem;
  padding: 0 0.5em var(--theme-length-statusBarHeight) 0.5em;
}

.nav-header {
  padding: 0.5rem;
}
.view-content {
  position: relative;
}
/* #endregion */
/* #region   Windows window frame styles */
/* #region     "Obsidian frame" style */
body.mod-windows {
  &.is-frameless:not(.is-hidden-frameless) {
    /* Override default appearance for .mod-close, as this one simulates a system control. */
    .titlebar-button.mod-close {
      border-radius: 0;
      width: auto;
    }
  }
}
/* #endregion */
/* #endregion */
/* #region   Tabs */
#main-horizontal-tabs #main-horizontal-leaf {
  background: transparent;
}
.sidebar-toggle-button,
#main-horizontal-tabs.mod-top,
.is-focused .sidebar-toggle-button,
.is-focused #main-horizontal-tabs.mod-top {
  --tab-container-background: transparent;
}
#main-horizontal-tab-header-container {
  padding: 0;

  #main-horizontal-tab-header {
    background-color: var(--tab-background-inactive);
    border-radius: var(--tab-radius-active) var(--tab-radius-active) 0 0;

    &.is-active {
      box-shadow: var(--theme-shadow-input);
    }
  }
}
#main-horizontal-tab-header-container-inner {
  gap: 0.25em;
}

#main-horizontal-tab-header-inner {
  padding: 0.5rem;
}

@media (hover: hover) {
  #main-horizontal-tab-header-container {
    #main-horizontal-tab-header:not(.is-active):hover #main-horizontal-tab-header-inner {
      color: var(--icon-color-focused);
      background-color: var(--theme-color-tabBgInactiveHover);
    }
    #main-horizontal-tab-header-inner:hover #main-horizontal-tab-header-inner-icon {
      color: var(--icon-color-focused);
      opacity: var(--icon-opacity);
    }
  }
}

#main-horizontal-leaf.mod-active .view-header-title {
  color: var(--tab-text-color-active);
  display: block;
}
.is-focused #main-horizontal-leaf.mod-active .view-header-title {
  color: var(--tab-text-color-focused-active-current);
}

.is-mobile .mod-root #main-horizontal-tab-header-container {
  min-height: 44px;
}

#main-horizontal-split.mod-root {
  #main-horizontal-tabs.mod-top {
    padding-top: 0.5rem;
  }

  #main-horizontal-tab-header-container {
    #main-horizontal-tab-header::before,
    #main-horizontal-tab-header::after {
      box-shadow: inset 0 0 0 var(--tab-outline-width) var(--tab-outline-color), 0 0 0 calc(var(--tab-curve) * 4) var(--tab-background-inactive);
    }
    #main-horizontal-tab-header.is-active::before,
    #main-horizontal-tab-header.is-active::after {
      box-shadow: inset 0 0 0 var(--tab-outline-width) var(--tab-outline-color), 0 0 0 calc(var(--tab-curve) * 4) var(--tab-background-active);
    }
  }
}
@media (hover: hover) {
  #main-horizontal-split.mod-root {
    #main-horizontal-tab-header-container {
      #main-horizontal-tab-header:not(.is-active):hover::before,
      #main-horizontal-tab-header:not(.is-active):hover::after {
        box-shadow: inset 0 0 0 var(--tab-outline-width) var(--tab-outline-color), 0 0 0 calc(var(--tab-curve) * 4) var(--background-modifier-hover);;
      }
    }
  }
}

#main-horizontal .mod-root {
  #main-horizontal-tabs {
    padding: 0.375em 0.5em 0.375em 0.5em;
    border-radius: 0;
  }
  #main-horizontal-tabs #main-horizontal-tab-container {
    background-color: var(--background-primary);
    border-radius: var(--tab-radius);
    box-shadow: var(--theme-shadow-input);
  }
  #main-horizontal-tab-header-container-inner {
    /* Define spacing on tabs to fit with radius */
    padding: 0 calc(var(--tab-radius) * 2) 0 calc(var(--tab-radius) * 2);
  }
  #main-horizontal-tab-header {
    padding: 0;
  }
  #main-horizontal-tab-header-inner::after {
    /* Not sure what this is for */
    background: transparent;
  }
  #main-horizontal-tab-header-inner {
    border-radius: var(--tab-radius-active) var(--tab-radius-active) 0 0;
    container-name: root-tab;
    container-type: size;
    padding: 0.5rem 0.25rem 0.5rem 0.5rem;
  }
  #main-horizontal-tab-header.is-active #main-horizontal-tab-header-inner {
    padding-inline-start: 0.25rem;
  }
  @media (hover: hover) {
    #main-horizontal-tab-header:hover #main-horizontal-tab-header-inner {
      padding-inline-start: 0.25rem;
    }
  }
  /* Show icons for markdown tabs, unless they get too narrow. */
  #main-horizontal-tab-header[data-type="markdown"] #main-horizontal-tab-header-inner-icon,
  #main-horizontal-tab-header[data-type="empty"] #main-horizontal-tab-header-inner-icon {
    display: none;
  }
  @container root-tab (min-width: 5em) {
    #main-horizontal-tab-header[data-type="markdown"]
      #main-horizontal-tab-header-inner-icon,
    #main-horizontal-tab-header[data-type="empty"] #main-horizontal-tab-header-inner-icon {
      display: flex;
    }

  }
}
/* #region     Wrap tabs setting */
body.theme-setting-wrapTabs {
  #main-horizontal-tab-header-container {
    height: auto;
  }
  #main-horizontal-tab-header-container-inner {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.25em 0.25em;
  }
  #main-horizontal .mod-root #main-horizontal-tab-header {
    min-width: 8em;
    height: calc(var(--icon-size) + 1rem);
    flex-basis: content;
    flex-grow: 0;
    order: 0;
    container-type: normal;
    z-index: 1;

    &.is-active {
      order: 1;
    }
  }
  #main-horizontal .mod-root #main-horizontal-tab-header-inner {
    container-type: normal;
  }
}

/* #endregion */
/* #region     Tabs with Obsidian navigation or data (as opposed to user content) can have a different inactive color */
body.theme-setting-distinguishNonContentTabs {

  #main-horizontal-split.mod-root {
    & #main-horizontal-tab-header-container {
      #main-horizontal-tab-header[data-type="bases"],
      #main-horizontal-tab-header[data-type="calendar"],
      #main-horizontal-tab-header[data-type="graph"],
      #main-horizontal-tab-header[data-type="localgraph"],
      #main-horizontal-tab-header[data-type="map"],
      #main-horizontal-tab-header[data-type="webviewer"] {
        background-color: var(--theme-color-tabNavBg);

        &:before,
        &:after {
          box-shadow: inset 0 0 0 var(--tab-outline-width) var(--tab-outline-color), 0 0 0 calc(var(--tab-curve)* 4) var(--theme-color-tabNavBg);
        }
      }

      #main-horizontal-tab-header[data-type="bases"].is-active,
      #main-horizontal-tab-header[data-type="calendar"].is-active,
      #main-horizontal-tab-header[data-type="graph"].is-active,
      #main-horizontal-tab-header[data-type="localgraph"].is-active,
      #main-horizontal-tab-header[data-type="map"].is-active,
      #main-horizontal-tab-header[data-type="webviewer"].is-active {
        background-color: var(--theme-color-tabNavActiveBg);

        &:before,
        &:after {
          box-shadow: inset 0 0 0 var(--tab-outline-width) var(--tab-outline-color), 0 0 0 calc(var(--tab-curve)* 4) var(--theme-color-tabNavActiveBg);
        }
      }
    }
  }



  .leaf-content[data-type="bases"],
  .leaf-content[data-type="calendar"],
  .leaf-content[data-type="graph"],
  .leaf-content[data-type="localgraph"],
  .leaf-content[data-type="map"],
  .leaf-content[data-type="webviewer"],
  .is-focused #main-horizontal-leaf.mod-active .leaf-content[data-type="bases"],
  .is-focused #main-horizontal-leaf.mod-active .leaf-content[data-type="calendar"],
  .is-focused #main-horizontal-leaf.mod-active .leaf-content[data-type="graph"],
  .is-focused #main-horizontal-leaf.mod-active .leaf-content[data-type="localgraph"],
  .is-focused #main-horizontal-leaf.mod-active .leaf-content[data-type="map"],
  .is-focused #main-horizontal-leaf.mod-active .leaf-content[data-type="webviewer"] {
    .view-header {
      background-color: var(--theme-color-tabNavActiveBg);
      border-bottom: none;

      .mod-fade:after {
        display: none;
      }
    }
  }
}

/* #endregion */
/* #endregion */

/* #region     Empty state */
.leaf-content[data-type="empty"] .empty-state-title {
  display: none;
}
.empty-state {
  justify-content: flex-start;
  padding-top: 3em;
}
.empty-state-container {
  background: var(--theme-color-emptyStateBg);
  border-radius: var(--radius-m);
  max-height: none;
  max-width: none;
  padding: 1.5em 1.5em 1.5em 1.5em;
  margin: 1.5em;
}
.empty-state-action-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-top: 0;
}
.empty-state-action-list .empty-state-action {
  padding: 0 1.5em;
}
.empty-state-action-list .empty-state-action.mod-close {
  display: none;
}
.is-mobile {
  .empty-state-action-list {
    gap: 1em;
    margin: 0;
  }
  .empty-state-action {
    margin: 0;
  }
}
/* #endregion */
/* #region     Sidebars */
.mod-sidedock {
  padding-bottom: 1em;

  &:has(#main-horizontal-sidedock-vault-profile) {
    padding-bottom: 0;
  }

  #main-horizontal-tabs {
    gap: 0;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }
  #main-horizontal-tabs:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  #main-horizontal-tab-header-container {
    height: auto;
    justify-content: center;
    margin-top: 0;

    #main-horizontal-tab-header-container-inner {
      background: var(--tab-background-inactive);
      border-radius: var(--radius-s);
      flex-wrap: wrap;
      gap: 0;
      padding: 0;
      margin: 0 0 0 0;
      overflow: hidden;

      /* Override scrollbar color, because it forces the scrollbar to appear and we want it invisible here */
      scrollbar-color: auto;

      #main-horizontal-tab-header {
        border-radius: 0;
      }
    }
    #main-horizontal-tab-header-container-inner:has(
        #main-horizontal-tab-header[data-type="markdown"].is-active:last-child
      ) {
      border-bottom-right-radius: 0;
    }
    #main-horizontal-tab-header-container-inner:has(
        #main-horizontal-tab-header[data-type="markdown"].is-active:first-child
      ) {
      border-bottom-left-radius: 0;
    }
  }
  #main-horizontal-tabs.mod-top > #main-horizontal-tab-header-container {
    margin-top: 0.5em;
  }

  #main-horizontal-tab-header {
    background: var(--tab-background-inactive);
  }

  #main-horizontal-tab-header.has-active-menu,
  #main-horizontal-tab-header.is-active {
    background: var(--theme-color-switcherBgActive);
  }
  #main-horizontal-tab-header[data-type="markdown"] {
    background-color: var(--tab-background-inactive);
    color: var(--tab-text-color-active);
  }
  #main-horizontal-tab-header[data-type="markdown"].is-active,
  #main-horizontal-tab-header[data-type="webviewer"].is-active {
    color: var(--tab-text-color-active);
    border-radius: var(--tab-radius-active) var(--tab-radius-active) 0 0;

    #main-horizontal-tab-header-inner-icon {
      color: var(--icon-color);
    }
  }
  #main-horizontal-tab-header[data-type="markdown"].is-active {
    background-color: var(--tab-background-active);

  }

  #main-horizontal-tab-header-inner {
    border-radius: 0;
  }

  /* TODO: this idea to show the name of the active tab got too messy in practice - is there a better way? */
  /* #main-horizontal-tab-header.is-active #main-horizontal-tab-header-inner-title {
    color: var(--icon-color-focused);
    display: block;
    text-overflow: ellipsis;
    flex-basis: 8ch;
    flex-grow: 0;
    flex-shrink: 1;
  } */

  #main-horizontal-tab-header-spacer {
    display: none;
  }


  .leaf-content {
    .view-content {
      padding: 0.5rem 1rem 0.5rem 1rem;
    }
  }
  ,
  .leaf-content[data-type="webviewer"] {
    padding: 0 1rem;

    .view-header {
      border-radius: var(--tab-radius-active) var(--tab-radius-active) 0 0;
    }

    .view-content {
      background-color: var(--tab-background-active);
      border-radius: var(--tab-radius);
    }
  }
}

/* Override built-in style for .is-focused */
.is-focused {
  .mod-sidedock {
    #main-horizontal-tab-header.is-active
    #main-horizontal-tab-header-inner-icon {
      color: var(--icon-color-focused);
    }
    #main-horizontal-tab-header.is-active #main-horizontal-tab-header-inner-title {
      color: var(--icon-color-focused);
    }
    #main-horizontal-tab-header[data-type="markdown"].is-active {
      color: var(--tab-text-color-focused-active);

      #main-horizontal-tab-header-inner-icon {
        color: var(--tab-text-color-focused-active-current);
      }
    }
  }

  /* .mod-active
  #main-horizontal-tab-header.is-active
  #main-horizontal-tab-header-inner-icon {
    color: var(--text-normal);
  } */
}

.mod-left-split {
  .leaf-content {
    .view-content {
      /* Reduce left padding as the sidebar also provides visual spacing */
      padding-inline-start: 0.5rem;
    }
  }
}
/* #endregion */
/* #endregion */
/* #region   Stacked tabs */
#main-horizontal
  .mod-root
  #main-horizontal-tabs.mod-stacked
  #main-horizontal-tab-container
  #main-horizontal-tab-header {
  background-color: var(--tab-background-inactive);
  box-shadow: var(--theme-shadow-input);
}
#main-horizontal
  .mod-root
  #main-horizontal-tabs.mod-stacked
  #main-horizontal-tab-container
  #main-horizontal-tab-header.is-active {
  background-color: var(--background-primary);
} /* #endregion */
/* #region   Ribbon */
#main-horizontal-ribbon {
  padding-inline-start: 0;
  margin-bottom: 2.5rem;
}
.side-dock-actions {
  border-top-right-radius: var(--radius-m);
  border-bottom-right-radius: var(--radius-m);
  padding: var(--size-2-3);
  background: var(--ribbon-background);
}
.side-dock-actions .side-dock-ribbon-action {
  margin: 0;
}
.side-dock-actions .side-dock-ribbon-action.clickable-icon {
  color: var(--theme-color-control);
  height: 2em;
  width: 2em;
}
.side-dock-actions .side-dock-ribbon-action.clickable-icon.is-active {
  color: var(--theme-color-controlActive);
}
/* #endregion */
/* #region   Sidedock Vault Profile */
body:not(.is-mobile)
  #main-horizontal-split.mod-left-split
  #main-horizontal-sidedock-vault-profile {
  background-color: transparent;
  padding: 0 0.5rem 0.25em 0.5rem;
}
@media (hover: hover) {
  body:not(.is-mobile) #main-horizontal-split.mod-left-split #main-horizontal-sidedock-vault-profile #main-horizontal-drawer-vault-switcher:hover #main-horizontal-drawer-vault-switcher-icon {
    color: var(--theme-color-controlHover);
  }
}
body.show-ribbon:not(.is-mobile)
  #main-horizontal-split.mod-left-split
  #main-horizontal-sidedock-vault-profile {
  margin-inline-start: calc(-1 * var(--ribbon-width));
  width: calc(100% + var(--ribbon-width));
}
/* #endregion */
/* #region   Status bar */
.status-bar {
  border: none;
  border-top-left-radius: var(--radius-m);
  border-top-right-radius: var(--radius-m);
  gap: 1rem;
  padding: 0 0.5rem 0.25em 0.5rem;
  right: auto;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: var(--theme-length-statusBarHeight);
  justify-content: space-between;
}
body.theme-setting-fullWidthStatusBar .status-bar {
  width: 100%;
}
.status-bar-item {
  line-height: 1rem;
  padding: 0.25em 0.5em;
  width: auto;
  white-space: nowrap;
  gap: 0.25em;
  height: 100%;
}
.status-bar-item:has(.status-bar-item) {
  padding: 0;
}
.status-bar-item.mod-clickable {
  color: var(--theme-color-control);
}
@media (hover: hover) {
  .status-bar-item.mod-clickable:hover {
    color: var(--theme-color-controlHover);
  }
}
.theme-picker-color-scheme-icon > svg {
  fill: var(--theme-color-control);
}
@media (hover: hover) {
  .theme-picker-color-scheme-icon:hover > svg {
    fill: var(--theme-color-controlHover);
  }
}
@media (hover: hover) {
  .status-bar-item:hover .sync-status-icon.mod-working {
    color: var(--text-normal);
  }
}
.status-bar-item.plugin-editor-status,
.status-bar-item.plugin-sync {
  padding: 0.25em 0.5em;
}
/* #endregion */
/* #region   Panes */
.pane-empty {
  color: var(--empty-pane-color);
}
/* #endregion */
/* #endregion */

/* #region   macOS window frame styles */
body.mod-macos {
  #main-horizontal-tab-header-new-tab,
  #main-horizontal-tab-header-tab-list {
    padding: 0;
    margin: 0;
  }
}

/* #region     "Native frame" style */
body.mod-macos {
  &:not(.is-frameless) {
    &:not(.is-mobile) {
      .sidebar-toggle-button.mod-left,
      .sidebar-toggle-button.mod-right {
        padding: 0;
        position: absolute;
      }
      .mod-sidedock {
        #main-horizontal-tabs.mod-top-right-space #main-horizontal-tab-header-container-inner {
          margin-inline-end: 2.5em;
        }
      }
      .mod-left-split {
        #main-horizontal-tabs.mod-top > #main-horizontal-tab-header-container {
            padding-inline-end: 1rem;
        }
      }
      .mod-right-split {
        #main-horizontal-tabs.mod-top > #main-horizontal-tab-header-container {
            padding-inline-start: 1rem;
        }
      }

      &:not(.is-fullscreen) {
        #main-horizontal.is-left-sidedock-open {
          .sidebar-toggle-button.mod-left {
            top: 0.5em;
          }
        }
        #main-horizontal:not(.is-left-sidedock-open) {
          .sidebar-toggle-button.mod-left {
            top: 0.5em;
          }
        }
        #main-horizontal:not(.is-right-sidedock-open) {
          .sidebar-toggle-button.mod-right {
            top: 0;
            right: -0.5em;
          }
          #main-horizontal-tab-header-container {
            padding-inline-end: 1.5em;
          }
        }
        #main-horizontal.is-right-sidedock-open {
          .sidebar-toggle-button.mod-right {
            top: 0;
            right: 0.5em;
          }
        }
      }
    }
    &.is-tablet {
      .sidebar-toggle-button.mod-left,
      .sidebar-toggle-button.mod-right {
        padding: 0;
      }
      .sidebar-toggle-button.mod-left {
        top: 0;
        left: 0;
      }
      .sidebar-toggle-button.mod-right {
        top: 0;
        right: 0;
      }
    }
  }
}
/* #endregion */
/* #region     "Obsidian frame" style */
body.mod-macos {
  &.is-frameless:not(.is-hidden-frameless) {
    --titlebar-height: 40px;

    &:not(.is-mobile) {
      .sidebar-toggle-button.mod-left,
      .sidebar-toggle-button.mod-right {
        padding: 0;
        position: absolute;
      }
      .mod-sidedock {
        #main-horizontal-tabs.mod-top-right-space #main-horizontal-tab-header-container-inner {
          margin-inline-end: 2.5em;
        }
      }
      .mod-left-split {
        #main-horizontal-tabs.mod-top > #main-horizontal-tab-header-container {
            padding-inline-end: 1rem;
        }
      }
      .mod-right-split {
        #main-horizontal-tabs.mod-top > #main-horizontal-tab-header-container {
            padding-inline-start: 1rem;
        }
      }

      &:not(.is-fullscreen) {
        #main-horizontal.is-left-sidedock-open {
          .sidebar-toggle-button.mod-left {
            top: 0.5em;
          }
        }
        #main-horizontal:not(.is-left-sidedock-open) {
          .sidebar-toggle-button.mod-left {
            top: 0.5em;
          }
        }
        #main-horizontal:not(.is-right-sidedock-open) {
          .sidebar-toggle-button.mod-right {
            top: 0;
            right: -0.5em;
          }
          #main-horizontal-tab-header-container {
            padding-inline-end: 1.5em;
          }
        }
        #main-horizontal.is-right-sidedock-open {
          .sidebar-toggle-button.mod-right {
            top: 0;
            right: 0.5em;
          }
        }
      }
      &.is-fullscreen {
        #main-horizontal.is-left-sidedock-open {
          .sidebar-toggle-button.mod-left {
            top: 0.5em;
          }
        }
        #main-horizontal:not(.is-left-sidedock-open) {
          .sidebar-toggle-button.mod-left {
            top: 0.5em;
          }
        }
        #main-horizontal.is-right-sidedock-open {
          .sidebar-toggle-button.mod-right {
            top: 0;
            right: 0.5em;
          }
        }
        #main-horizontal:not(.is-right-sidedock-open) {
          .sidebar-toggle-button.mod-right {
            top: 0;
            right: -0.5em;
          }
          .mod-root #main-horizontal-tab-header-container {
            padding-inline-end: 1.5em;
          }
        }
        #main-horizontal-ribbon .sidebar-toggle-button.mod-left {
          left: 0;
        }
      }
    }
    &.is-tablet {
      .sidebar-toggle-button.mod-left,
      .sidebar-toggle-button.mod-right {
        padding: 0;
      }
      .sidebar-toggle-button.mod-left {
        top: 0;
        left: 0;
      }
      .sidebar-toggle-button.mod-right {
        top: 0;
        right: 0;
      }
    }
  }
}
/* #endregion */
/* #region     "Hidden (default)" style. This is the default appearance! */
/* In this window style we need to make sure buttons don't overlap the window controls. */
body.mod-macos.is-frameless.is-hidden-frameless {
  #main-horizontal #main-horizontal-tabs.mod-top-left-space #main-horizontal-tab-header-container,
  #main-horizontal
    #main-horizontal-tabs.mod-top-right-space
    #main-horizontal-tab-header-container {
    padding: 0 1rem;
  }

  /* This element also seems to be a handle for window dragging */
  .mod-sidedock #main-horizontal-tabs.mod-top #main-horizontal-tab-header-container {
    margin-top: calc(var(--header-height) + 0.5rem);
    height: auto;
    align-items: flex-end;
  }
  .mod-sidedock #main-horizontal-tab-header-container-inner {
    height: auto;
  }
  .sidebar-toggle-button.mod-left,
  .sidebar-toggle-button.mod-right {
    padding: 0;
    position: fixed;
  }

  &:not(.is-fullscreen) {
    #main-horizontal-ribbon.mod-left {
      margin-top: 0;
      padding-top: var(--header-height);
    }

    .sidebar-toggle-button.mod-left {
      top: 0.25rem;
      left: calc(var(--ribbon-width) + var(--frame-left-space));
    }
    .sidebar-toggle-button.mod-right {
      top: 0.25rem;
      right: calc(0.25rem + var(--frame-right-space));
    }
    #main-horizontal.is-left-sidedock-open {
      .mod-root .sidebar-toggle-button.mod-left {
        display: none;
      }
    }
    #main-horizontal:not(.is-left-sidedock-open) {
      .mod-sidedock .sidebar-toggle-button.mod-left {
        display: none;
      }
    }

    #main-horizontal:not(.is-left-sidedock-open) {
      .mod-root #main-horizontal-tab-header-container {
        padding-inline-start: calc(var(--frame-left-space) + 0.75rem);
      }
    }
    #main-horizontal:not(.is-right-sidedock-open) {
      .mod-root #main-horizontal-tab-header-container {
        padding-inline-end: calc(var(--frame-right-space) + 1rem);
      }
    }
  }
  &.is-fullscreen {
    .sidebar-toggle-button.mod-left {
      top: 0.25rem;
      left: 0.25rem;
    }
    .sidebar-toggle-button.mod-right {
      top: 0.25rem;
      right: 0.25rem;
    }
    #main-horizontal:not(.is-right-sidedock-open) {
      .mod-root #main-horizontal-tab-header-container {
        padding-inline-end: calc(var(--frame-right-space) + 1.5rem);
      }
    }
  }

  &.is-tablet {
    .sidebar-toggle-button.mod-left,
    .sidebar-toggle-button.mod-right {
      padding: 0;
    }
    .sidebar-toggle-button.mod-left {
      position: absolute;
      top: 0;
      left: 0;
    }
    .sidebar-toggle-button.mod-right {
      position: absolute;
      top: 0;
      right: 0;
    }
    #main-horizontal .mod-root #main-horizontal-tabs #main-horizontal-tab-header-container {
      padding-inline-start: calc(var(--frame-left-space) + 2rem);
      padding-inline-end: calc(var(--frame-right-space) + 3rem);
    }
  }
  &.is-phone {
    .sidebar-toggle-button.mod-left {
      top: 0;
      left: 0;
    }
  }
}
/* #endregion */
/* #endregion */

/* #region   Windows window frame styles */
/* #region     "Obsidian frame" style */
body.mod-windows {
  &.is-frameless:not(.is-hidden-frameless) {
    /* Override default appearance for .mod-close, as this one simulates a system control. */
    .titlebar-button.mod-close {
      border-radius: 0;
      width: auto;
    }
  }
}
/* #endregion */
/* #region     "Hidden (default)" style. This is the default appearance! */
body.mod-windows {
  &.is-frameless.is-hidden-frameless:not(.is-popout-window) {
    /* Override default appearance for .mod-close, as this one simulates a system control. */
    .titlebar-button.mod-close {
      border-radius: 0;
      width: auto;
    }

    .titlebar-button.mod-logo {
      /* This is hidden by default. I'm not sure why, as it provides access to the main menu. */
      display: flex;
    }

    #main-horizontal-ribbon.side-dock-ribbon.mod-left {
      margin-top: calc(var(--header-height) + 2em);
    }

    .sidebar-toggle-button.mod-left {
      top: 2em;
    }

    /* &:not(.is-fullscreen) {
      .sidebar-toggle-button.mod-left {
        position: absolute;
      }

      #main-horizontal-ribbon.mod-left {
        margin-top: 2.5em;
        padding-top: 0;
      }
      .mod-right-split .mod-top #main-horizontal-tab-header-container {
        position: relative;
        padding-inline-end: calc(var(--frame-right-space) + 30px);

        .sidebar-toggle-button.mod-right {
          position: absolute;
          right: var(--frame-right-space);
        }
      }

      #main-horizontal.is-left-sidedock-open {
        .mod-left-split #main-horizontal-tabs {
          overflow: visible;
        }
        .sidebar-toggle-button.mod-left {
          left: var(--ribbon-width);
          top: 0.5em;
          padding: 0;
        }
      }
      #main-horizontal:not(.is-left-sidedock-open) {
        .mod-root #main-horizontal-tabs.mod-top {
          overflow: visible;
        }
        .sidebar-toggle-button.mod-left {
          left: var(--ribbon-width);
          top: 0.5em;
          padding: 0;
        }
        .mod-root #main-horizontal-tab-header-container {
          padding-inline-start: calc(var(--icon-size) + 1rem);
        }
      }
      #main-horizontal:not(.is-right-sidedock-open) {
      }
      #main-horizontal:not(.is-right-sidedock-open) {
        .sidebar-toggle-button.mod-right {
          left: var(--frame-right-space);
          top: -0.5em;
          padding: 0;
        }
      }
    } */
  }
}
/* #endregion */
/* #endregion */

/* #region   Linux window frame styles */
.mod-linux {
}
/* #endregion */

/* #region Shared UI Elements */
/* #region   Dragging */
#main-horizontal-drop-overlay:before {
  animation: 0.5s 1 alternate fadein;
  background-color: var(--theme-color-dragTarget);
  border-radius: var(--radius-m);
  opacity: 1;
}
#main-horizontal-fake-target-overlay {
  background: transparent;
}
/* #endregion */
/* #region   Menus */
/* Rendered on mobile, or if native menus are disabled */
.menu {
  background-color: var(--theme-color-menuBg);
  border: 0;
  box-shadow: var(--shadow-l);
  border-radius: var(--radius-l);
  margin: 0 1rem;
  padding: 0.5em;
}

.menu-item {
  height: 2em;
}
.menu-item,
.menu-item-icon {
  color: var(--nav-item-color);
  background-color: var(--nav-item-background);
}

.menu-item-icon {
  display: none;
}
body.theme-setting-enableIconsInMenus {
  .menu-item-icon {
    display: flex;
  }
}
.menu-item.selected:not(.is-label):not(.is-disabled) {
  background-color: var(--nav-item-background);
  border-radius: var(--radius-s);
  box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
}
.menu-item.selected:not(.is-label):not(.is-disabled):hover {
  background-color: var(--nav-item-background-hover);
}
.menu-separator {
  margin: 0.75em 0.5em;
}
@media (hover: hover) {
  .menu-item:hover {
    color: var(--nav-item-color-hover);
    background-color: var(--nav-item-background-hover);
    font-weight: var(--nav-item-weight-hover);
  }
  .menu-item:hover .menu-item-icon {
    color: var(--nav-item-color-hover);
  }
}
.is-phone {
  .menu {
    padding: 0.5rem 0.5rem var(--safe-area-inset-bottom) 0.5rem;
    width: calc(
      100% - var(--safe-area-inset-left) - var(--safe-area-inset-right) - 2 *
        var(--theme-spacing-mobileHorizontalSpacing) -
        max(2 * var(--theme-spacing-mobileHorizontalSpacing), 1rem)
    );
  }
  .menu .suggestion-group .suggestion-item:not(.is-label),
  .menu-item:not(.is-label) {
    background-color: transparent;
    border-radius: var(--radius-s);
    overflow: hidden;
  }
  .menu-group .menu-item:not(.is-label):after {
    display: none;
  }

  .menu-group .menu-item:first-child,
  .menu-group .menu-item:last-child {
    border-radius: var(--radius-s);
  }
}
/* #endregion */
/* #region   Messages */

.mod-warning,
p.mod-warning,
.setting-message {
  border-radius: var(--clickable-icon-radius);
  font-size: var(--font-ui-small);
  background: var(--theme-color-warningBg);
  padding: 0.5em 1em;
}
.mod-warning:not(button) {
  display: inline-block;
  margin: 0.5em 0;
  border: solid var(--text-error) 0.125em;
}
/* Collapse adjacent messages */
p.mod-warning ~ p.mod-warning,
p.setting-message ~ p.setting-message {
  margin-bottom: 0;
  padding-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: block;
  border-top: none;
}
p.mod-warning:has(+ p.mod-warning, .setting-message),
.setting-message:has(+ p.mod-warning, .setting-message) {
  border-top-left-radius: var(--clickable-icon-radius);
  border-top-right-radius: var(--clickable-icon-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  margin-bottom: 0;
  display: block;
}
/* #endregion */
/* #region   Notices */
/* Note that Excalidraw .HintView uses a smaller version, which could be generalised */
.notice-container {
  padding: 0;
  right: 1rem;
  top: 1rem;
}
.is-mobile .notice-container {
  padding: 0.5em 0.5em 2em 0.5em;
  top: var(--safe-area-inset-top);
  left: auto;
  right: var(--safe-area-inset-right);
}
.is-phone .notice-container {
  padding: 0.5em 0.5em 2em 0.5em;
  top: auto;
  left: var(--safe-area-inset-left);
  right: var(--safe-area-inset-right);
  max-width: 100%;
  margin: 0 auto;
  bottom: max(3rem, var(--safe-area-inset-bottom));
}
.notice,
.is-phone .notice {
  border-radius: var(--radius-xl);
  background-color: var(--background-modifier-message);
  color: var(--theme-color-notice);
  box-shadow: var(--shadow-s);
  padding: 1em 1.5em;
}
.notice {
  margin: 0 0 1rem 0;
}
.is-phone .notice {
  text-align: center;
  max-width: none;
  width: auto;
  margin: 0 0.5rem 1rem 0.5rem;
}
/* #endregion */
/* #region   Content references (search results, incoming/outgoing links, etc.) */

.search-result-file-matches {
  background: none;
  box-shadow: none;
  display: flex;
  gap: 0.5em;
  flex-direction: column;
  margin: 0;
}
.search-result-file-match,
.sync-history-list-item {
  background: var(--theme-color-contentItemBg);
  border: none;
  border-radius: var(--radius-s);
  box-shadow: none;
  color: var(--nav-item-color);
  font-weight: var(--nav-item-weight);
  padding: 0.5em 1em;
}
@media (hover: hover) {
  .search-result-file-match:hover,
  .sync-history-list-item:hover {
    background: var(--theme-color-contentItemBgHover);
    cursor: pointer;
    font-weight: var(--nav-item-weight-hover);
  }
  .search-result-hover-button:hover {
    color: var(--theme-color-controlHover);
  }
}
.sync-history-list-item:has(.sync-history-list-item-header.is-active) {
  background: var(--theme-color-contentItemBgActive);
}
.search-result-file-matched-text {
  font-weight: bold;
}
.search-result:not(.is-collapsed) .search-result-file-title {
  color: var(--theme-color-control);
}
/* #endregion */
/* #region   Trees */

.tree-item-self,
.tree-item-self.mod-collapsible {
  padding-top: 0;
  padding-bottom: 0;
}
.tree-item-self .tree-item-icon {
  /* Icons that represent an object have the same colour as the related text */
  color: inherit;
  margin: 0;
  position: relative;
}
/* These are set the same so we can use consistent em unites for spacing */
.tree-item-self,
.tree-item-children {
  font-size: var(--nav-item-size);
}
/* #endregion */
/* #region   Suggestions (Search, File Recovery, Slash commands) */
.suggestion-container,
.suggestion-container.mod-search-suggestion,
.kanban-plugin__autocomplete {
  display: flex;
  background-color: var(--theme-color-suggestionBg);
  border: none;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  list-style: none;
  padding: 0.5rem;
  margin: 0;

  #search-container {
    margin-bottom: 0.5em;
  }
}
.suggestion,
.suggestion-container.mod-search-suggestion .suggestion {
  background: transparent;
  padding: 0;
}
.suggestion-container .prompt-instructions {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  margin: 0.5rem -0.5rem -0.5rem -0.5rem;
  padding: 0.5rem 1rem;
  color: var(--theme-color-promptInstructions);
}
.suggestion-title.list-item-part {
  color: var(--text-normal);
}
.suggestion-aux {
  gap: 0.25em;
}
.suggestion-item,
.kanban-plugin__autocomplete-item,
.kanban-plugin__autocomplete-item-active {
  border: none;
  border-radius: var(--radius-m);
  padding: 0.5em 1em;
}
@media (hover: hover) {
  .suggestion-item:hover,
  .kanban-plugin__autocomplete-item:hover,
  .kanban-plugin__autocomplete-item-active:hover {
    background: var(--nav-item-background-hover);
    color: var(--nav-item-color-hover);

  }
}
.suggestion-item.mod-group,
.suggestion-item.mod-group .suggestion-title {
  color: var(--text-muted);
  padding: inherit;
  text-transform: lowercase;

  > *,
  &:first-line {
    text-transform: capitalize;
  }
}
.search-suggest-item.mod-group {
  padding: 0 1em;
}
.search-suggest-item.mod-group:not(:first-child) {
  border-top: none;
  margin: 1em 0 0 0;
  padding: 0 1em;
}

.kanban-plugin__autocomplete-item-active {
  background: inherit;
  color: inherit;
}
.suggestion-item.is-selected {
  background-color: var(--theme-color-controlBgActive);
  color: var(--theme-color-controlActive);

  .suggestion-flair {
    color: var(--nav-item-color-active);
  }
}
.suggestion-item.mod-complex.is-selected .suggestion-action {
  color: var(--theme-color-controlUISelected);
}

/* #endregion */
/* #region   Hotkeys */

.suggestion-hotkey,
.setting-hotkey,
.prompt-instruction-command {
  background: transparent;
  border: solid 1px var(--theme-color-hotkey);
  color: var(--theme-color-hotkey);
  font-size: var(--font-ui-smaller);
  font-family: var(--font-interface);
  padding: 2px 6px;
  border-radius: var(--radius-s);
}
.suggestion-item.is-selected .suggestion-hotkey {
  border-color: var(--theme-color-textSelected);
  color: var(--theme-color-textSelected);
}
.setting-hotkey.has-conflict {
  background: transparent;
  border: solid 1px var(--background-modifier-error);
  color: var(--background-modifier-error);
}
/* #endregion */

/* #region   Buttons */
/* #region     Clickable icon buttons */
.clickable-icon,
.setting-item-control .clickable-icon,
.mod-community-modal .modal-sidebar button.clickable-icon,
.metadata-property-icon,
.markdown-embed-link,
.file-embed-link,
.tasks-edit,
#main-horizontal-tab-header-tab-list .clickable-icon,
#main-horizontal-tab-header-new-tab .clickable-icon,
.map-view-main
  .mv-icon-button
  .map-view-main
  .leaflet-control-container
  .leaflet-top.leaflet-right
  a,
.bases-toolbar-menu-item .clickable-icon {
  align-items: center;
  background-color: transparent;
  border-radius: var(--clickable-icon-radius);
  border: none;
  box-shadow: none;
  color: var(--theme-color-control);
  cursor: var(--cursor);
  display: flex;
  height: 2em;
  justify-content: center;
  min-height: var(--input-height);
  min-width: var(--input-height);
  opacity: var(--icon-opacity);
  padding: 0.25rem;
  text-decoration: none;
  transition: opacity 0.15s ease-in-out;
  width: auto;
}

.is-mobile .clickable-icon {
  min-height: 44px;
  min-width: 44px;
}
@media (hover: hover) {
  .clickable-icon:hover,
  .side-dock-actions .side-dock-ribbon-action.clickable-icon:hover,
  .mod-community-modal .modal-sidebar button.clickable-icon:hover,
  .metadata-property-icon:hover,
  .markdown-embed-link:hover,
  .file-embed-link:hover,
  .tasks-edit:hover,
  .map-view-main .mv-icon-button:hover,
  .bases-toolbar-menu-item .clickable-icon:hover{
    color: var(--theme-color-controlHover);
    background-color: var(--background-modifier-hover);
  }
}
.clickable-icon.is-active,
.map-view-main .mv-icon-button.on {
  opacity: var(--icon-opacity-hover);
  color: var(--theme-color-controlLightweightActive);
  background-color: var(--theme-color-interactiveActive);
}
@media (hover: hover) {
  .clickable-icon.is-active:hover {
    background-color: var(--background-modifier-hover);
    color: var(--theme-color-controlHover);
  }
}
/* #endregion */
/* #region     Regular buttons */
button:not(.clickable-icon):not(.dropdown-menu-item),
button:not(.clickable-icon).mod-cta,
.sync-history-load-more-button,
.empty-state-action,
.is-mobile .document-search .document-search-button,
.is-mobile .document-replace .document-search-button,
.style-settings-import-label,
.style-settings-copy,
.style-settings-download,
.style-settings-import,
.style-settings-export,
.popover.hover-popover > .file-embed.mod-empty {
  background-color: var(--theme-color-controlBg);
  border: none;
  border-radius: var(--button-radius);
  box-shadow: var(--theme-shadow-control);
  color: var(--theme-color-controlText);
  padding: 0.25em 0.5em;
  min-height: var(--input-height);
  height: auto;
  text-decoration: none;
}
@media (hover: hover) {
  button:not(.clickable-icon):not(.dropdown-menu-item):hover,
  button:not(.clickable-icon).mod-cta:hover,
  .sync-history-load-more-button:hover,
  .empty-state-action:hover,
  .is-mobile .document-search .document-search-button:hover,
  .is-mobile .document-replace .document-search-button:hover,
  .style-settings-import-label:hover,
  .style-settings-copy:hover,
  .style-settings-download:hover,
  .style-settings-import:hover,
  .style-settings-export:hover,
.popover.hover-popover > .file-embed.mod-empty:hover {
    border: none;
    background: var(--theme-color-controlBgHover);
    color: var(--theme-color-controlTextHover);
    text-decoration: none;
  }
}
button:not(.clickable-icon):not(.dropdown-menu-item):focus,
button:not(.clickable-icon).mod-cta:focus,
.sync-history-load-more-button:focus,
.empty-state-action:focus,
.is-mobile .document-search .document-search-button:focus,
.is-mobile .document-replace .document-search-button:focus,
.style-settings-import-label:focus,
.style-settings-copy:focus,
.style-settings-download:focus,
.style-settings-import:focus,
.style-settings-export:focus,
.popover.hover-popover > .file-embed.mod-empty:focus {
  box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
}

/* Buttons - regular but small */
button.search-result-file-match-replace-button {
  min-height: auto;
}
/* #endregion */
/* #region     Lightweight buttons */
.search-result-file-match-destination-file,
.text-icon-button,
.query-toolbar .query-toolbar-item.mod-views .text-icon-button {
  border: none;
  box-shadow: var(--theme-shadow-control);
  background-color: var(--theme-color-controlLowWeightBg);
  color: var(--theme-color-controlText);
  font-size: var(--font-ui-smaller);
  line-height: var(--line-height-tight);
  min-height: 1.5rem;
  padding: 0.25em 0.5em;
}
.search-result-file-match-destination-file:focus,
.text-icon-button:focus,
.query-toolbar .query-toolbar-item.mod-views .text-icon-button:focus {
  box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
  outline: none;
}
.text-icon-button.is-active {
  color: var(--theme-color-controlActive);
  background-color: var(--theme-color-controlBgActive);

  .text-button-icon {
    color: var(--theme-color-controlActive);
    background-color: var(--theme-color-controlBgActive);
  }
}
.text-icon-button.has-active-menu {
  color: var(--theme-color-controlHasActiveMenu);

  .text-button-icon {
    color: var(--theme-color-controlHasActiveMenu);
  }
}
@media (hover: hover) {
  .search-result-file-match:hover
    .search-result-file-match-destination-file:hover,
  .text-icon-button:hover,
  .query-toolbar .query-toolbar-item.mod-views .text-icon-button:hover {
    border: none;
    background-color: var(--theme-color-controlBgHover);
    color: var(--theme-color-controlTextHover);

    .text-button-icon {
      color: var(--theme-color-controlTextHover);
    }
  }
  .text-icon-button.is-active:hover,
  .text-icon-button.has-active-menu:hover {
    border: none;
    background-color: var(--theme-color-controlBgHover);
    color: var(--theme-color-controlTextHover);

    .text-button-icon {
      color: var(--theme-color-controlTextHover);
    }
  }
  .search-result-file-match:hover
    .search-result-file-match-destination-file:hover
    .search-result-file-match-destination-file-icon {
    color: var(--theme-color-controlTextHover);
  }
}
/* #endregion */
/* #endregion */
/* #region   Close buttons */

.mod-close,
.modal-close-button,
.document-search-close-button,
#main-horizontal-tab-header-inner-close-button,
.slides-close-btn,
.clickable-icon.kanban-plugin__search-cancel-button,
.clickable-icon.kanban-plugin__lane-settings-button[aria-label="Close"],
.mobile-tab .close-button,
.bases-toolbar-menu-container-header .close-icon,
.clickable-icon.document-search-close-button {
  background-color: transparent;
  border-radius: 100%;
  border: none;
  color: var(--theme-color-control);
  /* Above .modal-title */
  z-index: 2;
  width: var(--theme-length-closeButtonWidth);
  height: var(--theme-length-closeButtonWidth);
  min-width: var(--theme-length-closeButtonWidth);
  min-height: var(--theme-length-closeButtonWidth);
  display: flex;
  flex-shrink: 0;
  align-content: center;
  justify-content: center;
  padding: 0.125em;

  .svg-icon {
    stroke: var(--theme-color-control);
  }
}
@media (hover: hover) {
  .mod-close:hover,
  .modal-close-button:hover,
  .document-search-close-button:hover,
  #main-horizontal-tab-header-inner-close-button:hover,
  #main-horizontal-tab-header.is-active
    #main-horizontal-tab-header-inner-close-button:hover,
  .mod-sync-history .modal-close-button:hover,
  .mod-settings .modal-close-button:hover,
  #main-horizontal-tab-header-inner-close-button:hover,
  .slides-close-btn:hover,
  .clickable-icon.kanban-plugin__search-cancel-button:hover,
  .clickable-icon.kanban-plugin__lane-settings-button[aria-label="Close"]:hover,
  .multi-select-pill-remove-button:hover,
  .mobile-tab .close-button:hover,
  .bases-toolbar-menu-container-header .close-icon:hover,
  .clickable-icon.document-search-close-button:hover {
    color: var(--theme-color-controlHover);
    background-color: var(--theme-color-navigationButtonBgHover);

    .svg-icon {
      stroke: var(--theme-color-controlHover);
    }
  }
}

/* close buttons that use a text cross instead of an SVG */
.document-search-close-button,
.modal-close-button,
.is-mobile .document-search .document-search-close-button,
.is-mobile .document-replace .document-search-close-button {
  padding: var(--size-2-1);
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-content: center;
  --icon-size: var(--icon-s);
  --icon-stroke: var(--icon-s-stroke-width);
  text-align: center;
  justify-content: center;
  line-height: var(--theme-length-closeButtonWidth);
}
.document-search-close-button:before,
.modal-close-button:before {
  /* This uses a text cross instead of an SVG. Hack for visual alignment. */
  margin-top: -3px;
  line-height: var(--theme-length-closeButtonWidth);
  width: var(--theme-length-closeButtonWidth);
  height: var(--theme-length-closeButtonWidth);
}

/* Tab close button on left, macOS standard */
.mod-macos {
  #main-horizontal .mod-root {
    #main-horizontal-tab-header #main-horizontal-tab-header-inner-close-button {
      position: static;
      order: 0;
    }
    #main-horizontal-tab-header-inner-icon,
    #main-horizontal-tab-header-inner-title {
      order: 1;
    }
  }
  .modal-close-button {
    left: var(--size-2-3);
    right: auto;
  }
  .mod-community-modal .modal-sidebar .setting-item:first-child {
    margin-inline-start: auto;
  }
  .modal-sidebar .community-modal-controls {
    padding-inline-start: var(--size-4-5);
  }
  .multi-select-pill {
    padding-inline-start: 0.25em;

    .multi-select-pill-remove-button {
      order: 0;
    }
    .multi-select-pill-content {
      order: 1;
      margin: 0;
    }
  }
}
/* #endregion */
/* #region   Navigation buttons */
/* Buttons that don't change the satete of content, just what we're currently looking at. Styled similarly to close buttons. */

.modal-setting-back-button-icon,
.view-header-nav-buttons > .clickable-icon,
.mod-root #main-horizontal-tab-header-status-icon,
.mobile-tab .mobile-tab-pin,
.map-view-graph-controls .minimize-button.svelte-1sl5jax {
  color: var(--theme-color-control);
  border: none;
  border-radius: 100%;
  background-color: transparent;
  /* Above .modal-title */
  z-index: 2;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  cursor: default;

  .svg-icon {
    stroke: var(--theme-color-control);
    width: 1rem;
    height: 1rem;
  }
}
.mobile-tab .mobile-tab-pin,
.map-view-graph-controls .minimize-button.svelte-1sl5jax {
  width: var(--theme-length-closeButtonWidth);
  height: var(--theme-length-closeButtonWidth);
}
@media (hover: hover) {
  .modal-setting-back-button-icon:hover,
  .view-header-nav-buttons > .clickable-icon:hover,
  .mod-root #main-horizontal-tab-header-status-icon:hover,
  .mobile-tab .mobile-tab-pin:hover,
  .map-view-graph-controls .minimize-button.svelte-1sl5jax:hover {
    color: var(--theme-color-control);
    background-color: var(--theme-color-navigationButtonBgHover);
    .svg-icon {
      stroke: var(--theme-color-controlHover);
    }
  }
  .mod-root #main-horizontal-tab-header-status-icon .svg-icon {
    width: 80%;
  }
}
/* #endregion */


/* #region   Lightweight form controls */
/* Form controls that are rendered as text until they have focus */

.metadata-property .metadata-property-key input,
.metadata-property .metadata-property-value {
  border: none;
  border-radius: var(--input-radius);
  box-shadow: none;
  display: flex;
  background: transparent;
  height: 100%;
  padding: 0 0.5em;
}
.metadata-property .metadata-property-value input {
  box-shadow: none;
}
@media (hover: hover) {
  .metadata-property .metadata-property-key input:hover,
  .metadata-property .metadata-property-value:hover {
    background: var(--background-input);
  }
}
.metadata-property .metadata-property-key input:focus,
.metadata-property .metadata-property-value:focus-within {
  border: none;
  background: var(--background-input);
  box-shadow: 0 0 0 var(--input-border-width)
    var(--background-modifier-border-focus);
  color: var(--text-normal);
}
/* #endregion */
/* #region   Text fields */

/* This box shadow goes around the disclosure control, we want it to go just around the text. */
.tree-item-self.is-being-renamed,
body:not(.is-grabbing) .tree-item-self.has-focus.is-being-renamed,
body:not(.is-phone) #main-horizontal-leaf.mod-active .tree-item-self.has-focus:focus-within {
  box-shadow: none;
}
#search-container {
  padding: var(--input-border-width);
}
#search-container input[type="search"],
input.document-search-input,
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="text"],
textarea,
.tree-item-self.is-being-renamed > .tree-item-inner,
.formula-editor-container {
  box-shadow: 0 0 0 var(--input-border-width) var(--theme-color-base);
  border-radius: var(--radius-s);
  border: none;
  background: var(--background-input);
  color: var(--text-normal);
}

#search-container input[type="search"]:active,
#search-container input[type="search"]:focus-visible,
#search-container input[type="search"]:focus,
input.document-search-input:active,
input.document-search-input:focus-visible,
input.document-search-input:focus,
input[type="email"]:active,
input[type="email"]:focus-visible,
input[type="email"]:focus,
input[type="number"]:active,
input[type="number"]:focus-visible,
input[type="number"]:focus,
input[type="password"]:active,
input[type="password"]:focus-visible,
input[type="password"]:focus,
input[type="search"]:active,
input[type="search"]:focus-visible,
input[type="search"]:focus,
input[type="text"]:active,
input[type="text"]:focus-visible,
input[type="text"]:focus,
textarea:active,
textarea:focus-visible,
textarea:focus,
body:not(.is-grabbing) .tree-item-self.has-focus.is-being-renamed > .tree-item-inner {
  background: var(--background-input);
  border-radius: var(--radius-s);
  box-shadow: 0 0 0 var(--input-border-width)
    var(--background-modifier-border-focus);
  color: var(--text-normal);
}
@media (hover: hover) {
  #search-container input[type="search"]:hover,
  input.document-search-input:hover,
  input[type="email"]:hover,
  input[type="number"]:hover,
  input[type="password"]:hover,
  input[type="search"]:hover,
  input[type="text"]:hover,
  textarea:hover,
  body:not(.is-grabbing) .tree-item-self.has-focus.is-being-renamed:hover > .tree-item-inner {
    background: var(--background-input);
    border-radius: var(--radius-s);
    box-shadow: 0 0 0 var(--input-border-width)
      var(--background-modifier-border-focus);
    color: var(--text-normal);
  }
}
textarea {
  padding: 1em;
}
#search-container input::placeholder,
input.document-search-input::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="text"]::placeholder,
textarea::placeholder {
  color: var(--theme-color-inputPlaceholder);
}
/* No matches state */
input.document-search-input.mod-no-match,
input.document-replace-input.mod-no-match {
  background-color: color-mix(
    in srgb,
    var(--background-input),
    var(--background-modifier-error) 50%
  );
}
/* #endregion */
/* #region   Selects – regular */
select,
.setting-item-control select .dropdown,
#main-horizontal-drawer-active-tab-header {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  box-shadow: var(--theme-shadow-control);
  background-color: var(--theme-color-controlBg);
  color: var(--theme-color-controlText);
  padding: 0;
  margin: 0 0.5rem;

  & > option {
    color: var(--theme-color-controlText);
  }
}
@media (hover: hover) {
  select:hover,
  .setting-item-control select:hover,
  .dropdown:hover {
    border: none;
    background-color: var(--theme-color-controlBgHover);
    color: var(--theme-color-controlTextHover);
  }
}
select:focus,
.dropdown:focus {
  box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
  outline: none;
}

/* #endregion */
/* #region   Selects – lightweight */
.search-results-info .dropdown {
  border: none;
  box-shadow: var(--theme-shadow-control);
  background-color: var(--theme-color-controlLowWeightBg);
}
@media (hover: hover) {
  .search-results-info .dropdown:hover {
    border: none;
    background: var(--theme-color-controlBgHover);
    color: var(--theme-color-controlTextHover);
  }
}
.search-results-info .dropdown:focus {
  box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
  outline: none;
}
/* #endregion */
/* #region.  Flair */
.flair {
  background-color: var(--flair-background);
  border-radius: var(--radius-s);
  color: var(--flair-color);
  font-size: var(--font-ui-smaller);
  letter-spacing: 0.05em;
  margin-inline-start: 0;
  line-height: 1;
  padding: 0.375em 0.75em;
  text-transform: uppercase;
}
/* #endregion */
/* #region   Multi-select container */
.multi-select-container,
.metadata-property .multi-select-container {
  padding: 0.25em;
}

/* #endregion */
/* #region   Toolbars */
.canvas-controls,
.graph-controls,
.graph-controls.is-close,
#main-horizontal-split:not(.mod-root) .graph-controls.is-close,
.graph-controls:not(.is-close),
.canvas-card-menu,
.canvas-menu,
.canvas-submenu,
.advanced-tables-buttons {
  background: var(--theme-color-controlSetBg);
  border: none;
  padding: 0.25rem;
  gap: 0;
  box-shadow: var(--theme-shadow-input);
  border-radius: var(--radius-m);
  width: fit-content;
}
.canvas-control-item,
.graph-controls-button,
.canvas-card-menu .canvas-card-menu-button,
[data-type="advanced-tables-toolbar"]
  .nav-buttons-container
  .nav-action-button {
  --icon-size: var(--icon-s);
  --icon-stroke: var(--icon-s-stroke-width);
  border-radius: var(--clickable-icon-radius);
  color: var(--theme-color-control);
  opacity: var(--icon-opacity);
  background-color: transparent;
  border: none;
}

/* Active state */
.canvas-control-item.has-active-menu {
  opacity: var(--icon-opacity-hover);
  color: var(--theme-color-controlLightweightActive);
  background-color: var(--theme-color-interactiveActive);
}
@media (hover: hover) {
  .canvas-control-item.has-active-menu:hover {
    background-color: var(--background-modifier-hover);
    color: var(--theme-color-controlHover);
  }
  .canvas-control-item:hover,
  .graph-controls-button:not(.mod-close):hover,
  .canvas-card-menu .canvas-card-menu-button:hover,
  [data-type="advanced-tables-toolbar"]
    .nav-buttons-container
    .nav-action-button:hover {
    color: var(--theme-color-controlHover);
    background-color: var(--background-modifier-hover);
  }
}
.graph-controls .setting-item {
  padding: 0.5em 0;
  margin: 0;
}
/* #endregion */
/* #region   Query Builders */
.query-toolbar-menu .query-toolbar-section:not(:last-child) {
  border-bottom: none;
}
.bases-query-container .filter-row.mod-group,
.bases-query-container .filter-group .filter-group {
  background-color: transparent;
  border: none;
  padding: 0;
  margin-inline-start: 1em;
}

.base-toolbar-sort-item,
.bases-query-container .filter-row {
  background-color: var(--theme-color-queryComponentBg);
  display: flex;
  align-items: center;
  gap: 0.5em;
  border-radius: var(--radius-s);

  .combobox-button,
  .combobox-button.bases-sort-direction {
    background: transparent;
    border: none;
    border-radius: var(--button-radius);
    padding: 0 1em;
  }

  .filter-operator {
    border: none;
  }

  @media(hover: hover) {
    .combobox-button:hover {
      background-color: var(--theme-color-controlBgHover);
      color: var(--theme-color-controlHover);

      .combobox-button-icon {
        color: var(--theme-color-controlHover);
      }
    }
  }
}
/* #endregion */
/* #region   Collapsible controls */
.metadata-properties-heading,
.embedded-backlinks .backlink-pane .tree-item-self,
.graph-controls .graph-control-section .tree-item-self,
body.theme-setting-overrideMapView .map-view-graph-controls .graph-control-div .collapsible label,
.mod-collapsible,
.search-result-file-title,
.style-settings-heading {
  border-radius: var(--radius-s);
  color: var(--text-faint);
  font-size: var(--nav-item-size);
  font-weight: var(--font-medium);
  padding: 0.25em 0.5em 0.25em 0;
  line-height: var(--theme-lineHeight-tight);
  display: flex;
  align-items: center;
  width: 100%;
}
@media (hover: hover) {
  .metadata-properties-heading:hover,
  .embedded-backlinks .backlink-pane .tree-item-self:hover,
  .graph-controls .graph-control-section .tree-item-self:hover,
  body.theme-setting-overrideMapView .map-view-graph-controls .graph-control-div .collapsible label:hover,
  .mod-collapsible:hover,
  .search-result-file-title:hover,
  .style-settings-heading:hover {
    color: var(--nav-item-color-hover);
    background-color: var(--nav-item-background-hover);
    font-weight: var(--font-medium);
  }
}
.metadata-properties-heading:before {
  /* Override absolute positioning from app, so we're consistent with other collapsibles */
  position: static;
}
.metadata-properties-heading .collapse-indicator,
.embedded-backlinks .backlink-pane .tree-item-self .collapse-icon,
.graph-controls .graph-control-section .collapse-icon,
.tree-item-self .tree-item-icon.collapse-icon {
  color: var(--theme-color-control);
  display: flex;
  left: inherit;
  opacity: var(--icon-opacity);
  padding: 0;
  position: relative;
  margin: 0;
  align-items: center;
  justify-content: center;
}
.metadata-properties-heading .metadata-properties-title,
.embedded-backlinks .backlink-pane .tree-item-self .tree-item-inner,
.graph-controls .graph-control-section .tree-item-inner {
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-medium);
}
@media (hover: hover) {
  .metadata-properties-heading:hover .collapse-indicator svg.svg-icon,
  .embedded-backlinks
    .backlink-pane
    .tree-item-self:hover
    .collapse-icon
    svg.svg-icon,
  .graph-controls
    .graph-control-section
    .tree-item-self:hover
    .collapse-icon
    svg.svg-icon,
  .mod-collapsible:hover .collapse-icon svg.svg-icon,
  .search-result-file-title:hover .collapse-icon svg.svg-icon,
  .tree-item-self:hover .tree-item-icon.collapse-icon svg.svg-icon,
  .tree-item-self:hover .menu-item-icon svg.svg-icon {
    color: var(--theme-color-controlHover);
  }
}
.backlink-pane > .tree-item-self .collapse-icon,
.outgoing-link-pane > .tree-item-self .collapse-icon {
  display: block;
  margin-inline-start: 0;
  position: relative;
}
.metadata-properties-heading .collapse-indicator svg,
.embedded-backlinks .backlink-pane .tree-item-self .tree-item-icon svg,
.graph-controls .graph-control-section .collapse-icon svg {
  color: var(--theme-color-control);
}
.mod-root .metadata-content,
.backlink-pane .search-result-container,
.backlink-pane .search-result-file-matches,
.outgoing-link-pane .search-result-container,
.graph-control-section .tree-item-children,
body.theme-setting-overrideMapView .map-view-graph-controls .graph-control-div .collapsible .contents {
  margin: 0 1em 1em 1em;
  font-size: var(--font-ui-small);
  padding: 0;
  margin: 0.5em 0;
}
/* #endregion */
/* #region   Obsidian UI Checkboxes */
.checkbox-container {
  background-color: var(--background-input);
}
.checkbox-container.is-enabled {
  background-color: var(--interactive-accent);
}
input[type="checkbox"] {
  border: var(--theme-length-checkboxBorderWidth) solid
    var(--checkbox-border-color);
}
input[type="checkbox"]:checked:after {
  /* Scale check mark with container in slides */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
@media (hover: hover) {
  input[type="checkbox"]:hover {
    background-color: var(--theme-color-controlUIHover);
  }
}
/* #endregion */
/* #region   Obsidian UI Radio buttons */
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--background-input);
  border-radius: 100%;
  border: var(--theme-length-checkboxBorderWidth) solid
    var(--checkbox-border-color);
  box-sizing: border-box;
  color: var(--checkbox-border-color);
  display: inline-grid;
  font: inherit;
  height: 1.15em;
  margin: 0;
  place-content: center;
  transform: translateY(calc(-0.5 * var(--theme-length-checkboxBorderWidth)));
  width: 1.15em;
}
input[type="radio"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 100%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  background-color: CanvasText;
  /* Use box-shadow as background-color doesn't print well */
  box-shadow: inset 1em 1em var(--checkbox-color);
}
input[type="radio"]:checked::before {
  transform: scale(1);
}
input[type="radio"]:focus {
  border: var(--theme-length-checkboxBorderWidth) solid
    var(--background-modifier-border-focus);
}
@media (hover: hover) {
  input[type="radio"]:hover {
    background-color: var(--theme-color-controlUIHover);
  }
}
/*   #endregion */
/* #region   Item lists */
.vertical-tab-header-group-title {
  color: var(--text-normal);
}

/* Special case for lists of controls */
.horizontal-tab-nav-item,
.vertical-tab-nav-item {
  color: var(--theme-color-control);

  svg {
    color: var(--theme-color-control);
  }
}

@media (hover: hover) {
  body:not(.is-grabbing) .tree-item-self.is-clickable:hover,
  .horizontal-tab-nav-item:hover,
  .vertical-tab-nav-item:hover {
    color: var(--nav-item-color-hover);
    background-color: var(--nav-item-background-hover);
    font-weight: var(--nav-item-weight-hover);

    svg {
      color: var(--nav-item-color-hover);
    }
  }
}
.horizontal-tab-nav-item.is-active,
.vertical-tab-nav-item.is-active,
.nav-file-title.is-active,
.nav-folder-title.is-active {
  background-color: var(--interactive-accent);
  color: var(--nav-item-color-active);

  svg {
    color: var(--nav-item-color-active);
  }

  &.is-being-renamed {
    background: transparent;
  }
}
.nav-folder.is-being-dragged-over {
  animation: 0.5s 1 alternate fadein;
  border-radius: var(--radius-s);
  border: solid 0.125rem var(--theme-color-dragTarget);
  background-color: var(--theme-color-dragTargetBg);
}
@media (hover: hover) {
  body:not(.is-grabbing) .tree-item.nav-file .tree-item-self.is-active:hover,
  .horizontal-tab-nav-item.is-active:hover,
  .vertical-tab-nav-item.is-active:hover,
  .nav-file-title.is-active:hover,
  .nav-folder-title.is-active:hover {
    background-color: var(--interactive-accent);
    color: var(--nav-item-color-active);
  }
}
.nav-folder-title {
  font-weight: var(--font-medium);
}
.nav-file-title,
.nav-folder-title {
  padding: 0;
}
.tree-item-inner {
  padding: var(--nav-item-padding);
}
.nav-file {
  padding-inline-start: var(--size-4-4);
}
/* #endregion */
/* #region   Pills (including tags) */
.multi-select-pill {
  padding: var(--pill-padding-y) var(--pill-padding-x);
}
.multi-select-pill-remove-button {
  margin: 0;
  border-radius: 100%;
}
@media (hover: hover) {
  .multi-select-pill-remove-button:hover {
    background: var(--pill-background-remove-hover);
  }
}
.multi-select-pill,
.metadata-property[data-property-key="tags"] .multi-select-pill {
  --pill-padding-x: 1em;
  --pill-padding-y: 0.25em;
  --tag-padding-x: 1em;
  --tag-padding-y: 0.25em;
}
.metadata-property-value .multi-select-pill,
.bases-table-cell .multi-select-pill {
  --pill-color: inherit;
  border-radius: var(--tag-radius);
  border: var(--tag-border-width) solid var(--tag-border-color);
  font-weight: var(--tag-weight);
  padding: var(--tag-padding-y) var(--tag-padding-x);
  vertical-align: baseline;
  line-height: var(--line-height-tight);
}
body
  .metadata-property[data-property-key="tags"]
  .multi-select-pill-content:before {
  content: "#";
  display: inline;
}
@media (hover: hover) {
}

/* Tags in sidebar or metadata have adjusted colours because they sit on a different background */
body .metadata-property[data-property-key="tags"] .multi-select-pill,
.tag-pane-tag > .tree-item-inner {
  background-color: var(--theme-color-tagBgSidebar);
  color: var(--theme-color-tagSidebar);
}
@media (hover: hover) {
  body .metadata-property[data-property-key="tags"] .multi-select-pill:hover,
  .tag-pane-tag > .tree-item-inner:hover {
    background-color: var(--theme-color-tagBgSidebarHover);
    color: var(--theme-color-tagSidebarHover);
    text-decoration: underline;
  }
}

/* #endregion */
/* #region   Tooltips */

.tooltip {
  color: var(--theme-color-notice);
  background-color: var(--theme-color-noticeBg);
  padding: 0.5em 1em;
}
/* #endregion */
/* #region   Remote items */

.community-modal-search-results-wrapper,
.vault-list,
.sync-file-tree-container {
  background: var(--theme-gradient-topToBottom);
  background: var(--theme-gradient-DarkenedTopToBottom);
  border: 0;
  padding: 1.5em;
  gap: 1.5em;
}
.is-phone .community-modal-search-results-wrapper {
  padding: 1em;
  gap: 1em;
}
.vault-list-item,
.community-item,
.sync-file-tree-container > .list-item {
  background: var(--theme-color-communityItemBg);
  border-radius: var(--radius-m);
  border: none;
  box-shadow: var(--shadow-l);
  cursor: var(--cursor);
  padding: var(--size-4-3);
  position: relative;
}
.is-phone .vault-list-item,
.is-phone .community-item {
  border-radius: var(--radius-m);
  padding: 0.5em 1em;
}
@media (hover: hover) {
  .sync-file-tree-container > .list-item:hover,
  .community-item:hover {
    background: var(--theme-color-communityItemBgHover);
    color: var(--nav-item-color-hover);
    font-weight: var(--nav-item-weight-hover);
  }
}
.community-modal-search-results {
  padding: 0;
  gap: 1.5em;
}
.is-phone .community-modal-search-results {
  padding: 0;
  gap: 1em;
}
/* #endregion */
/* #region   Modals */

/********* Prompts *********/

.prompt-input-container,
.is-phone .prompt-input-container {
  border-bottom: none;
  background: var(--background-secondary);
  box-shadow: var(--theme-shadow-indent-small);
}
.prompt {
  background-color: var(--background-prompt);
}
.is-phone .prompt {
  --prompt-top: calc(var(--safe-area-inset-top) + var(--header-height) + 1em);
  box-shadow: var(--shadow-l);
}
input.prompt-input[type="text"] {
  background: var(--background-secondary);
  border-bottom: none;
  box-shadow: none;
}
input.prompt-input[type="text"]:focus {
  background: var(--background-secondary);
  border-bottom: none;
  box-shadow: none;
}
input[type="text"].prompt-input::placeholder {
  color: var(--theme-color-base);
}
.prompt-instructions {
  background: var(--background-secondary);
  border-top: 0;
  box-shadow: var(--theme-shadow-indent-small);
}

/* Default modal */

.modal-container {
  padding-top: var(--safe-area-inset-top);
  padding-inline-end: var(--safe-area-inset-right);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-inline-start: var(--safe-area-inset-left);
}
.modal {
  padding: 0;
  overflow: hidden;
}
.modal-title {
  /* Space for modal-close-button in line with title */
  padding: 0.5em calc(var(--size-2-3) + 2rem);
  /* Align with top position for modal-close-button */
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--font-ui-medium);
  line-height: 1.4em;
}
.modal-bg,
.modal,
.prompt {
  animation: 0.5s 1 alternate fadein;
  animation-timing-function: ease-in-out;
}
.modal-content {
  margin: 0 0;
  /* Allow space for input borders */
  padding: var(--input-border-width) 2em;
  overflow: auto;
}
.modal-header:has(.modal-title:empty) {
  /* The built-in styles always apply a bottom margin */
  margin-bottom: 0;
}
.modal-content p {
  margin: 0 0 0.5em 0;
}
.modal-content p:last-child {
  margin-bottom: 0;
}
.modal-content > hr {
  /* Used in the Manage Workspaces modal, but there's currently no way to target that. */
  border: none;
  margin: 1em 0;
}
.modal-button-container {
  margin-top: 0;
  padding: 1em 2rem;
}

.modal-content:has(.modal-button-container),
.modal-content:has(.button-container) {
  /* Sometimes the .modal-button-container is nested inside the .modal-content */
  overflow: scroll;
  background-color: var(--theme-color-modalContentBg);
  padding: 1em 2em;
}
.modal-content .modal-button-container {
  padding: 0;
}

/* Modals with sidebar layout */
.mod-sidebar-layout .modal-content {
  padding: 0;
  margin: 0;
}
.modal-sidebar,
.modal.mod-settings .vertical-tab-header {
  border-inline-end: none;
  padding: 2.5em 1em 1em 1.5em;
  margin: 0;
  background: var(--theme-gradient-topToBottom);
  color: var(--theme-color-control);
  height: 100%;
  box-shadow: var(--shadow-s);
  z-index: 1;
}
.modal-setting-nav-bar {
  margin-inline-start: 0.5rem;
}
/***** Resizeable modals *****/
body:not(.is-phone) .modal.mod-settings.mod-sidebar-layout,
body:not(.is-phone) .modal.mod-community-modal,
body:not(.is-phone) .modal.mod-sync-history {
  resize: both;
  width: var(--modal-width);
  min-width: 36rem;
  min-height: 20rem;
  border-bottom-right-radius: 0.25rem;
  box-shadow: var(--shadow-l);
}

/* Help modal */
.modal.mod-canvas-help .modal-content {
  height: 100%;
  overflow: scroll;
  padding-inline-end: 1em;
}

/* Community modal */
.mod-community-modal {
  .modal-sidebar {
    padding: 0;
  }
  .community-modal-controls {
    background: var(--theme-color-settingsBg);
    padding: 2.5em 1.5em 1em 1.5em;
    box-shadow: var(--shadow-s);
    z-index: 1;
  }
  .modal-close-button {
    z-index: 2;
  }
  .community-modal-controls .setting-item {
    padding: 0;
    margin-bottom: 0.5em;
  }
  .modal-sidebar .setting-item-name {
    padding-inline-start: 0;
  }
  .community-modal-controls .setting-item:first-child .setting-item-control {
    margin: 0;
  }
  .modal-content:has(.community-modal-details)
    .community-modal-controls
    .setting-item:first-child {
    float: none;
  }
}
.mod-community-modal:not(:has(.community-modal-details))
  .community-modal-controls
  .setting-item:first-child {
  /* Filter control */
  max-width: 60%;
  margin-bottom: 0.5em;
  padding-inline-start: 2em;
  float: inline-end;
}
.community-modal-search-summary {
  margin: 0;
  padding: 0;
}
.community-modal-details {
  border: none;
}
.community-item {
  display: flex;
  flex-direction: column;
  gap: var(--size-2-1);
  padding: 0;
  overflow: hidden;
}
.community-item.is-selected {
  background: var(--theme-color-communityItemBgSelected);
}
.community-item.is-selected .flair.mod-pop,
.community-item.mod-active .flair.mod-pop {
  display: none;
}
@media (hover: hover) {
  .community-item.is-selected:hover .flair.mod-pop,
  .community-item.mod-active:hover .flair.mod-pop {
    display: none;
  }
}
.community-item-name,
.community-item-author,
.community-item-repo,
.community-item-downloads,
.community-item-updated,
.community-item-desc,
.community-modal-info-downloads-text,
.community-modal-info-author,
.community-modal-info-repo {
  color: var(--text-normal);
  padding: 0 1rem;
}
.community-item-name {
  font-weight: var(--font-semibold);
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.community-item .flair {
  --flair-background: inherit;
  --flair-color: inherit;
  float: right;
  margin-right: -0.5rem;
}
.community-item-desc {
  padding-bottom: 1rem;
}
.community-item-author,
.community-item-repo,
.community-item-downloads,
.community-item-updated,
.community-modal-info-downloads-text,
.community-modal-info-author,
.community-modal-info-repo {
  font-size: var(--font-ui-small);
}
.community-item.is-selected {
  color: var(--text-on-accent);

  .community-item-name,
  .community-item-author,
  .community-item-repo,
  .community-item-downloads,
  .community-item-updated {
    color: var(--text-on-accent);
  }
}
.community-item.mod-active {
  background: var(--theme-color-communityItemBgActive);
}
.community-item.mod-active .community-item-name,
.community-item.mod-active .community-item-author,
.community-item.mod-active .community-item-repo,
.community-item.mod-active .community-item-downloads,
.community-item.mod-active .community-item-updated {
  color: var(--text-on-accent);
  opacity: 0.8;
}
@media (hover: hover) {
  .community-item:hover {
    color: var(--text-on-accent);
  }
  .community-item:hover .community-item-name,
  .community-item:hover .community-item-author,
  .community-item:hover .community-item-repo,
  .community-item:hover .community-item-downloads,
  .community-item:hover .community-item-updated {
    opacity: 0.8;
  }
  .community-item.is-selected:hover {
    background: var(--theme-color-communityItemBgSelected);
  }
  .community-item.is-selected:hover,
  .community-item.is-selected:hover .community-item-name,
  .community-item.is-selected:hover .community-item-author,
  .community-item.is-selected:hover .community-item-repo,
  .community-item.is-selected:hover .community-item-downloads,
  .community-item.is-selected:hover .community-item-updated {
    color: var(--text-on-accent);
  }
  .community-item.mod-active:hover .community-item-name,
  .community-item.mod-active:hover .community-item-author,
  .community-item.mod-active:hover .community-item-repo,
  .community-item.mod-active:hover .community-item-downloads,
  .community-item.mod-active:hover .community-item-updated {
    color: var(--text-on-accent);
    opacity: 0.8;
  }
}

/* Settings modal */

.modal.mod-settings {
  .vertical-tab-header-group {
    border-inline-end: none;
    padding: 0 0 1.5em 0;
  }
  .vertical-tab-header-group-title {
    padding: 0 0.5em 0.5em 0.5em;
  }
  .vertical-tab-content {
    background: var(--theme-color-settingsBg);
    padding: 2em;
  }
}
.modal-setting-nav-bar {
  border: none;
  padding: 0.5em 0 0 0;
}
.setting-item {
  /* Also used when editing bookmarks */
  border-top: none;
  padding: 0;
  margin-bottom: 1.5em;
}
.setting-group {
  .setting-item {
    /* Also used when editing bookmarks */
    border-top: none;

    #search-container {
      padding: var(--input-border-width);
    }
  }
  .setting-items {
    margin-bottom: 4em;
  }
  .setting-group-search {
    margin-bottom: 4em;
  }
}
.vertical-tab-nav-item-icon {
  display: none;
}
body.theme-setting-enableIconsInSettings {
  .vertical-tab-nav-item-icon {
    display: flex;
  }
}

/* Font settings modal */
.setting-font-list + .setting-item {
  border: none;
}

/* Debug modal */
.modal-content:has(.modal-button-container):has(.debug-textarea) {
  /* Show shadow below buttons */
  overflow: visible;
  padding: var(--input-border-width);
  margin-bottom: 2.5rem;
}
.debug-textarea {
  margin: 0;
  border-radius: 0;
}

/* #endregion */
/* #region   Content area */

/* Allow metadata properties to go full width */
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer {
  margin-inline-start: 0;
  margin-inline-end: 0;
  max-width: none;
  width: 100%;
}
#center-content .mod-footer {
  margin: 1em 0 0 0;
}
#center-content .markdown-rendered {
  padding: 0;
}






/* TODO: QA test for this new code */
.markdown-preview-view .markdown-preview-sizer {
  > div {
    margin: 0 auto !important;
    max-width: var(--file-line-width);
    padding: 0 2rem;

  }
  > div.mod-header,
  > div.mod-footer {
    margin: 0;
    max-width: none;
    padding: 0;
  }
}

/* Allow tables to extend into the left and right margins */
.theme-setting-wideTables {
  .markdown-preview-view .markdown-preview-sizer {
    > .el-table {
      max-width: 100%;

      > table {
        margin: 0 auto;
      }
    }
  }
}







.markdown-rendered .mod-header {
  margin-bottom: 3rem;
}
.is-phone .markdown-rendered .mod-header {
  margin-bottom: 0;
}
/* Override inline styles */
.markdown-preview-sizer {
  /* Reading Mode */
  padding-bottom: 0 !important;
}

/* Order in content area */
.inline-title {
  order: 0;
}
.mod-root .metadata-container,
.setting-properties-position-above
  .mod-root
  .is-live-preview
  .metadata-container {
  order: 1;
}
.setting-properties-position-below
  .mod-root
  .is-live-preview
  .metadata-container {
  margin-top: 1em;
  order: 3;
}
.setting-properties-position-below
  .mod-root
  .is-live-preview
  .embedded-backlinks {
  padding: 0 2rem 0.5rem 2rem;
}
body:not(.setting-properties-position-below)
  .mod-root
  .is-live-preview
  .embedded-backlinks {
  margin-top: 1em;
}
.embedded-backlinks {
  order: 3;
}

/* Consistent styles for inline metadata sections */
.mod-root .metadata-container,
.embedded-backlinks {
  animation: 0.5s 1 alternate fadein;
  background-color: var(--metadata-property-background);
  border-radius: 0;
  border: 0;
  font-family: var(--font-interface);
  margin: 0;
  padding: 0.5rem 2rem;
  transform: none;
  width: 100%;

  &.mod-error {
    background-color: rgba(var(--callout-error), 0.1);
  }
}
body:not(.is-mobile) .mod-root #center-content .metadata-container {
  width: calc(100% + 4rem);
  margin: 0;
}

/* Tab content header */
.view-header {
  height: auto; /* Don't use --header-height */
  justify-content: space-between;
  padding: 0.5em;
}
.view-header.is-highlighted:after {
  background-color: var(--theme-color-baseTransparent50);
}

/* Inline title (i.e. filename) */
.inline-title {
  width: 100%;
  margin: 0 auto;
  max-width: var(--file-line-width);
  padding: 0 2rem;
  text-align: center;
}
.view-header-title-container {
  display: none;
}
.show-inline-title .view-header-title-container {
  display: flex;
}
.view-header-title {
  display: none;
}
.show-inline-title.is-focused #main-horizontal-leaf.mod-active .view-header-title {
  /* Use the "Display Inline Title" setting to show/hide the title in the header. */
  display: block;
}

@media (hover: hover) {
  .view-header-title-parent .view-header-breadcrumb:hover {
    background: transparent;
    cursor: auto;
  }
}
/* #endregion */
/* #region   Properties */
#main-horizontal > #main-horizontal-split:not(.mod-root) .metadata-container {
  --metadata-divider-width: inherit;
}
.setting-properties-position-below
  .mod-root
  .is-live-preview
  .metadata-container {
  padding: 0.5em 2em 0 2em;
}
.setting-properties-position-below
  .mod-root
  .is-live-preview
  .metadata-container:has(~ .embedded-backlinks[style*="display: none"]) {
  padding-bottom: 0.5em;
}
.view-content .metadata-properties-heading .collapse-indicator svg.svg-icon,
.view-content
  .metadata-properties-heading
  .is-collapsed
  .collapse-indicator
  svg.svg-icon {
  color: var(--theme-color-control);
}
.metadata-properties-title {
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
  font-weight: var(--font-semibold);
  padding: 0;
  user-select: none;
}
.metadata-property {
  background-color: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  gap: 0.5em;
  padding: var(--input-border-width);

  .metadata-property-key {
    align-items: flex-start;
    display: flex;
    gap: 0.5em;
  }
}

.metadata-property:focus-within {
  background: var(--metadata-property-background-hover);
  border-color: var(--metadata-property-background-hover);
  box-shadow: none;
}
.metadata-property .metadata-property-key:focus-within {
  background: transparent;
}
.metadata-property input.metadata-property-key-input {
  height: var(--input-height);
  color: var(--theme-color-control);
}
.metadata-property .multi-select-input {
  padding: var(--pill-padding-y) 0;
}
.metadata-property-icon:before {
  display: none;
}
/* #endregion */
/* #region   File lists */

/* Styles used by both Files and Recent Files */

.nav-file-title {
  justify-content: space-between;
  padding: 0;
}
.nav-file-title-content,
.nav-folder-title-content {
  flex-grow: 1;
  padding: var(--nav-item-padding);
}
.nav-file-tag {
  background: transparent;
  border: solid 1px var(--nav-file-tag-border-color);
  color: var(--theme-color-navFileTag);
}
.nav-file-title.is-active .nav-file-tag {
  color: var(--theme-color-navFileTagActive);
  border-color: var(--theme-color-navFileTagActiveBorder);
}
@media (hover: hover) {
  /* No hover effect for vault title, as clicking doesn't do anything */
  .nav-folder.mod-root > .nav-folder-title:hover {
    color: inherit;
  }
}
/* #endregion */
/* #region   Document search */
.document-search-container,
.mod-active .document-search-container,
.is-mobile .document-search-container,
.kanban-plugin__search-wrapper {
  animation: 0.5s 1 alternate fadein;
  background: var(--theme-color-controlSetBg);
  border: none;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  gap: 0.5em;
  margin: 0 auto;
  padding: 0.5em;
  width: auto;
}
.document-search,
.document-replace {
  gap: 0.5em;
  padding: 0;
  display: flex;
  align-items: center;
}
.document-search-button {
  border: none;
  color: var(--theme-color-control);
}
.document-search-close-button,
.is-mobile .document-search .document-search-close-button,
.is-mobile .document-replace .document-search-close-button {
  top: calc(50% - 0.5em);
}
/* Close button on left for macOS */
.mod-macos .document-search-container {
  .document-search {
    .document-search-close-button {
      order: 0;
    }
    .document-search-input {
      order: 1;
    }
    .document-search-buttons {
      order: 2;
    }
  }
  .document-replace {
    padding-left: calc(var(--theme-length-closeButtonWidth) + 0.5em);
  }
}

/* #endregion */
/* #endregion */

/* #region Helper Classes */
/* #region   List Cards */
.list-cards.markdown-preview-view .el-ul {
  border-bottom: var(--embed-border-bottom);
  border-inline-start: var(--embed-border-left);
  border-radius: var(--radius-m);
  border-inline-end: var(--embed-border-right);
  border-top: var(--embed-border-top);
  margin: 0;
  padding: 1em;
  background: var(--theme-gradient-cardSet);
  border: 0;
  padding: 1.5em;
  gap: 1.5em;
}
.list-cards.markdown-preview-view .el-ul > ul {
  display: grid;
  padding: 0;
  line-height: var(--line-height-tight);
  grid-template-columns: var(--theme-grid-cardSet);
  grid-gap: 1em;
  margin-block-start: 0;
  --list-indent: 1em;
}
.list-cards.markdown-preview-view .el-ul > ul > li {
  overflow: hidden;
  margin-inline-start: 0;
  background-color: var(--theme-color-cardBg);
  border-radius: var(--radius-m);
  border: none;
  box-shadow: var(--shadow-s);
  cursor: var(--cursor);
  padding: 0 0.75em 0 0.75em;
  position: relative;
}
.list-cards.markdown-preview-view .el-ul > ul > li > img {
  margin-inline-start: -0.75em;
  margin-inline-end: -0.75em;
  width: calc(100% + 2 * 0.75em);
  max-width: calc(100% + 2 * 0.75em);
  display: block;
}
.list-cards.markdown-preview-view .el-ul > ul > li > .list-bullet,
.list-cards.markdown-preview-view .el-ul > ul > li > .list-collapse-indicator,
.list-cards.markdown-preview-view.markdown-rendered.show-indentation-guide
  .el-ul
  > ul::before {
  display: none;
}
/* #endregion */
/* #endregion */

/* #region Core plugins */
/* #region   Core Plugin: Audio Recorder */
/* See also Embeds for the resulting embedded audio */

.side-dock-actions
  .side-dock-ribbon-action.clickable-icon.is-active:has(
    svg.svg-icon.lucide-mic
  ) {
  animation: pulse-animation 2s infinite;
  animation-timing-function: ease-in-out;
}
.side-dock-actions .side-dock-ribbon-action.clickable-icon.is-active:before {
  content: "REC";
  font-size: 0.8em;
  color: var(--theme-color-audioRecordingActive);
}
.side-dock-actions .side-dock-ribbon-action.clickable-icon.is-active svg {
  display: none;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0em var(--theme-color-redTransparent25);
  }
  50% {
    box-shadow: 0 0 0 0.25em var(--theme-color-redTransparent75);
  }
  100% {
    box-shadow: 0 0 0 0em var(--theme-color-);
  }
}
/* #endregion */
/* #region   Core Plugin: Backlinks */

.backlink-pane > .tree-item-self,
.outgoing-link-pane > .tree-item-self {
  color: var(--theme-color-control);
  width: inherit;
  padding: 0.25em 0.5em 0.25em 0;
}
.backlink-pane .tree-item-self .tree-item-inner,
.outgoing-link-pane .tree-item-self .tree-item-inner {
  padding-inline-start: 0;
}
.backlink-pane .search-result:not(.is-collapsed) .search-result-file-title {
  color: var(--theme-color-control);
}
.backlink-pane .search-result-container {
  margin-inline-start: 1em;
}
.search-result-file-match-replace-button {
  bottom: 0.375em;
}
.embedded-backlinks .backlink-pane .search-result-file-matches {
  background: none;
  box-shadow: none;
}
.embedded-backlinks {
  /* Terrible to use !important, but otherwise this gets an inline style enforcing a min height that can leave lots of unused space at the bottom. */
  min-height: 0 !important;
}
.setting-properties-position-below
  .mod-root
  .is-live-preview
  .metadata-container[data-property-count="0"]
  ~ .embedded-backlinks {
  padding-top: 0.5rem;
}
.embedded-backlinks .backlink-pane {
  padding: 0;
}
.embedded-backlinks .backlink-pane .tree-item-self .tree-item-flair-outer {
  /* Normally this would be positioned ot the right, but for embedded backlinks this overlaps with the controls */
  margin-inline-start: 1em;
}
.embedded-backlinks .nav-buttons-container {
  top: 0;
  right: 0;
}
.embedded-backlinks .nav-header {
  container-type: inline-size;
  container-name: embedded-links-nav-header;
}
.embedded-backlinks .nav-buttons-container {
  /* On small screens, put .nav-buttons-container on its own row so it doesn't overlap the links */
  position: relative;
}
@container embedded-links-nav-header (min-width: 20rem) {
  .embedded-backlinks .nav-buttons-container {
    position: absolute;
  }
}
.embedded-backlinks .backlink-pane .search-result-file-title .tree-item-icon {
  position: relative;
  padding: 0;
  margin-inline-start: 0;
  left: inherit;
}
.embedded-backlinks .backlink-pane .search-result-file-matches {
  margin-inline-start: 1em;
}
.embedded-backlinks .backlink-pane .search-empty-state {
  margin: 0;
}
.embedded-backlinks .nav-header ~ #search-container {
  width: calc(100% - 150px);
  margin: 0 0 0 0;
}
.embedded-backlinks .backlink-pane > .tree-item-self {
  width: inherit;
}

/* stick backlinks in document to bottom */
body.theme-setting-stickyEmbeddedLinks-on .mod-footer:has(> .embedded-backlinks) {
  position: sticky;
  bottom: 0;
  width: 100%;
  overflow-y: visible;

  & > .backlink-pane,
  & > .embedded-backlinks > .backlink-pane {
    overflow-y: scroll;

    &::-webkit-scrollbar {
      width: 0;
    }
  }
}
body.theme-setting-stickyEmbeddedLinks-on
  .setting-properties-position-below
  .mod-root
  .is-live-preview
  .metadata-container {
  position: sticky;
  bottom: 0;
  overflow-y: visible;
}
/* #endregion */
/* #region   Core Plugin: Bases */
/* #region     All bases */
.body,
.leaf-content[data-type="bases"] {
  --bases-header-height: auto;
  --bases-table-header-background: var(--theme-color-tabNavActiveBg);
  --bases-view-padding-bottom: 0;
  --bases-cards-container-background: transparent;
  --bases-cards-group-padding: 0.5em 0.5em;
  --bases-embed-border-width: 0;

  .bases-header {
    --bases-header-padding-start: 0.5em;
    --bases-header-padding-end: 0.5em;
  }
}

body {
  --bases-header-padding-start: 0.5em;
  --bases-header-padding-end: 0.5em;
}

.bases-view[data-view-type="table"] {
--bases-embed-border-width: 0;
}

.bases-view {
  scrollbar-gutter: auto;
  scrollbar-color: var(--theme-color-baseTransparent25) var(--bases-table-header-background);
}

.block-language-base {
  background-color: var(--embed-background);
  border-bottom: var(--embed-border-bottom);
  border-inline-start: var(--embed-border-left);
  border-radius: var(--radius-m);
  border-inline-end: var(--embed-border-right);
  border-top: var(--embed-border-top);
  margin: 0;
}

.bases-header {
  .query-toolbar .query-toolbar-item.mod-views {
    overflow: visible;
    flex-wrap: wrap;
  }
}
.bases-thead {
  box-shadow: var(--theme-shadow-indent);
  border-radius: var(--tab-radius-active) var(--tab-radius-active) 0 0;

  .bases-td {
    box-shadow: none;
    border-radius: var(--tab-radius-active) var(--tab-radius-active) 0 0;
  }
}
.bases-tbody {
  box-shadow: none;

  .bases-tr {
    box-shadow: none;

    &:nth-child(odd) .bases-table-cell {
      background-color: var(--theme-color-baseTransparent06);
    }

    .bases-table-cell[disabled="true"] {
      background: var(--theme-color-tabNavActiveBg);
    }
  }
  .bases-td:focus-within .bases-table-cell {
    box-shadow: 0 0 0 var(--input-border-width) var(--theme-color-base);
    border-radius: var(--radius-s);
    border: none;
    background-color: var(--background-input);
    color: var(--text-normal);
  }
}

@media (hover: hover) {
  .bases-thead .bases-td:hover {
    --bases-table-header-color: white;

    .bases-table-header-label,
    .bases-table-header-sort {
      color: var(--bases-table-header-color);
    }

    background-color: var(--bases-table-header-background-hover);
  }
}

/* Checkboxes styled like markdown */
.bases-tbody .metadata-input-checkbox {
  border-radius: 0.33em;
  border-radius: var(--checkbox-radius);
  border-color: var(--theme-color-controlContentArea);
}
@media (hover: hover) {
  .bases-tbody .metadata-input-checkbox:hover {
    border-color: var(--theme-color-controlContentArea);
    background-color: var(--theme-color-controlContentAreaHover);
  }
}

.bases-toolbar-menu-container #search-container {
  --search-icon-color: var(--theme-color-base);
  border-bottom: none;
  padding-bottom: 0;
}

.bases-toolbar-menu-container-header .close-icon {
  align-self: center;
}
.mod-macos .bases-toolbar-menu-container-header .close-icon {
  order: -1;
}
.bases-query-container {
  .filter-group {
    .filter-row {
      .conjunction {
        min-width: 4.5em;
      }
    }
    .filter-group-actions {
      display: flex;
      gap: 0.5em;
    }
  }
  .filter-expression {
    background: inherit;
  }
  @media (hover: hover) {
    .filter-expression:hover {
      background-color: var(--metadata-property-background-hover);
      --metadata-divider-color: var(--metadata-divider-color-hover);
      background-color: var(--metadata-property-background-hover);
      box-shadow: var(--metadata-property-box-shadow-hover);
      border-radius: var(--metadata-property-radius-hover);
    }
  }
}

.bases-sort-container .bases-sort-items {
  gap: 0.5em;
}

.bases-toolbar-menu-item.is-selected {
  background-color: var(--theme-color-controlBgActive);
  color: var(--theme-color-controlActive);

  .bases-toolbar-menu-item-info-icon,
  .bases-toolbar-menu-item-icon {
    color: var(--theme-color-controlActive);
  }
}

@media (hover: hover) {
  .bases-sort-property-container:hover {
    background: transparent;
  }
  .bases-toolbar-menu-container-header .back-button:hover {
    background-color: var(--theme-color-controlBgHover);
    color: var(--theme-color-controlHover);

    .back-icon  {
      color: var(--theme-color-controlHover);
    }
  }
  .bases-toolbar-menu-item:hover {
    background-color: var(--theme-color-controlBgHover);
    color: var(--theme-color-controlHover);

    .bases-toolbar-menu-item-info-icon,
    .bases-toolbar-menu-item-icon {
      color: var(--theme-color-controlHover);
    }
  }

  .bases-toolbar-menu-form .input-row .help-icon {
    color: var(--theme-color-controlHover);
  }
}
.query-toolbar-menu.mod-filters {
  .menu-scroll {
    display: flex;
    gap: 0.5em;
  }
  .query-toolbar-section-header {
    --flair-background: inherit;
    --flair-color: inherit;
  }
  @media(hover: hover) {
    .query-toolbar-section-header:hover {
      color: var(--nav-item-color-hover);
      background-color: var(--nav-item-background-hover);
      border-radius: var(--radius-s);
      font-weight: var(--nav-item-weight-hover);

      .collapse-icon svg {
        color: var(--nav-item-color-hover);
      }
    }
  }
}
/* #endregion */
/* #region     Table View */
.bases-view[data-view-type="table"] {
  background-color: var(--background-primary);
}

/* #endregion */
/* #region     Card View */
.bases-cards-container {
  padding-inline-start: var(--bases-header-padding-start);
  padding-inline-end: var(--bases-header-padding-end);
}
.bases-cards-item {
  color: var(--theme-color-card);
  background-color: var(--theme-color-cardBg);
  border-radius: var(--radius-m);
  border: none;
  box-shadow: var(--shadow-s);
  padding: 0 0 0.5em 0;

  .mod-title {
    padding: 0.5em 0;
  }

  .bases-cards-label,
  .bases-cards-line,
  .bases-cards-line:empty:before {
    color: var(--theme-color-card);
  }
}
.bases-cards-label {
  color: var(--theme-color-card);
}
@media (hover: hover) {
  .bases-cards-item:hover {
    color: var(--theme-color-cardHover);
    background-color: var(--theme-color-cardBgHover);

    .bases-cards-label,
    .bases-cards-line,
    .bases-cards-line input,
    .bases-cards-line:empty:before {
      color: var(--theme-color-cardHover);
    }

    .bases-cards-cover {
      mix-blend-mode: screen;
    }
  }
}
/* #endregion */
/* #region     Bases in the centre panel */
.leaf-content[data-type="bases"] {
  .view-header {
    border-bottom: none;
  }
  .bases-header {
    background-color: var(--theme-color-tabNavActiveBg);
    border-bottom: none;
    padding-top: 0;
    padding-bottom: 0.5em;
  }
}
/* #endregion */
/* #region     Bases in a sidebar panel */
.mod-sidedock .leaf-content[data-type="bases"] {
  --bases-cards-group-padding: 0 0;

  .bases-view {
    background-color: transparent;
    font-size: var(--font-ui-small);
  }
  .bases-header {
    background-color: transparent;
  }
  .bases-tbody {
    background-color: var(--background-primary);
  }
}
/* #endregion */
/* #region     Embedded bases */
.bases-embed {
  padding: 0.5em 0 0.5em 0;

  .bases-view,
  .bases-thead {
    background-color: transparent;
  }
}
/* #endregion */
/* #endregion */
/* #region   Core Plugin: Bookmarks */

.view-action.mod-bookmark {
  --icon-color: transparent;
  color: var(--theme-color-control);
}
.view-action.mod-bookmark:hover {
  color: var(--theme-color-controlHover);
}
/* #endregion */
/* #region   Core Plugin: Canvas */
body {
  --embed-border-start: none;
  --embed-border-end: none;
  --embed-border-top: none;
  --embed-border-bottom: none;
}

.canvas-submenu {
  background: var(--theme-color-interactiveActive);
  top: calc(100% - 0.5em);
  box-shadow: none;
}
.canvas-card-menu {
  bottom: var(--theme-length-controlSetSpacing);

  .canvas-card-menu-button.mod-draggable:hover svg {
    transform: translateY(0);
    filter: none;
  }
}
.canvas-controls {
  gap: 0.5em;
  right: var(--theme-length-controlSetSpacing);
  top: var(--theme-length-controlSetSpacing);
}
.canvas-control-group {
  background: transparent;
  border: none;
  box-shadow: none;
}
@media (hover: hover) {
  /* The normal hover colour doesn't work with these icons that have a fill colour */
  .canvas-card-menu .canvas-card-menu-button:hover {
    color: var(--theme-color-control);
  }
}
.canvas-node-content,
.canvas-node-content.markdown-embed {
  background-color: var(--background-primary);
  border-top: var(--embed-border-top);
  border-inline-end: var(--embed-border-end);
  border-bottom: var(--embed-border-bottom);
  border-inline-start: var(--embed-border-start);
  border-radius: var(--radius-m);
}
.canvas-node-container {
  border: 0.25rem solid var(--theme-color-baseTransparent50)
}
.canvas-node.is-selected .canvas-node-container,
.canvas-node.is-focused .canvas-node-container {
    border-color: var(--theme-color-base);
    box-shadow: var(--shadow-stationary), 0 0 0 2px var(--themne-color-base);
}
/* #endregion */
/* #region   Core Plugin: Command Palette */
/*   No special styles: uses shared .prompt */
/* #endregion */
/* #region   Core Plugin: Files */

.leaf-content[data-type="file-explorer"] {
  .nav-header {
    .nav-buttons-container {
      gap: 0.25em;
      /* Insert an element to force a line break in the flexbox, separating the first two controls from the others. */
      .nav-action-button:has(.svg-icon.lucide-edit),
      .nav-action-button:has(.svg-icon.lucide-folder-plus) {
        order: 0;
      }
      /* Style first two controls that will create items as lightweight buttons */
      .nav-action-button:has(.svg-icon.lucide-edit),
      .nav-action-button:has(.svg-icon.lucide-folder-plus) {
        border: none;
        box-shadow: var(--theme-shadow-control);
        background-color: var(--theme-color-controlLowWeightBg);
        color: var(--theme-color-controlText);
        font-size: var(--font-ui-smaller);
        line-height: var(--line-height-tight);
        min-height: 1.5rem;
        padding: 0.25em 0.5em;
        display: flex;
        gap: 0.5em;

        &:after {
          content: attr(aria-label);
        }
      }
      &:after {
        order: 1;
        content: "";
        width: 100%
      }
      .nav-action-button {
        order: 2;
      }
    }

    @media (hover: hover) {
      .nav-action-button:has(.svg-icon.lucide-edit):hover,
      .nav-action-button:has(.svg-icon.lucide-folder-plus):hover {
        border: none;
        background-color: var(--theme-color-controlBgHover);
        color: var(--theme-color-controlTextHover);

      }
      .nav-action-button:has(.svg-icon.lucide-edit).is-active:hover,
      .nav-action-button:has(.svg-icon.lucide-folder-plus).has-active-menu:hover {
        border: none;
        background-color: var(--theme-color-controlBgHover);
        color: var(--theme-color-controlTextHover);

        .text-button-icon {
          color: var(--theme-color-controlTextHover);
        }
      }
    }
  }

  .nav-folder-title-content {
    font-weight: var(--font-bold);
  }
}
/* Mobile */
#main-horizontal-drawer {
  .leaf-content[data-type="file-explorer"] {
    .nav-header {
      .nav-action-button:has(.svg-icon.lucide-edit),
      .nav-action-button:has(.svg-icon.lucide-folder-plus) {
        min-height: 44px;
        flex-shrink: 0;
      }
    }
    .nav-buttons-container {
      padding: 0;
    }
  }
}
.mod-sidedock {
  .leaf-content {
    #file-explorer {
      padding: 0.5rem 1rem 2rem 1rem;
    }
  }
}
.mod-left-split {
  .leaf-content {
    #file-explorer {
      /* Reduce left padding as the sidebar also provides visual spacing */
      padding-inline-start: 0.5rem;
    }
  }
}





/* #endregion */
/* #region   Core Plugin: File Recovery */

.mode-sync-history {
}
.sync-history-list-container {
  border: none;
}
.sync-history-list {
  gap: 1em;
}
.sync-history-content-container {
  background-color: var(--theme-color-settingsBg);
}
.sync-history-content .setting-item,
.sync-history-content .setting-item:first-child,
.mod-sync-history .sync-history-content-buttons {
  background-color: var(--theme-color-settingsBg);
  border: none;
  margin: 0;
  padding: 1em;
}
.sync-history-content .setting-item:first-child {
  box-shadow: var(--shadow-s);
  z-index: 1;
}
.sync-history-list-item-header:hover {
  background: transparent;
}
/* #endregion */
/* #region   Core Plugin: Footnotes View */

.footnotes-view {
  .footnotes-list {
    display: flex;
    flex-direction: column;
    gap: 1em;

    .footnote-list-item {
      border: 0;
      padding-inline-end: 1.75em;

      &.is-editing > .footnote {
        box-shadow: none;
        background-color: transparent;

        .footnote-content {
          /* TODO: style as for editing properties */
          border-radius: var(--metadata-property-radius);
        }
        .footnote-content:focus-within {
          border: none;
          background: var(--background-input);
          box-shadow: 0 0 0 var(--input-border-width) var(--background-modifier-border-focus);
          color: var(--text-normal);
        }
      }

      .footnote {
        padding: 0;

        .footnote-id {
          padding-top: 0.25rem;
        }
        .footnote-content {
          padding: var(--input-padding);

          .markdown-embed {
            background: transparent;

            .markdown-preview-view .markdown-preview-sizer > div {
              padding: 0;
            }
          }
          .markdown-embed-link {
            top: -0.25rem;
          }
        }
      }
    }
  }
}
@media (hover: hover) {
  .footnotes-view .footnote-content:hover {
    background-color: var(--metadata-property-background-hover);
    box-shadow: var(--metadata-property-box-shadow-hover);
    border-radius: var(--metadata-property-radius-hover);
  }
}
/* #endregion */
/* #region   Core Plugin: Graph view */

.graph-controls {
  min-width: 12em; /* Make room for controls */
  top: var(--theme-length-controlSetSpacing);
  right: var(--theme-length-controlSetSpacing);

  .graph-controls-button.mod-close,
  .graph-controls-button.mod-reset {
    top: 0.25rem;
  }
  .graph-controls-button.mod-close {
    inset-inline-end: 0.25rem;
  }
  .graph-controls-button.mod-reset {
    inset-inline-end: 2.25rem;
  }
}
/* Smaller in sidebar */
.mod-sidedock {
  .graph-controls {
    font-size: 0.75rem;

    .graph-controls-button.mod-close,
    .graph-controls-button.mod-reset {
      top: 0.25rem;
    }
    .graph-controls-button.mod-close {
      right: 0.25rem;
      height: var(--input-height);
      width: var(--input-height);
    }
    .graph-controls-button.mod-reset {
      right: 2.25rem;
    }

    .graph-control-section .tree-item-inner {
      font-size: 0.75rem;
      padding: 0;
    }
    .graph-control-section-header,
    .setting-item-name,
    #search-container input[type="search"],
    button {
      font-size: 0.75rem;
    }
    #search-container input[type="search"],
    .mod-cta {
      width: 10em;
    }
  }
}

.graph-control-section {
  border: none;
  padding: 0;
}
.graph-control-section > .tree-item-self {
  padding: var(--nav-item-padding);
}
.graph-control-section:last-child .tree-item-children {
  padding-bottom: 0;
}
.graph-controls .graph-controls-button {
  display: none;
}
.graph-controls-button.mod-close {
  border-radius: 100%;
  color: var(--theme-color-control);
}
.graph-controls-button.mod-close:hover {
  color: var(--theme-color-control);
}
.graph-controls .tree-item-self .tree-item-icon {
  margin: 0;
}
.leaf-content[data-type="graph"],
.leaf-content[data-type="localgraph"] {
  .view-header {
    border-bottom: none;
  }
  .view-content {
    overflow: hidden;
    border-radius: var(--tab-radius);
    background-color: var(--theme-color-graphViewBg);
  }
  .view-content:before,
  .view-content:after {
    background: transparent;
    box-shadow: var(--theme-shadow-indent);
    content: "";
    display: block;
    height: 1rem;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 120%;
  }
  .view-content:before {
    top: -1rem;
  }
  .view-content:after {
    bottom: -1rem;
  }
}
.mod-sidedock .leaf-content[data-type="graph"],
.mod-sidedock .leaf-content[data-type="localgraph"] {
  margin: 0.5rem 0;
}
.graph-view.color-arrow,
.graph-view.color-line {
  color: var(--theme-color-graphLine);
  opacity: 0.25;
}
.graph-view.color-fill {
  color: var(--theme-color-graphLine);
  opacity: 0.5;
}
.graph-view.color-fill-tag {
}
.graph-view.color-fill-attachment {
}
.graph-view.color-circle {
}
.graph-view.color-text {
  color: var(--theme-color-graphLine);
  opacity: 0.5;
}
.graph-view.color-fill-highlight {
}
.graph-view.color-line-highlight {
}
.graph-view.color-fill-unresolved {
}

/* #endregion */
/* #region   Core Plugin: Note composer */

/*   No special styles: uses shared .prompt */

/* #endregion */
/* #region   Core Plugin: Outgoing links */

.tree-item-self.is-clickable.outgoing-link-item {
  cursor: var(--cursor-link);
  text-decoration-line: var(--link-decoration);
  text-decoration-thickness: var(--link-decoration-thickness);
  color: var(--link-color);
  text-underline-offset: 0.125em;
}
.tree-item-self.is-clickable.outgoing-link-item .tree-item-inner-subtext {
  color: inherit;
  font-size: 85%;
}
body:not(.is-grabbing) .tree-item-self.is-clickable.outgoing-link-item:hover {
  background: transparent;
  color: var(--link-color-hover);
  font-weight: inherit;
  text-decoration-line: var(--link-decoration-hover);
}
.external-link:after {
  -webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="24px" height="24px" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" stroke="black" fill="none" stroke-width="1"><path d="M6.125,3.938L1.313,3.938L1.313,12.688L10.063,12.688L10.063,7.875M7.875,1.75L12.25,1.75L12.25,6.125M12.25,1.75L6.125,7.875"/></svg>');
  -webkit-mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  background-color: var(--link-external-color);
  background-image: none;
  content: "";
  display: inline-block;
  height: var(--font-text-size);
  margin-inline-start: 0.25em;
  margin-top: -0.25em;
  vertical-align: middle;
  width: var(--font-text-size);
}
.external-link {
  background-image: none;
  padding-inline-end: 0;
}
/* #endregion */
/* #region   Core Plugin: Page preview */

.popover {
  border: none;
  box-shadow: var(--shadow-l);
  padding: 0.5rem;
}
.popover.hover-popover{
  padding: 0.5rem;
}
.popover.hover-popover > .markdown-embed {
  background-color: var(--background-primary);
  padding: 0;

  .markdown-embed-content {
    height: 100%;
  }

  .markdown-embed-link {
    top: 4px;
    right: auto;
    left: auto;
  }
}
.popover.hover-popover > .file-embed.mod-empty {
  width: auto;
}
/* #endregion */
/* #region   Core Plugin: Publish */

.modal.mod-publish {
  padding: 0;
}
.modal.mod-publish .modal-title {
  font-size: var(--font-ui-medium);
  line-height: 1.4em;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0.5em calc(var(--size-2-3) + 2rem);
}
/* #endregion */
/* #region   Core Plugin: Search */

.mod-sidedock {
  .leaf-content[data-type="search"] {
    padding: 0.5rem 1rem 2rem 1rem;
  }
}
.mod-left-split {
  .leaf-content[data-type="search"] {
    /* Reduce left padding as the sidebar also provides visual spacing */
    padding-inline-start: 0.5rem;
  }
}

.leaf-content[data-type="search"] {
  padding: 1rem;
}
.search-row,
.search-info-container,
.search-params,
.search-results-info {
  margin: 0 0 0.5rem 0;
  padding: 0;
}

.search-params .setting-item {
  margin: 0;
}
.search-result-container.mod-global-search {
  margin-top: 1em;
  padding: 0;
}
.search-results-children {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.search-results-children > div:first-child:not(.search-result) {
  /* I'm not sure what this div is intended for, but its presence creates an extra flex gap at the top of .search-results-children */
  display: none;
}
.search-results-info {
  border-bottom: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5em;
  margin: 0;
}
.search-results-result-count {
  width: auto;
}
.search-results-info .dropdown {
  max-width: 12em;
  text-align-last: left;
}
/* #endregion */
/* #region   Core Plugin: Slides */

body {
  /* Match slide typography to regular typography */
  --r-background-color: var(--background-primary);
  --r-block-margin: 20px;
  --r-code-font: var(--font-monospace-theme);
  --r-heading-color: var(--text-normal);
  --r-heading-font-weight: var(--h1-weight);
  --r-heading-font: var(--font-text-theme: );
  --r-heading-letter-spacing: normal;
  --r-heading-line-height: 1.2;
  --r-heading-margin: 0.67em 0 0 0;
  --r-heading-text-shadow: none;
  --r-heading-text-transform: none;
  --r-heading1-size: 2.5em;
  --r-heading1-text-shadow: none;
  --r-heading2-size: 1.6em;
  --r-heading3-size: 1.3em;
  --r-heading4-size: 1em;
  --r-link-color-dark: var(--link-color-active);
  --r-link-color-hover: var(--link-color-hover);
  --r-link-color: var(--link-color);
  --r-main-color: var(--text-normal);
  /* For some reason this seems to need to be in px */
  --r-main-font-size: 42px;
  --r-main-font: var(--font-text-theme);
}
.slides-close-btn {
  line-height: 0;
  width: 18px;
  height: 18px;
}
.reveal-viewport {
  background-color: var(--background-primary);
  color: var(--text-normal);
}
.slides-close-btn > svg > rect {
  display: none;
}
.slides-container .slide .controls button {
  background: transparent;
  border-radius: 100%;
  box-shadow: none;
  color: var(--theme-color-control);
  display: flex;
  align-content: center;
  justify-content: center;
  height: fit-content;
  width: fit-content;
  padding: 0.5rem;
}
.slides-container .slide .controls button:hover {
  background: var(--theme-color-navigationButtonBgHover);
}
.slides-container .slide .controls button .controls-arrow {
  width: 1.5rem;
  height: 1.5rem;
}
.reveal .controls .controls-arrow:before,
.reveal .controls .controls-arrow:hover:before {
  transform: translateX(0.5em) translateY(1em) rotate(45deg);
  width: 1rem;
}
.reveal .controls .controls-arrow:after,
.reveal .controls .controls-arrow:hover:after {
  transform: translateX(0.5em) translateY(1em) rotate(-45deg);
  width: 1rem;
}
/* #endregion */
/* #region   Core Plugin: Sync */

/* Deleted files modal */
.modal:has(.sync-file-tree-container) .modal-content {
  /* There's no button container below the list */
  padding-bottom: 0;
}
.modal .vault-list,
.modal .sync-file-tree-container {
  margin: 0 -2em;
}
.modal:has(.vault-list) .modal-title {
  box-shadow: var(--shadow-s);
  z-index: 1;
}
.modal:has(.vault-list) .modal-button-container {
  padding: 1em 0 0 0;
}
.is-phone .vault-list-item {
  /* Fit button snugly to right */
  padding-inline-end: 0.5em;
}
.sync-file-tree-container ~ p {
  /* Targets bulk restore modal */
  padding: 1em 0;
}
.modal.mod-sync-log {
  padding: 0;
}
.modal.mod-sync-log .modal-title {
  font-size: var(--font-ui-medium);
  line-height: 1.4em;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0.5em calc(var(--size-2-3) + 2rem);
}
.modal.mod-sync-log .setting-item {
  margin: 0;
}
.modal.mod-sync-log .sync-log-container {
  border: none;
  background: var(--theme-color-logBg);
  color: var(--theme-color-log);
  padding: 1.5em;
}
/* #endregion */
/* #region   Core Plugin: Tags view */
@media (hover: hover) {
  /* Don't use heavy background for hovering over rows */
  body:not(.is-grabbing) .tag-container .tree-item-self.is-clickable:hover {
    background: inherit;
  }
}
/* Align collapsible tags with non-collapsible */
.tag-pane-tag {
  .tree-item-inner {
    margin-inline-start: 9px; /* This matches hard-coded styles */
  }

  &.mod-collapsible {
    .tree-item-inner {
      margin-inline-start: 0;
    }
  }
}
.tag-pane-tag {
  padding-inline-end: 0;
}
.tag-pane-tag > .tree-item-inner {
  /* Tags in sidebar styled the same as in notes, but ligher/darker to sit on colored background */
  border-radius: var(--tag-radius);
  border: var(--tag-border-width) solid var(--tag-border-color);
  font-weight: var(--tag-weight);
  padding: var(--tag-padding-y) var(--tag-padding-x);
  vertical-align: baseline;
}
.tag-pane-tag > .tree-item-inner:before {
  content: "#";
  display: inline;
}
.tag-pane-tag > .tree-item-inner > .tree-item-inner-text {
  display: inline;
}
@media (hover: hover) {
  .tag-pane-tag > .tree-item-inner:hover {
    cursor: var(--cursor-link);
  }
}

/* #endregion */
/* #region   Core Plugin: Web viewer */
.leaf-content[data-type="webviewer"] {
  .view-header {
    border-bottom: none;
  }
  .view-content:before,
  .view-content:after {
    background: transparent;
    box-shadow: var(--theme-shadow-indent);
    content: "";
    display: block;
    height: 1rem;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 120%;
  }
  .view-content:before {
    top: -1rem;
  }
  .view-content:after {
    bottom: -1rem;
  }

  .webviewer-content {
    border-top: none;
    overflow: hidden;
  }
  .reader-mode-content {
    overflow: hidden;
    .markdown-preview-view {
      padding: 2rem;
    }
  }
  .webviewer-address {
    margin: var(--input-border-width);
  }
  .search-in-page {
    position: absolute;
    left: 50%;
    top: 0.5em;
    transform: translateX(-50%);
  }
}

/* #endregion */
/* #endregion */
/* #region Community plugins */
/* #region   Community Plugin: Advanced Tables */
/* a.k.a. table-editor-obsidian */
body.theme-setting-overrideAdvancedTables {
  .leaf-content[data-type="advanced-tables-toolbar"] .view-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  [data-type="advanced-tables-toolbar"]
    .nav-buttons-container
    .nav-action-button
    > svg {
    fill: currentColor;
    --text-muted: currentColor; /* For some reason the CSV button specifies text-muted as stroke color */
  }
  .advanced-tables-buttons > div > .title {
    font-weight: var(--font-semibold);
    font-size: var(--font-ui-small);
    color: var(--text-normal);
    text-decoration: none;
    text-align: center;
    display: block;
    padding-top: 0.5em;
  }
  .advanced-tables-row-label {
    font-weight: var(--font-semibold);
    font-size: var(--font-ui-small);
    color: var(--text-normal);
  }
  [data-type="advanced-tables-toolbar"]
    .nav-buttons-container
    .nav-action-button {
    margin-inline-end: 0.25em;
  }
}
/* #endregion */
/* #region   Community Plugin: Calendar */
body.theme-setting-overrideCalendar {
  .leaf-content[data-type="calendar"] {
    .view-content {
      background-color: var(--theme-color-tabNavActiveBg);

      .mod-fade:after {
        display: none;
      }
    }
    .container {
      border-radius: 1rem;
      overflow: hidden;
    }
    .container > .calendar {
      width: 100%;
      margin: 0;
    }
  }

  .container:has(> .calendar) {
    background-color: var(--theme-color-calendarBg);
    margin: 0;
    padding: 0 !important;

    .nav {
      display: flex;
      justify-content: space-between;
      align-items: flex-end !important;
      margin: 0 !important;
      padding: 1em 0.5em 0.5em 0.5em !important;

      .title {
        cursor: default;
        line-height: 1;
        padding: 0;
      }
      .right-nav {
        align-items: center;
        margin: 0;
        padding: 0;
      }
      .arrow svg,
      .reset-button {
        color: var(--icon-color);
      }
    }
  }
  .calendar .day {
    padding: 0.5em 1em;
    min-height: 10em;
  }
  .container > .calendar {
    table-layout: fixed;
    margin: 1rem;
  }
  .container > .calendar thead th {
    background: transparent;
    border: none;
    text-transform: none;
    font-size: var(--font-ui-small);
    font-weight: normal;
    color: var(--theme-color-control);
    text-align: left;
    padding: 0.25em 1em;
  }
  .container > .calendar tbody td {
    display: table-cell;
    max-width: 0;
    border: none;
    padding: 0;
    vertical-align: top;
  }

  /* Days for current month */
  .container > .calendar tbody td {
    .day {
      background-color: var(--theme-color-calendarDayBg);
      border-radius: 0;
      margin: 0;
    }

    .day.today {
      background-color: var(--theme-color-tabNavBg);
      color: var(--text-normal);
      font-weight: bold;
    }
    .day.active {
      background-color: var(--background-primary);
      color: var(--text-normal);
    }
  }
  .container > .calendar tbody td:has(.day.today) {
    background-color: var(--theme-color-calendarDayBg);
  }
  .container > .calendar tbody td:has(.adjacent-month) {
    background-color: transparent;

    .day {
      background-color: transparent;
    }
  }
  @media (hover: hover) {
    .container > .calendar tbody td .day:hover {
      background: transparent;
    }
    .container > .calendar tbody td:not(:has(.adjacent-month)) .day:hover {
      background-color: var(--theme-color-controlBgHover);
      color: var(--theme-color-controlHover);
    }
  }
  .calendar .day {
    text-align: left;
  }

  .mod-sidedock .leaf-content[data-type="calendar"] {
    .view-content {
      background: transparent;
    }

    .container {
      border-radius: var(--radius-m);
      overflow: hidden;

      .calendar .day {
        padding: 0.25em 0.25em;
        min-height: 3em;
      }

    }
    .container > .calendar {
      table-layout: fixed;
      width: 100%;
      margin: 0.0;
    }
    .container > .calendar thead th {
      padding: 0.25em;
    }
    .container > .calendar tbody td .day.today {
      border-radius: 0.25em;
    }

  }
}
/* #endregion */
/* #region   Community Plugin: Clear Unused Images */
body.theme-setting-overrideClearUnusedImages {
  .modal:has(.unused-images-logs) {
    padding-bottom: 1em;
  }
}
/* #endregion */
/* #region   Community Plugin: Columns */
body.theme-setting-overrideColumns {
  /* Callout format – this also works without the plugin */

  --obsidian-columns-gap: 1em;
  --obsidian-columns-padding: 0 0;
  --obsidian-columns-min-width: 10em;
  --obsidian-columns-def-span: 1;

  div[data-callout|="col"].callout {
    background-color: var(--background-primary); /* Override callout bg */
    padding: 0;
    border-style: none;

    > div.callout-title {
      display: none;
    }

    > div.callout-content {
      > div[data-callout^="col-md"].callout {
        flex-grow: var(--obsidian-columns-custom-span);
        flex-basis: calc(
          var(--obsidian-columns-min-width) *
            var(--obsidian-columns-custom-span)
        );
        width: calc(
          var(--obsidian-columns-min-width) *
            var(--obsidian-columns-custom-span)
        );

        background-color: var(--background-primary); /* Override callout bg */
        padding: 0;
        border-style: none;
      }
      > div[data-callout|="col-md"].callout {
        margin-block-start: 0;
      }

      > div[data-callout="-0.5"].callout {
        --obsidian-columns-custom-span: 0.5;
      }
      > div[data-callout$="-1"].callout,
      > div[data-callout="col-md"].callout {
        --obsidian-columns-custom-span: 1;
      }
      > div[data-callout$="-1.5"].callout {
        --obsidian-columns-custom-span: 1.5;
      }
      > div[data-callout$="-2"].callout {
        --obsidian-columns-custom-span: 2;
      }
      > div[data-callout$="-2.5"].callout {
        --obsidian-columns-custom-span: 2.5;
      }
      > div[data-callout$="-3"].callout {
        --obsidian-columns-custom-span: 3;
      }
      > div[data-callout$="-3.5"].callout {
        --obsidian-columns-custom-span: 3.5;
      }
      > div[data-callout$="-4"].callout {
        --obsidian-columns-custom-span: 4;
      }
      > div[data-callout$="-4.5"].callout {
        --obsidian-columns-custom-span: 4.5;
      }
      > div[data-callout$="-5"].callout {
        --obsidian-columns-custom-span: 5;
      }
      > div[data-callout$="-5.5"].callout {
        --obsidian-columns-custom-span: 5.5;
      }
      > div[data-callout$="-6"].callout {
        --obsidian-columns-custom-span: 6;
      }
      > div[data-callout$="-6.5"].callout {
        --obsidian-columns-custom-span: 6.5;
      }
      > div[data-callout$="-7"].callout {
        --obsidian-columns-custom-span: 7;
      }
      > div[data-callout$="-7.5"].callout {
        --obsidian-columns-custom-span: 7.5;
      }
      > div[data-callout$="-8"].callout {
        --obsidian-columns-custom-span: 8;
      }
      > div[data-callout$="-8.5"].callout {
        --obsidian-columns-custom-span: 8.5;
      }
      > div[data-callout$="-9"].callout {
        --obsidian-columns-custom-span: 9;
      }
      > div[data-callout$="-9.5"].callout {
        --obsidian-columns-custom-span: 9.5;
      }
      > div[data-callout$="-10"].callout {
        --obsidian-columns-custom-span: 10;
      }
    }
  }
  .columnParent,
  div[data-callout="col"].callout > div.callout-content {
    display: flex !important;
    padding: var(--obsidian-columns-padding);
    flex-wrap: wrap;
    gap: var(--obsidian-columns-gap);
    white-space: normal;
  }
  .columnChild,
  div[data-callout="col"].callout > div.callout-content > * {
    flex-grow: var(--obsidian-columns-def-span);
    flex-basis: calc(
      var(--obsidian-columns-min-width) * var(--obsidian-columns-def-span)
    );
    width: calc(
      var(--obsidian-columns-min-width) * var(--obsidian-columns-def-span)
    );
  }
}
/* #endregion */
/* #region   Community Plugin: Dataview */
body.theme-setting-overrideDataview {
  /* Styled to match embeds */
  .block-language-dataview {
    background-color: var(--embed-background);
    border-bottom: var(--embed-border-bottom);
    border-inline-start: var(--embed-border-left);
    border-radius: var(--radius-m);
    border-inline-end: var(--embed-border-right);
    border-top: var(--embed-border-top);
    margin: 0;
  }
  @media (hover: hover) {
    /* Undo hover effect styles from app. There doesn't seem to be any clickable behaviour. */
  }

  /* List query */
  .dataview.list-view-ul {
    padding: var(--theme-padding-block);
    margin: 0;

    & li {
      margin: 0 0 0 0.5em;
    }
  }

  /* Table query */
  .block-language-dataview:has(
      .dataview.table-view-table .dataview.table-view-table
    ) {
    border-radius: 0;
  }
  .dataview.table-view-table {
    border-collapse: separate;
    border-spacing: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    --list-indent: 1em;
  }
  .dataview.table-view-table th {
    font-size: var(--table-header-size);
    font-weight: var(--table-header-weight);
    color: var(--table-header-color);
    font-family: var(--table-header-font);
    text-align: start;
    line-height: var(--line-height-tight);
  }
  .dataview.table-view-table thead th:first-of-type {
    border-top-left-radius: 0.5rem;
  }
  .dataview.table-view-table thead th:last-of-type {
    border-top-right-radius: 0.5rem;
    /* Make room for edit-block button */
    padding-inline-end: 2.5rem;
  }
  .dataview.table-view-table tbody tr:last-of-type td:first-of-type {
    border-bottom-left-radius: 0.5rem;
  }
  .dataview.table-view-table tbody tr:last-of-type td:last-of-type {
    border-bottom-right-radius: 0.5rem;
  }
  .dataview.table-view-table > thead > tr > th,
  .dataview.table-view-table > tbody > tr > td {
    border: solid var(--table-header-border-width)
      var(--table-header-border-color);
    border-left-width: 0;
    border-top-width: 0;
  }
  .dataview.table-view-table > tbody > tr > td:first-child,
  .dataview.table-view-table > thead > tr > th:first-child {
    border-left-width: var(--table-header-border-width);
  }
  .dataview.table-view-table > thead:first-child > tr:first-child th,
  .dataview.table-view-table > tbody:first-child > tr:first-child td {
    border-top-width: var(--table-header-border-width);
  }

  /* Table query with card layout (idea borrowed from Minimal) */

  .cards .block-language-dataview:has(.dataview.table-view-table) {
    background: var(--theme-gradient-cardSetGenerated);
  }
  .cards table.dataview {
    --table-width: 100%;
    --table-edge-cell-padding-first: 0;
    --table-edge-cell-padding-last: 0;
    --table-cell-padding: 0;
    line-height: 1.3;
    --table-min-width: none;
    margin: 0;
  }
  .cards table.dataview thead {
    user-select: none;
    width: 180px;
    display: block;
    display: none;
    float: right;
    position: relative;
    text-align: right;
    height: 24px;
    padding-bottom: 0;
  }
  .cards table.dataview tbody {
    clear: both;
    padding: 1.5em;
    display: grid;
    grid-template-columns: var(--theme-grid-cardSet);
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }
  .cards table.dataview tbody:empty {
    padding: 0;
  }
  .cards table.dataview > tbody > tr {
    background-color: var(--theme-color-cardBg);
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: box-shadow 0.15s linear;
    max-width: var(--theme-length-cardMaxWidth);
    height: auto;
    border-radius: var(--radius-m);
    border: none;
    box-shadow: var(--shadow-s);
  }
  .cards table.dataview.table-view-table > tbody > tr > td,
  .cards
    table.dataview.table-view-table
    > tbody
    > tr:last-of-type
    > td:first-of-type,
  .cards
    table.dataview.table-view-table
    > tbody
    > tr:last-of-type
    > td:last-of-type {
    border: none;
    padding: 0;
    border-radius: 0;
    padding: 0.5em 0.75em 0.5em 0.75em;
  }
  .cards table.dataview.table-view-table > tbody > tr > td:has(img) {
    padding: 0;
  }
  .cards table.dataview tbody > tr > td img {
    aspect-ratio: var(--theme-cardAspectRatio);
    width: 100%;
    object-fit: var(--theme-cardImageFit);
    max-height: var(--theme-length-cardImageHeight);
    display: inline-block;
    background-color: var(--theme-color-baseTransparent12);
    vertical-align: bottom;
    margin: 0;
    text-align: center;
  }
  .cards table.dataview tbody > tr > td button {
    width: 100%;
  }

  /* Task query */
  .dataview-container:has(.contains-task-list) {
    padding: var(--theme-padding-block);
  }
  .dataview-container .contains-task-list {
    padding-inline-start: 0;
    margin: 0;
  }
  @media (hover: hover) {
    /* Style as a link */
    .dataview.task-list-item:hover,
    .dataview.task-list-basic-item:hover {
      box-shadow: none;
      background-color: transparent;
      cursor: var(--cursor-link);
      text-decoration-line: var(--link-decoration);
      color: var(--link-color);
    }
  }
  /* Calendar query */
  /* Most styles shared with Calendar plugin */
  .block-language-dataview:has(.calendar) {
    padding: var(--theme-padding-block);
  }

  /* Empty and error queries */
  & div.dataview-error-box,
  .dataview.dataview-error {
    align-items: center;
    border: 0.25rem dashed var(--theme-color-dataviewEmpty);
    display: flex;
    justify-content: center;
    min-height: 5em;
    width: 100%;
    background-color: transparent;
  }
  .dataview-error-message,
  .dataview-error {
    color: var(--theme-color-dataviewEmpty);
    text-align: center;
    font-family: var(--font-interface);
  }

  /* Callouts with dataviews */
  .callout .dataview.dataview-container {
    padding-top: 0;
  }
  .callout:has(.dataview.list-view-ul) .callout-content,
  .callout:has(.dataview-container > .contains-task-list) .callout-content,
  .callout:has(.block-language-dataview > .container > table.calendar)
    .callout-content {
    margin: 0 -1.5em;
  }
  .callout:has(.dataview.table-view-table) .callout-content {
    margin: 0 -0.75em;
  }
  .cards .callout:has(.dataview.table-view-table) .callout-content {
    margin: 0 -1.5em;
  }
}
/*   #endregion */
/* #region   Community Plugin: Excalidraw */
body.theme-setting-overrideExcalidraw {
   {
    & .view-header {
      padding-bottom: 0;
    }
    & .excalidraw-view {
      /* I don't know why the default styles have 1px padding left and right. */
      padding: 0;
    }
  }

  .excalidraw-view {
    .excalidraw {
      .FixedSideContainer_side_top {
        top: var(--theme-length-controlSetSpacing) !important;
        right: var(--theme-length-controlSetSpacing) !important;
        bottom: var(--theme-length-controlSetSpacing) !important;
        left: var(--theme-length-controlSetSpacing) !important;
      }
      .App-bottom-bar {
        gap: 0.5rem;
        margin: var(--theme-length-controlSetSpacing) !important;
      }

      /* Control sets */
      & .Island,
      & .mobile-misc-tools-container {
        background: var(--theme-color-controlSetBg);
        border: none;
        padding: 0.25rem;
        gap: 0;
        box-shadow: var(--theme-shadow-input);
        border-radius: var(--radius-m);
      }
      & .mobile-misc-tools-container {
        gap: 0.5rem;
        right: 0;
        top: 0;
      }

      /* Layout structures inside control sets */
      .Stack,
      .App-toolbar-content {
        gap: 0.5em;
        padding: 0;
      }
      .App-toolbar-content {
        /* I think these are supposed to be spacers, but I don't think we need them. */
        > .ToolIcon__icon:empty {
          display: none;
        }

        /* Container div for undeo/redo, which for somer eason has no class */
        > div:last-child {
          display: flex;
        }
      }

      /* Menus */
      & .dropdown-menu--mobile {
        width: auto;
      }
      & .dropdown-menu .dropdown-menu-container {
        background-color: var(--theme-color-menuBg);
        border: 0;
        box-shadow: var(--shadow-l);
        border-radius: var(--radius-l);
        margin: 0 1rem;
        padding: 0.5em;

        & > button {
          border: none;
          border-color: var(--nav-item-color);
          color: var(--nav-item-color);
          background-color: var(--nav-item-background);
          box-shadow: none;
        }

        /* Match other hotkeys */
        & .dropdown-menu-item__shortcut {
          background: transparent;
          border: solid 1px var(--theme-color-hotkey);
          color: var(--theme-color-hotkey);
          font-size: var(--font-ui-smaller);
          font-family: var(--font-interface);
          padding: 2px 6px;
          border-radius: var(--radius-s);
        }
      }

      .popover {
        margin: 0 1rem;
      }
      .context-menu {
        background-color: var(--theme-color-menuBg);
        border: 0;
        box-shadow: var(--shadow-l);
        border-radius: var(--radius-l);
        padding: 0.5em;
        margin: 0;
        display: flex;
        gap: 0;
        flex-direction: column;

        & button {
          border: none;
          border-color: var(--nav-item-color);
          color: var(--nav-item-color);
          background-color: var(--nav-item-background);
          box-shadow: none;
        }

        @media (hover: hover) {
          & button:hover {
            border-color: var(--nav-item-color-hover);
            color: var(--nav-item-color-hover);
            background-color: var(--nav-item-background-hover) !important;
            font-weight: var(--nav-item-weight-hover);
            --icon-fill-color: var(--nav-item-color-hover);
          }
        }

        hr {
          margin: 0.5em 0;
          border-top: var(--border-width) solid var(--background-modifier-border);
        }
      }
    }
  }
  @media (hover: hover) {
    .excalidraw-view {
      & .excalidraw {
        & .dropdown-menu .dropdown-menu-container {
          & > button:hover {
            border-color: var(--nav-item-color-hover);
            color: var(--nav-item-color-hover);
            background-color: var(--nav-item-background-hover) !important;
            font-weight: var(--nav-item-weight-hover);
            --icon-fill-color: var(--nav-item-color-hover);
          }

          & .dropdown-menu-item__shortcut {
            color: inherit;
            border-color: inherit;
          }
        }
      }
    }
  }

  /* Patch weird use of .is-mobile that clashes with Obsidian's use */
  body:not(.is-mobile) .mobile-misc-tools-container .ToolIcon.is-mobile {
    --input-height: 30px;
  }

  /* Buttons – duplicated from lightweight buttons above */
  .excalidraw-view .excalidraw .ToolIcon,
  .excalidraw-view .excalidraw .dropdown-menu-button,
  .excalidraw-view .excalidraw .sidebar-trigger__label-element {
    align-items: center;
    background-color: transparent;
    border-radius: var(--clickable-icon-radius);
    border: none;
    box-shadow: none;
    color: var(--theme-color-control);
    cursor: var(--cursor);
    display: flex;
    height: 2em;
    justify-content: center;
    min-height: var(--input-height);
    opacity: var(--icon-opacity);
    padding: 0.25rem;
    text-decoration: none;
    transition: opacity 0.15s ease-in-out;
    width: 2em;
    --icon-fill-color: var(--theme-color-control);
  }
  .is-mobile .excalidraw-view .excalidraw .ToolIcon,
  .is-mobile .excalidraw-view .excalidraw .dropdown-menu-button {
    min-height: 44px;
    min-width: 44px;
  }
  .excalidraw-view .excalidraw .dropdown-menu-button:focus {
    box-shadow: none;
  }
  @media (hover: hover) {
    .excalidraw-view .excalidraw .Island .ToolIcon:hover,
    .excalidraw-view .excalidraw .dropdown-menu-button:hover,
    .excalidraw-view .excalidraw .sidebar-trigger__label-element:hover,
    .excalidraw-view .excalidraw .mobile-misc-tools-container .ToolIcon:hover,
    .excalidraw-view .excalidraw .reset-zoom-button:hover {
      color: var(--theme-color-controlHover);
      --icon-fill-color: var(--theme-color-controlHover);
      background-color: var(--background-modifier-hover);
    }
  }
  /* Active state */
  .excalidraw-view .excalidraw .ToolIcon:has(.ToolIcon_type_radio:checked),
  .excalidraw-view .excalidraw .dropdown-menu-button:has(~ .dropdown-menu) {
    opacity: var(--icon-opacity-hover);
    color: var(--theme-color-controlLightweightActive);
    background-color: var(--theme-color-interactiveActive);
    --icon-fill-color: var(--theme-color-controlLightweightActive);
  }
  .excalidraw-view
    .excalidraw
    .ToolIcon.fillable:has(.ToolIcon_type_radio:checked)
    .ToolIcon__icon,
  .excalidraw-view
    .excalidraw
    .ToolIcon.fillable:has(.ToolIcon_type_radio:checked)
    .ToolIcon__keybinding,
  .excalidraw .ToolIcon .ToolIcon_type_checkbox:checked + .ToolIcon__icon,
  .excalidraw .ToolIcon .ToolIcon_type_radio:checked + .ToolIcon__icon {
    color: inherit;
    --icon-fill-color: inherit;
  }

  @media (hover: hover) {
    .excalidraw-view .excalidraw .ToolIcon:hover,
    .excalidraw-view .excalidraw .dropdown-menu-button:hover {
      color: var(--theme-color-controlHover);
      background-color: var(--background-modifier-hover);
    }
    .excalidraw-view
      .excalidraw
      .ToolIcon:has(.ToolIcon_type_radio:checked):hover,
    .excalidraw-view .excalidraw .dropdown-menu-button:focus:hover {
      background-color: var(--background-modifier-hover);
      color: var(--theme-color-controlHover);
    }
  }
  .excalidraw-view
    .excalidraw
    .ToolIcon
    .ToolIcon_type_checkbox:checked
    + .ToolIcon__icon,
  .excalidraw-view
    .excalidraw
    .ToolIcon
    .ToolIcon_type_radio:checked
    + .ToolIcon__icon {
    background-color: transparent;
  }

  /* Icons inside buttons */
  .excalidraw-view .excalidraw .Island .ToolIcon__icon,
  .excalidraw-view .excalidraw .Island .ToolIcon__keybinding,
  .excalidraw-view .excalidraw .mobile-misc-tools-container .ToolIcon__icon {
    --icon-size: var(--icon-s);
    --icon-stroke: var(--icon-s-stroke-width);
    border-radius: var(--clickable-icon-radius);
    color: inherit;
    opacity: var(--icon-opacity);
    background-color: transparent;
    border: none;
  }
  .excalidraw-view .excalidraw .sidebar-trigger {
    box-shadow: none;
    background: transparent;
  }

  .excalidraw-view .excalidraw .App-toolbar__divider {
    width: 1rem;
    height: 1.5rem;
    align-self: center;
    background-color: transparent;
    margin: 0 0.25rem;
  }
  .excalidraw-view .excalidraw .ToolIcon {
    cursor: default;
  }

  .excalidraw-view .excalidraw .zoom-actions,
  .excalidraw-view .excalidraw .zoom-actions .Stack {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
  .excalidraw-view .excalidraw .zoom-button {
    background: transparent !important; /* Ugh. */
    border-radius: var(--clickable-icon-radius) !important;
    font-size: inherit !important;
  }
  @media (hover: hover) {
    .excalidraw-view .excalidraw .zoom-button:hover {
      background-color: var(--background-modifier-hover) !important; /* Ugh. */
    }
  }

  /* Match style of small notice */
  .excalidraw .HintViewer {
    border-radius: var(--radius-xl);
    background-color: var(--background-modifier-message);
    color: var(--theme-color-notice);
    box-shadow: var(--shadow-s);
    padding: 0.5em 0.75em;
    width: auto;

    & span {
      padding: 0;
    }
  }

  .excalidraw-setting-hr {
    border: none;
  }
}
/*   #endregion */
/* #region   Community Plugin: Folder Note */
body.theme-setting-overrideFolderNote {
  .block-language-ccard {
    /* Styled as embed, but with gradient background to give more contrast for cards */
    border-bottom: var(--embed-border-bottom);
    border-inline-start: var(--embed-border-left);
    border-radius: var(--radius-m);
    border-inline-end: var(--embed-border-right);
    border-top: var(--embed-border-top);
    margin: 0;
    padding: 1em;
    background: var(--theme-gradient-cardSetGenerated);
    border: 0;
    padding: 1.5em;
    gap: 1.5em;

    .cute-card-band {
      margin-top: 0;
      grid-template-columns: var(--theme-grid-cardSet);
      grid-gap: 1em;
    }

    .cute-card-view,
    .is-phone .cute-card-view {
      background-color: var(--theme-color-cardBg);
      border-radius: var(--radius-m);
      border: none;
      box-shadow: var(--shadow-s);
      cursor: var(--cursor);
      padding: 0;
      position: relative;

      & article {
        padding: 0.25em 0.75em 0.5em 0.75em;
      }
      & h1 {
        color: inherit;
        padding: 0;
        font-size: var(--font-text);
        font-weight: var(--inline-title-weight);
        line-height: var(--inline-title-line-height);
        font-style: var(--inline-title-style);
        font-variant: var(--inline-title-variant);
        font-family: var(--inline-title-font);
        margin-bottom: var(--inline-title-margin-bottom);
        letter-spacing: -0.015em;
        color: var(--inline-title-color);
        white-space: pre-wrap;
      }
      & p,
      & span {
        color: var(--text-muted);
        font-weight: normal;
        margin-block-end: 0;
        margin-block-start: 0;
        font-size: 0.8rem;
      }

      .thumb-color {
        display: none;
      }
      .thumb-color-folder {
        font-weight: bold;
      }
    }
    .cute-card-view:hover {
      top: 0;
      box-shadow: var(--shadow-s);
    }
  }
}
/* #endregion */
/* #region   Community Plugin: Jira Issue */
body.theme-setting-overrideJiraIssue {
  .jira-issue-container {
    margin: 0 0 0.5em 0;
  }
  .jira-issue-container a {
    text-decoration-line: var(--link-decoration);
    text-decoration-thickness: var(--link-decoration-thickness);
  }
  @media (hover: hover) {
    .jira-issue-container a:hover {
      color: var(--link-color-hover);
      text-decoration-line: var(--link-decoration-hover);
    }
  }
  .jira-issue-container .ji-tags {
    border: solid 1px var(--embed-background);
    border-radius: var(--radius-s);
    overflow: hidden;
    width: 100%;
    align-items: center;
    display: flex;
    gap: 0.25em;
    padding: 0;

    .ji-tag,
    .ji-tag.is-link {
      background-color: transparent;
      color: inherit;
      margin: 0;
    }
    .ji-tag.is-link {
      color: var(--link-color);
      font-weight: var(--link-weight);
      text-decoration-line: var(--link-decoration);
      text-decoration-thickness: var(--link-decoration-thickness);
      cursor: var(--cursor-link);
      transition: opacity 0.15s ease-in-out;
    }
    .ji-tag {
      padding: 0.25em;
    }
    .ji-tag:last-child {
      border-radius: var(--radius-s);
      border: var(--tag-border-width) solid var(--tag-border-color);
      font-weight: var(--tag-weight);
      padding: 0.25em 0.5em;
      vertical-align: baseline;
      line-height: var(--line-height-tight);
      margin: 0.25em 0.5em;
      background-color: var(--theme-color-jiraIssueStatusBg);
      color: var(--theme-color-jiraIssueStatus);
      text-transform: uppercase;
      font-weight: 700;
    }
    .ji-tag.is-info {
      background-color: var(--theme-color-jiraIssueInfoBg);
      color: var(--text-normal);
    }
    .ji-tag.is-warning {
      background-color: var(--theme-color-jiraIssueWarningBg);
      color: var(--text-normal);
    }
    .ji-tag.is-success {
      background-color: var(--theme-color-jiraIssueSuccessBg);
      color: var(--text-normal);
    }
  }

  .ji-inline-issue.jira-issue-container .ji-tag.ji-band,
  .jira-issue-container .ji-tags .ji-tag.ji-band,
  .jira-issue-container .ji-tags.has-addons .ji-tag.ji-band {
    width: 1em;
    height: 1em;
    margin: 0 0 0 0.5em;
    border-radius: 100%;
    flex-shrink: 0;
    flex-grow: 0;
    padding: 0;
  }
  .jira-issue-container {
    .ji-tags:has(.ji-tag.is-danger) {
      border: solid 1px var(--theme-color-jiraIssueDangerBg);
      .ji-tag.is-danger {
        color: inherit;
        flex-grow: 1;

        &:last-child {
          flex-grow: 0;
          color: var(--theme-color-jiraIssueDanger);
          background-color: var(--color-red);
          border-radius: var(--radius-s);
          border: var(--tag-border-width) solid var(--tag-border-color);
          font-weight: var(--tag-weight);
          padding: 0.25em 0.5em;
          vertical-align: baseline;
          line-height: var(--line-height-tight);
          margin: 0.5em 0.5em 0.5em 0;
        }
      }
      .ji-tag.is-danger.is-delete {
        background-color: var(--theme-color-jiraIssueDeleteBg);
        width: 1em;
        height: 1em;
        margin: 0 0 0 0.5em;
        border-radius: 100%;
        border-top-right-radius: 1em;
        flex-shrink: 0;
        flex-grow: 0;
        padding: 0;
        color: var(--theme-color-jiraIssueDanger);
      }
    }
  }
  .block-language-jira-search {
    background-color: var(--embed-background);
    border-bottom: var(--embed-border-bottom);
    border-inline-start: var(--embed-border-left);
    border-radius: var(--radius-m);
    border-inline-end: var(--embed-border-right);
    border-top: var(--embed-border-top);
    overflow-x: auto;

    .jira-issue-container .table {
      color: inherit;
      background-color: transparent;
    }
    .jira-issue-container .table td {
      border-top: none;
      border-bottom: none;
      font-size: small;
      padding: 0.5em;
      border-color: var(--table-border-color);

      &:first-child {
        border-inline-start: none;
      }

      &:last-child {
        border-inline-end: none;
      }
    }
    .jira-issue-container .table th {
      background: transparent;
      border-top: none;
      border-bottom: none;
      padding: 0.5em;
      color: var(--text-normal);
      border-color: var(--table-border-color);

      &:first-child {
        border-inline-start: none;
      }

      &:last-child {
        border-inline-end: none;
      }
    }
    .jira-issue-container
      .table.is-striped
      tbody
      tr:not(.is-selected):nth-child(odd),
    .jira-issue-container
      .table.is-striped
      tbody
      tr:not(.is-selected):nth-child(odd):hover {
      background-color: var(--theme-color-jiraIssueTableStripe);
    }
    .jira-issue-container
      .table.is-striped
      tbody
      tr:not(.is-selected):nth-child(even),
    .jira-issue-container
      .table.is-striped
      tbody
      tr:not(.is-selected):nth-child(even):hover {
      background-color: transparent;
    }
    .jira-issue-container .search-footer {
      margin-top: 0.5em;
      padding: 0 0.5em 0 1em;
      font-size: small;
      align-items: center;

      > div {
        display: flex;
        align-items: center;
        gap: 1em;
      }
    }
  }
  .block-language-jira-count {
    .jira-issue-container .ji-tags {
      width: auto;
      padding-inline-end: 0.5em;

      .ji-tag,
      .ji-tag.is-link {
        text-decoration: none;
        color: var(--text-normal);
        cursor: default;
        background-color: transparent;

        &:last-child {
          font-weight: bold;
        }
      }
    }
  }
}
/* #endregion */
/* #region   Community Plugin: Kanban */
body.theme-setting-overrideKanban {
  .kanban-plugin {
    gap: 0.5rem;
    background: var(--theme-gradient-cardSetGenerated);
  }
  .kanban-plugin__lane {
    background-color: var(--theme-color-kanbanLaneBg);
    border: none;
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-s);
  }
  .kanban-plugin__lane-header-wrapper {
    border-bottom: none;
    gap: 0.5em;
    padding: 0.5em;
  }
  .kanban-plugin__lane-grip {
    margin-inline-end: 0;
    color: var(--theme-color-control);
  }
  .kanban-plugin__lane-setting-wrapper > div {
    padding: 0.5em 1em;
  }
  .kanban-plugin__lane-setting-wrapper > div:last-child {
    border: none;
    margin-bottom: 0;
  }
  .kanban-plugin__grow-wrap > textarea {
    /* Style as regular text field */
    background: var(--background-input);
    border-radius: var(--input-radius);
    border: none;
    box-shadow: 0 0 0 var(--input-border-width) var(--theme-color-base);
    font-size: var(--font-ui-small);
    line-height: normal;
    padding: var(--size-4-1) var(--size-4-2);
  }
  .kanban-plugin__grow-wrap > textarea:focus {
    box-shadow: 0 0 0 var(--input-border-width) var(--theme-color-base);
  }
  .kanban-plugin__item-button-wrapper {
    border-top: none;
  }
  .kanban-plugin__lane-items {
    gap: 0.5em;
    margin: 0;
    padding: 0.5em 0.5em 0 0.5em;
  }
  .kanban-plugin__lane-items > .kanban-plugin__item-wrapper {
    margin: 0;
  }
  .kanban-plugin__item {
    border: none;
    box-shadow: var(--shadow-s);

    &.is-search-hit {
      box-shadow: inherit;
    }
  }
  .kanban-plugin__item:has(.markdown-source-view) {
    border: var(--input-border-width) solid
      var(--background-modifier-border-focus);
    background-color: var(--background-input);

    .kanban-plugin__item-content-wrapper {
      background: transparent;
    }
    .kanban-plugin__item-title-wrapper {
      background: transparent;
    }
    .kanban-plugin__item-postfix-button {
      /* Style as search input clear button */
      border-radius: 100%;
      background-color: var(--search-clear-button-color);
      color: var(--background-secondary);
      cursor: var(--cursor);
      line-height: 0;
      height: var(--search-clear-button-size);
      width: var(--search-clear-button-size);
      min-height: var(--search-clear-button-size);
      min-width: var(--search-clear-button-size);
      margin: auto;
      padding: 0 0;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: color 0.15s ease-in-out;

      .kanban-plugin__icon svg {
        height: calc(0.8 * var(--search-clear-button-size));
        width: calc(0.8 * var(--search-clear-button-size));
        display: block;
        color: inherit;
      }
    }
    @media (hover: hover) {
      .kanban-plugin__item-postfix-button:hover {
        background-color: var(--text-normal);
        transition: color 0.15s ease-in-out;
      }
    }
  }
  .kanban-plugin__drag-container
    > .kanban-plugin__item-wrapper
    .kanban-plugin__item {
    border-color: none;
    box-shadow: var(--theme-shadow-draggingItem);
  }
  .kanban-plugin__item-title-wrapper:not(:only-child) {
    border-bottom: none;
  }
  .kanban-plugin__item-form {
    border: none;
  }
  .kanban-plugin__item-form .kanban-plugin__item-input-wrapper {
    padding: var(--input-border-width);
    border: none;
    background-color: transparent;
    border-radius: 0;
    min-height: var(--input-height);
  }

  /* Autocomplete menu when [[ is entered */
  .kanban-plugin__autocomplete {
    font-size: inherit;
    min-width: 20ch;
    max-width: 40ch;
    max-height: 12rem;
  }

  .kanban-plugin__lane-form-wrapper {
    background: var(--theme-color-controlSetBg);
    border: none;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    gap: 1rem;
    box-shadow: var(--shadow-s);
    border-radius: var(--radius-m);
    top: 0.5em;
    right: 0.5em;
    width: auto;

    .kanban-plugin__lane-input-wrapper {
      padding: 0;
    }

    .kanban-plugin__checkbox-wrapper {
      border: none;
      margin: 0;
      padding: 0;
    }

    .kanban-plugin__lane-input-actions {
      padding: 0;
      justify-content: flex-end;
    }
  }
  .kanban-plugin__draggable-setting-container>.kanban-plugin__placeholder,
  .kanban-plugin__setting-item-wrapper {
    border: none;
  }
  .kanban-plugin__setting-item {
    background: none;
    padding: 1em 0 0 0;
  }
}
/*   #endregion */
/* #region   Community Plugin: Map View */
body.theme-setting-overrideMapView {
  .mod-sidedock .leaf-content[data-type="map"] {
    margin: 0.5rem 0;
  }
  .view-header {
    border-bottom: none;
  }
  .map-view-main {
    overflow: hidden;
    border-radius: var(--tab-radius);
    background-color: var(--theme-color-graphViewBg);
  }
  .map-view-main:before,
  .map-view-main:after {
    /* Match graph view */
    background: transparent;
    box-shadow: var(--theme-shadow-indent);
    content: "";
    display: block;
    height: 1rem;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 120%;
    z-index: 2;
  }
  .map-view-main:before {
    top: -1rem;
  }
  .map-view-main:after {
    bottom: -1rem;
  }
  .map-view-graph-controls {
    background: var(--theme-color-controlSetBg);
    border: none;
    padding: 0.25rem;
    gap: 0;
    box-shadow: var(--theme-shadow-input);
    border-radius: var(--radius-m);
    top: var(--theme-length-controlSetSpacing);
    left: var(--theme-length-controlSetSpacing);
    min-width: 7em;

    .graph-control-div {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: flex-start;
      padding: 0;

      .collapsible {
        padding: 0;

        label {
          padding-inline-start: 0.5em;
        }
      }
    }

    & select,
    & button {
      flex-basis: calc(50% - 0.325em);
      flex-shrink: 1;
      flex-grow: 0;
    }
    .graph-control-follow-div {
      display: flex;
      gap: 0.5em;
      align-content: baseline;
      justify-content: flex-start;
      padding: 0;
      flex-wrap: wrap;
    }
    .graph-control-follow-label {
      margin: 0.1875em 0 0 0;
    }

    .graph-control-content {
      width: 100%;
      flex-shrink: 0;
      padding: 0.5em 0;
      margin: 0;
      gap: 0.25em;
      overflow: visible;
    }
    /* Presets section */
    .graph-control-div:last-child .graph-control-content {
      /* Presets dropdown */
      & .dropdown.mv-map-control:first-child {
        flex-shrink: 0;
        flex-basis: 100%;
      }
    }
    .top-right-controls.svelte-1sl5jax {
      padding: 0;
      top: 0.25em;
      right: 0.25em;
    }
  }
  .map-view-graph-controls.minimized {
    min-width: 0;
  }
  .map-view-graph-controls.svelte-1sl5jax:not(.minimized):has(.top-right-controls:where(.svelte-1sl5jax)) {
    /* Override styles that I think are inserted by Map View. Weird thing for a plugin to do. */
    padding: 0.25rem;
  }
  .map-view-main {
    .marker-cluster-small,
    .marker-cluster-small div {
      background-color: var(--theme-color-greenTransparent25);
    }
    .marker-cluster-medium,
    .marker-cluster-medium div {
      background-color: var(--theme-color-yellowTransparent25);
    }
    .marker-cluster-large,
    .marker-cluster-large div {
      background-color: var(--theme-color-orangeTransparent25);
    }
  }

  .map-view-graph-controls .lbl-triangle {
    border-top-left-radius: var(--radius-s);
    border-bottom-left-radius: var(--radius-s);
    font-size: var(--nav-item-size);
    font-weight: var(--font-medium);
    gap: 0.5em;
    margin: 0;
    padding: 0.25em 1.5em 0.25em 0.5em;
    line-height: var(--theme-lineHeight-tight);
    width: 1em;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    transition: none;
    position: relative;
    color: transparent;
    top: 0;
  }
  .map-view-graph-controls .lbl-triangle:before {
    position: absolute;
    top: 50%;
    left: 0.5em;
    content: "";
    background-color: var(--theme-color-control);
    display: block;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8L12 17L21 8"></path></svg>');
    transition: transform 100ms ease-in-out;
    transform: rotate(-90deg);
  }
  .map-view-graph-controls .controls-toggle:checked + .lbl-triangle {
    transform: none;
  }
  .map-view-graph-controls .controls-toggle:checked + .lbl-triangle:before {
    transform: rotate(0deg);
  }
  .map-view-graph-controls .lbl-toggle {
    border-top-right-radius: var(--radius-s);
    border-bottom-right-radius: var(--radius-s);
    color: var(--text-faint);
    font-size: var(--nav-item-size);
    font-weight: var(--font-medium);
    gap: 0.5em;
    margin: 0;
    padding: 0.25em 0.5em 0.25em 0;
    line-height: var(--theme-lineHeight-tight);
    display: flex;
    width: auto;
    flex-grow: 1;
    flex-shrink: 1;
    transition: none;
  }
  @media (hover: hover) {
    .map-view-graph-controls .lbl-triangle:hover,
    .map-view-graph-controls
      .graph-control-div:has(.lbl-toggle:hover)
      .lbl-triangle {
      background-color: var(--nav-item-background-hover);
      color: transparent;
    }
    .map-view-graph-controls .lbl-triangle:hover:before,
    .map-view-graph-controls
      .graph-control-div:has(.lbl-toggle:hover)
      .lbl-triangle:before {
      background-color: var(--theme-color-controlHover);
    }
    .map-view-graph-controls .lbl-toggle:hover,
    .map-view-graph-controls
      .graph-control-div:has(.lbl-triangle:hover)
      .lbl-toggle {
      color: var(--nav-item-color-hover);
      background-color: var(--nav-item-background-hover);
      font-weight: var(--font-medium);
    }
  }
  .map-view-graph-controls
    .controls-toggle:checked
    + .lbl-triangle
    + .lbl-toggle
    + .graph-control-content {
    display: flex;
    flex-wrap: wrap;
  }
  .map-view-graph-controls #search-container {
    width: 100%;
    padding: var(--input-border-width);

    &:before {
      top: calc(
        (var(--input-height) - var(--search-icon-size)) / 2 +
          var(--input-border-width)
      );
    }
  }
  .map-view-main {
    .leaflet-control-container {
      .leaflet-top {
        top: var(--theme-length-controlSetSpacing);
      }
      .leaflet-right {
        right: var(--theme-length-controlSetSpacing);
      }
      .leaflet-bottom {
        bottom: var(--theme-length-controlSetSpacing);
      }
      .leaflet-left {
        left: var(--theme-length-controlSetSpacing);
      }
    }
  }
  .map-view-main .leaflet-control-container .leaflet-top.leaflet-right {
    background: var(--theme-color-controlSetBg);
    border: none;
    padding: 0.25rem;
    gap: 0;
    box-shadow: var(--theme-shadow-input);
    border-radius: var(--radius-m);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    & .leaflet-control {
      border: none;
      margin: 0;
    }

    & .leaflet-control-zoom {
      padding: 0;
    }

    & a {
      align-items: center;
      background-color: transparent;
      border-radius: var(--clickable-icon-radius);
      border: none;
      box-shadow: none;
      color: var(--theme-color-control);
      cursor: var(--cursor);
      display: flex;
      height: 2em;
      justify-content: center;
      min-height: var(--input-height);
      opacity: var(--icon-opacity);
      padding: 0.25rem;
      text-decoration: none;
      transition: opacity 0.15s ease-in-out;
      width: 2em;
      font-size: 1rem;

      &.on {
        opacity: var(--icon-opacity-hover);
        color: var(--theme-color-controlLightweightActive);
        background-color: var(--theme-color-interactiveActive);
      }
    }
    @media (hover: hover) {
      & a:hover {
        color: var(--theme-color-controlHover);
        background-color: var(--background-modifier-hover);
      }
    }
  }
  .leaflet-touch .leaflet-bar a:first-child,
  .leaflet-touch .leaflet-bar a:last-child {
    border-radius: var(--clickable-icon-radius);
  }
  /* Map view preset save-as modal */
  .modal-content:has(.newPresetDialogGrid) {
    padding: 1rem 1rem 1rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5em;

    .newPresetDialogLine:last-child {
      display: flex;
      justify-content: flex-end;

      > button {
        margin-inline-start: 0.5rem;
      }
    }
  }
}
/* #endregion */
/* #region   Community Plugin: Recent Files */
body.theme-setting-overrideRecentFiles {
  .recent-files-title {
    align-items: center;
    padding-inline-end: 0.375em;
  }
}
/*   #endregion */
/* #region   Community Plugin: Style Settings */
body.theme-setting-overrideStyleSettings {
  /* Settings modal */
  .style-settings-heading {
    border-bottom: none;
    margin-top: 1.5em;
  }
  .style-settings-heading[data-level="0"] {
    margin-bottom: 0;
  }
  .setting-item + div > .style-settings-heading[data-level="0"],
  .setting-item + .style-settings-heading[data-level="0"] {
    margin-top: 1.5em;
  }

  /* Import/export modals */
  .modal-style-settings {
    /* Show shadow below buttons */
    overflow: visible;

    & .modal-content {
      padding: 1em 1em 1em 1em;
      margin-bottom: 0;
    }
    & .setting-item {
      margin-bottom: 1em;
      align-items: baseline;
    }
    & .setting-item:first-child {
      margin-inline-start: 1.5em;
    }
    & textarea {
      margin-top: var(--input-border-width);
      margin-bottom: var(--input-border-width);
    }
  }

  .setting-item-heading {
    padding: 0 0.5em;

    .style-settings-collapse-indicator,
    .setting-item-name,
    .extra-setting-button {
      color: inherit;
    }
  }
  .style-settings-collapse-indicator > svg {
    width: 0.75rem;
    height: 0.75rem;
    margin-inline-start: 0.5rem;
  }
  .style-settings-heading[data-level="0"] + .style-settings-container,
  .style-settings-heading[data-level="1"] + .style-settings-container,
  .style-settings-heading[data-level="2"] + .style-settings-container,
  .style-settings-heading[data-level="3"] + .style-settings-container,
  .style-settings-heading[data-level="4"] + .style-settings-container,
  .style-settings-heading[data-level="5"] + .style-settings-container,
  .style-settings-heading[data-level="6"] + .style-settings-container {
    padding-inline-start: calc(0.5em + 10px + 0.5em);
  }
  .style-settings-heading[data-level="0"]
    + .style-settings-container
    .style-settings-collapse-indicator {
    margin-inline-start: 0;
  }

  &.theme-setting-enableIconsInSettings {
    .setting-item.setting-item-heading.style-settings-heading[data-id="kakano-style"]
      + .style-settings-container {
      .setting-item.setting-item-heading.style-settings-heading
        .style-settings-collapse-indicator:after {
        margin-inline-start: 0.5em;
        vertical-align: top;
        display: inline-block;
        width: 1rem;
        height: 1rem;
        margin: 0.125em 0 0 0.5em;
        opacity: 75%;
      }

      .setting-item.setting-item-heading.style-settings-heading[data-id="heading-baseColor"]
        .style-settings-collapse-indicator:after {
        filter: hue-rotate(0deg);
        content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><g><rect x='0' y='0' width='1' height='24' style='fill:rgb(255,0,0);'/><rect x='4' y='0' width='1' height='24' style='fill:rgb(255,255,0);'/><rect x='8' y='0' width='1' height='24' style='fill:rgb(0,255,0);'/><rect x='12' y='0' width='1' height='24' style='fill:rgb(0,255,255);'/><rect x='16' y='0' width='1' height='24' style='fill:rgb(0,0,255);'/><rect x='20' y='0' width='1' height='24' style='fill:rgb(255,0,255);'/><rect x='2' y='0' width='1' height='24' style='fill:rgb(255,127,0);'/><rect x='6' y='0' width='1' height='24' style='fill:rgb(127,255,0);'/><rect x='10' y='0' width='1' height='24' style='fill:rgb(0,255,127);'/><rect x='14' y='0' width='1' height='24' style='fill:rgb(0,127,255);'/><rect x='18' y='0' width='1' height='24' style='fill:rgb(127,0,255);'/><rect x='22' y='0' width='1' height='24' style='fill:rgb(255,0,127);'/><rect x='1' y='0' width='1' height='24' style='fill:rgb(255,63,0);'/><rect x='5' y='0' width='1' height='24' style='fill:rgb(191,255,0);'/><rect x='9' y='0' width='1' height='24' style='fill:rgb(0,255,63);'/><rect x='13' y='0' width='1' height='24' style='fill:rgb(0,191,255);'/><rect x='17' y='0' width='1' height='24' style='fill:rgb(63,0,255);'/><rect x='21' y='0' width='1' height='24' style='fill:rgb(255,0,191);'/><rect x='3' y='0' width='1' height='24' style='fill:rgb(255,191,0);'/><rect x='7' y='0' width='1' height='24' style='fill:rgb(63,255,0);'/><rect x='11' y='0' width='1' height='24' style='fill:rgb(0,255,191);'/><rect x='15' y='0' width='1' height='24' style='fill:rgb(0,63,255);'/><rect x='19' y='0' width='1' height='24' style='fill:rgb(191,0,255);'/><rect x='23' y='0' width='1' height='24' style='fill:rgb(255,0,63);'/></g></svg>");
        opacity: 100%;
      }
    }
  }
}
body.theme-setting-overrideStyleSettings.theme-setting-enableIconsInSettings.theme-light {
  .setting-item.setting-item-heading.style-settings-heading
    .style-settings-collapse-indicator:after {
    filter: hue-rotate(calc(var(--base-h) * 1deg));
  }
  /* .setting-item.setting-item-heading.style-settings-heading[data-id="kakano-style"] .style-settings-collapse-indicator:after {
    content: "TODO: logo goes here";
  } */
  .setting-item.setting-item-heading.style-settings-heading[data-id="kakano-style"]
    + .style-settings-container {
    .setting-item.setting-item-heading.style-settings-heading[data-id="heading-ui-background"]
      .style-settings-collapse-indicator:after {
      content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'><g transform='matrix(1,0,0,0.981029,0.249756,0.225573)'><path d='M23.21,0.789L23.21,23.215L0.765,23.215L0.765,0.789L23.21,0.789ZM22.19,5.886L11.988,5.886L11.988,2.828L3.826,2.828L3.826,5.886L1.786,5.886L1.786,21.176L22.19,21.176L22.19,5.886Z' style='fill:hsl(0deg,75%,5%);stroke:hsl(0deg,75%,5%);stroke-width:2.04px;'/></g></svg>");
    }
    .setting-item.setting-item-heading.style-settings-heading[data-id="heading-notes-appearance"]
      .style-settings-collapse-indicator:after {
      content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'><g transform='matrix(1,0,0,1,-1,-2)'><g transform='matrix(0.913043,0,0,0.913043,1.04348,-5.63549)'><path d='M22.952,12.744L22.952,29.172L1.048,29.172L1.048,12.744L3.238,12.744L3.238,9.458L12,9.458L12,12.744L22.952,12.744Z' style='fill:none;stroke:hsl(0deg,75%,5%);stroke-width:2.19px;'/></g></g></svg>");
    }

    .setting-item.setting-item-heading.style-settings-heading[data-id="heading-typographySettings"]
      .style-settings-collapse-indicator:after {
      content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='stroke:hsl(0deg,75%,5%);fill:hsl(0deg,75%,5%);fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><path d='M8.39,13.544L6.734,5.84L6.686,5.84L5.03,13.544L8.39,13.544ZM8.846,2.864L13.382,20L9.782,20L8.99,16.376L4.43,16.376L3.638,20L0.038,20L4.574,2.864L8.846,2.864Z' style='fill-rule:nonzero;'/><path d='M19.886,13.544L19.886,16.088C19.886,16.44 19.822,16.744 19.694,17C19.566,17.256 19.402,17.464 19.202,17.624C19.002,17.784 18.782,17.9 18.542,17.972C18.302,18.044 18.07,18.08 17.846,18.08C17.398,18.08 17.078,17.904 16.886,17.552C16.694,17.2 16.598,16.776 16.598,16.28C16.598,15.704 16.742,15.248 17.03,14.912C17.318,14.576 17.798,14.336 18.47,14.192C18.678,14.144 18.91,14.068 19.166,13.964C19.422,13.86 19.662,13.72 19.886,13.544ZM13.838,11.048L16.814,11.048L16.814,10.688C16.814,10.176 16.942,9.768 17.198,9.464C17.454,9.16 17.838,9.008 18.35,9.008C18.91,9.008 19.306,9.148 19.538,9.428C19.77,9.708 19.886,10.096 19.886,10.592C19.886,11.024 19.79,11.352 19.598,11.576C19.406,11.8 19.062,11.976 18.566,12.104L16.694,12.608C16.118,12.768 15.626,12.952 15.218,13.16C14.81,13.368 14.474,13.628 14.21,13.94C13.946,14.252 13.75,14.628 13.622,15.068C13.494,15.508 13.43,16.032 13.43,16.64C13.43,17.072 13.486,17.508 13.598,17.948C13.71,18.388 13.886,18.784 14.126,19.136C14.366,19.488 14.686,19.764 15.086,19.964C15.486,20.164 15.974,20.264 16.55,20.264C17.35,20.264 18.002,20.164 18.506,19.964C19.01,19.764 19.454,19.328 19.838,18.656L19.886,18.656C19.934,18.88 19.986,19.108 20.042,19.34C20.098,19.572 20.182,19.792 20.294,20L23.462,20C23.302,19.616 23.194,19.256 23.138,18.92C23.082,18.584 23.054,18.112 23.054,17.504L23.054,10.712C23.054,10.136 22.994,9.604 22.874,9.116C22.754,8.628 22.526,8.208 22.19,7.856C21.854,7.504 21.382,7.232 20.774,7.04C20.166,6.848 19.366,6.752 18.374,6.752C17.75,6.752 17.162,6.82 16.61,6.956C16.058,7.092 15.578,7.316 15.17,7.628C14.762,7.94 14.438,8.348 14.198,8.852C13.958,9.356 13.838,9.984 13.838,10.736L13.838,11.048Z' style='fill-rule:nonzero;'/></svg>");
    }
    .setting-item.setting-item-heading.style-settings-heading[data-id="heading-editing"]
      .style-settings-collapse-indicator:after {
      content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;'><path d='M12,20L21,20' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,75%,5%);stroke-width:2px;'/><path d='M16.5,3.5C16.898,3.102 17.438,2.879 18,2.879C19.164,2.879 20.121,3.836 20.121,5C20.121,5.562 19.898,6.102 19.5,6.5L7,19L3,20L4,16L16.5,3.5Z' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,75%,5%);stroke-width:2px;'/></svg>");
    }
    .setting-item.setting-item-heading.style-settings-heading[data-id="heading-mobile"]
      .style-settings-collapse-indicator:after {
      content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;'><path d='M13,10L13,20C13,21.104 12.104,22 11,22L5,22C3.896,22 3,21.104 3,20L3,10C3,8.896 3.896,8 5,8L11,8C12.104,8 13,8.896 13,10Z' style='fill:none;stroke:hsl(0deg,75%,5%);stroke-width:2px;'/><path d='M5,4C5,2.903 5.903,2 7,2L19,2C20.097,2 21,2.903 21,4L21,20C21,21.097 20.097,22 19,22L16.6,22' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,75%,5%);stroke-width:2px;'/><path d='M8,18L8.01,18' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,75%,5%);stroke-width:2px;'/></svg>");
    }
  }
}
body.theme-setting-overrideStyleSettings.theme-setting-enableIconsInSettings.theme-dark {
  .setting-item.setting-item-heading.style-settings-heading
    .style-settings-collapse-indicator:after {
    filter: hue-rotate(calc(var(--base-h) * 1deg));
  }
  .setting-item.setting-item-heading.style-settings-heading[data-id="kakano-style"]
    + .style-settings-container {
    .setting-item.setting-item-heading.style-settings-heading[data-id="heading-background"]
      .style-settings-collapse-indicator:after {
      content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'><g transform='matrix(1,0,0,0.981029,0.249756,0.225573)'><path d='M23.21,0.789L23.21,23.215L0.765,23.215L0.765,0.789L23.21,0.789ZM22.19,5.886L11.988,5.886L11.988,2.828L3.826,2.828L3.826,5.886L1.786,5.886L1.786,21.176L22.19,21.176L22.19,5.886Z' style='fill:hsl(0deg,86%,81%);stroke:hsl(0deg,86%,81%);stroke-width:2.04px;'/></g></svg>");
    }
    .setting-item.setting-item-heading.style-settings-heading[data-id="heading-notes"]
      .style-settings-collapse-indicator:after {
      content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'><g transform='matrix(1,0,0,1,-1,-2)'><g transform='matrix(0.913043,0,0,0.913043,1.04348,-5.63549)'><path d='M22.952,12.744L22.952,29.172L1.048,29.172L1.048,12.744L3.238,12.744L3.238,9.458L12,9.458L12,12.744L22.952,12.744Z' style='fill:none;stroke:hsl(0deg,86%,81%);stroke-width:2.19px;'/></g></g></svg>");
    }

    .setting-item.setting-item-heading.style-settings-heading[data-id="heading-typographySettings"]
      .style-settings-collapse-indicator:after {
      content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='stroke:hsl(0deg,86%,81%);fill:hsl(0deg,86%,81%);fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><path d='M8.39,13.544L6.734,5.84L6.686,5.84L5.03,13.544L8.39,13.544ZM8.846,2.864L13.382,20L9.782,20L8.99,16.376L4.43,16.376L3.638,20L0.038,20L4.574,2.864L8.846,2.864Z' style='fill-rule:nonzero;'/><path d='M19.886,13.544L19.886,16.088C19.886,16.44 19.822,16.744 19.694,17C19.566,17.256 19.402,17.464 19.202,17.624C19.002,17.784 18.782,17.9 18.542,17.972C18.302,18.044 18.07,18.08 17.846,18.08C17.398,18.08 17.078,17.904 16.886,17.552C16.694,17.2 16.598,16.776 16.598,16.28C16.598,15.704 16.742,15.248 17.03,14.912C17.318,14.576 17.798,14.336 18.47,14.192C18.678,14.144 18.91,14.068 19.166,13.964C19.422,13.86 19.662,13.72 19.886,13.544ZM13.838,11.048L16.814,11.048L16.814,10.688C16.814,10.176 16.942,9.768 17.198,9.464C17.454,9.16 17.838,9.008 18.35,9.008C18.91,9.008 19.306,9.148 19.538,9.428C19.77,9.708 19.886,10.096 19.886,10.592C19.886,11.024 19.79,11.352 19.598,11.576C19.406,11.8 19.062,11.976 18.566,12.104L16.694,12.608C16.118,12.768 15.626,12.952 15.218,13.16C14.81,13.368 14.474,13.628 14.21,13.94C13.946,14.252 13.75,14.628 13.622,15.068C13.494,15.508 13.43,16.032 13.43,16.64C13.43,17.072 13.486,17.508 13.598,17.948C13.71,18.388 13.886,18.784 14.126,19.136C14.366,19.488 14.686,19.764 15.086,19.964C15.486,20.164 15.974,20.264 16.55,20.264C17.35,20.264 18.002,20.164 18.506,19.964C19.01,19.764 19.454,19.328 19.838,18.656L19.886,18.656C19.934,18.88 19.986,19.108 20.042,19.34C20.098,19.572 20.182,19.792 20.294,20L23.462,20C23.302,19.616 23.194,19.256 23.138,18.92C23.082,18.584 23.054,18.112 23.054,17.504L23.054,10.712C23.054,10.136 22.994,9.604 22.874,9.116C22.754,8.628 22.526,8.208 22.19,7.856C21.854,7.504 21.382,7.232 20.774,7.04C20.166,6.848 19.366,6.752 18.374,6.752C17.75,6.752 17.162,6.82 16.61,6.956C16.058,7.092 15.578,7.316 15.17,7.628C14.762,7.94 14.438,8.348 14.198,8.852C13.958,9.356 13.838,9.984 13.838,10.736L13.838,11.048Z' style='fill-rule:nonzero;'/></svg>");
    }
    .setting-item.setting-item-heading.style-settings-heading[data-id="heading-editing"]
      .style-settings-collapse-indicator:after {
      content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;'><path d='M12,20L21,20' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,86%,81%);stroke-width:2px;'/><path d='M16.5,3.5C16.898,3.102 17.438,2.879 18,2.879C19.164,2.879 20.121,3.836 20.121,5C20.121,5.562 19.898,6.102 19.5,6.5L7,19L3,20L4,16L16.5,3.5Z' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,86%,81%);stroke-width:2px;'/></svg>");
    }
    .setting-item.setting-item-heading.style-settings-heading[data-id="heading-mobile"]
      .style-settings-collapse-indicator:after {
      content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;'><path d='M13,10L13,20C13,21.104 12.104,22 11,22L5,22C3.896,22 3,21.104 3,20L3,10C3,8.896 3.896,8 5,8L11,8C12.104,8 13,8.896 13,10Z' style='fill:none;stroke:hsl(0deg,86%,81%);stroke-width:2px;'/><path d='M5,4C5,2.903 5.903,2 7,2L19,2C20.097,2 21,2.903 21,4L21,20C21,21.097 20.097,22 19,22L16.6,22' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,86%,81%);stroke-width:2px;'/><path d='M8,18L8.01,18' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,86%,81%);stroke-width:2px;'/></svg>");
    }
  }
}
/*   #endregion */
/* #region   Community Plugin: Tasks */
body.theme-setting-overrideTasks {
  .block-language-tasks {
    background-color: var(--embed-background);
    border-bottom: var(--embed-border-bottom);
    border-inline-start: var(--embed-border-left);
    border-radius: var(--radius-m);
    border-inline-end: var(--embed-border-right);
    border-top: var(--embed-border-top);
    margin: 0;
    padding: 0.5em;
  }
  .tasks-edit {
    display: inline-flex;
  }
  .tasks-modal form {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
  }
  .tasks-modal-section + .tasks-modal-section {
    margin: 0;
  }
  .tasks-modal-priorities {
    row-gap: 1em;
    column-gap: 0.5em;
  }
  .tasks-modal-dates {
    row-gap: 0.5em;
    column-gap: 0.5em;
  }
  .tasks-modal-priorities label {
    grid-row-end: 3;
    margin: 0;
    padding: 0 0.25em;
  }
}
/*   #endregion */
/* #region   Community Plugin: Plugin Update Tracker */

body.theme-setting-overridePluginUpdateTracker {
  .plugin-update-tracker-icon {
    background-color: var(--theme-color-baseTransparent25);
    border-radius: 9999px;
    padding: 0.25rem;

    .plugin-update-tracker-icon-chip {
      color: var(--flair-color);
      font-size: var(--font-ui-smaller);
      letter-spacing: 0.05em;
      margin-inline-start: 0.25em;
      line-height: 1;
      padding: 0.375em 0.75em;
      text-transform: uppercase;
      width: 1rem;
      height: 1rem;
      border-radius: 9999px;
    }
    &.plugin-update-tracker-icon--updates-available .plugin-update-tracker-icon-chip {
      background-color: var(--theme-color-orangeDarkened);
    }
    &.plugin-update-tracker-icon--no-updates-available .plugin-update-tracker-icon-chip {
      background-color: var(--theme-color-greenDarkened);
    }
  }
}
/* #endregion */
/* #region Dev stuff */

/* Show border of content area clearly */
/* .cm-contentContainer > .cm-content {
  background-color: rgba(255, 0, 0, 0.1);
} */

/* #endregion */