body {
  --flexcyon-style-settings-indent-width: 4px;
}

/* @settings
name: Flexcyon Style Settings 
id: flexcyon
settings:
  - 
    title: About 
    type: info-text
    markdown: true
    description: Flexcyon is a theme based around the Halcyon, Flexoki and Origami themes. You can find its [source code here](https://github.com/bladeacer/flexcyon). There are some **legacy style settings** options kept for backwards compatibility, but if given the choice an option's new equivalent should be preferred.<br><br>It aims to be *reasonably opinionated and highly customisable*. If you are interested, feel free to learn more about the theme via the ==README and the documentation==. When it comes to customising this theme, installing and using the Settings Search plugin is highly recommended.
  -
    title: Documentation 
    type: info-text
    markdown: true
    description: For more information, check out the [documentation here](https://flexcyon.github.io/docs-en/). <br><br> 如果您更熟悉中文, 请 [单击此处](https://flexcyon.github.io/docs-en/zh/) 查看中文文档。<br><br>For your own sanity when it comes to searching for settings, the Settings Search plugin is highly recommended.<br><br> <h5>A caveat of Style Settings is that it sometimes does not properly unload CSS classes. Hence, you would need to reload or restart your app for certain customisations to take effect. I am working to improve this.</h5><h4>Settings you would need to do this for include the status bar, workspace layouts, animations (and a few others)</h4>
  -
    title: Modes
    type: heading
    level: 4
    collapsed: true
    description: Some unique modes flexcyon has to offer. You are also able to configure accessibility settings here.
  - title: Return to Zero mode
    type: class-toggle
    description: Extreme minimalism inspired by Shimmering Focus theme. Will override some Style Settings options. Will not work with Flex Max mode enabled.
    id: flexcyon-rtz-mode
    default: false
  - title: Flex Max mode
    type: class-toggle
    description: An extremely opinionated set up which showcases the unique customisation in this theme, with features working out of the box. If some options are not too your taste you can disable this mode and customise the theme more yourself, it will reset the theme to a clean slate customisations wise. There are also other default options enabled which you may or may not like. Refer to the documentation for the list of options it enables on your behalf.
    id: flexcyon-flex-max-mode
    default: true
  - title: Enable Writing mode globally
    type: class-toggle
    description: Like the corresponding callout metadata option but applied globally instead
    id: flexcyon-editor-writing
    default: false
  - title: Writing mode indentation
    type: variable-number
    id: flexcyon-editor-writing-indentation
    default: 16
    format: px
  - title: Accessibility
    type: heading
    description: Toggle accessibility options
    level: 5
    collapsed: true
  - title: Global brightness ratio
    type: variable-number
    id: flexcyon-brightness-ratio
    default: 1
  - title: Global contrast ratio
    type: variable-number
    id: flexcyon-contrast-ratio
    default: 1
  - title: Global saturation ratio
    type: variable-number
    id: flexcyon-saturation-ratio
    default: 1
  -
    title: Editor
    type: heading
    level: 4
    collapsed: true
    description: Editor related style settings
  
  - title: Accent Colors
    type: heading
    level: 5
    collapsed: true
    description: Configure the accent and other colours of this theme. You would need to click on the restore default button to properly preview most colours.
  - id: flexcyon-cyan
    title: Cyan Color
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#3b9ba1"
    default-dark: "#3cb9c2"
    alt-format:
      -
        id: color-cyan-rgb
        format: rgb
  - id: flexcyon-lime-green
    title: Green Color
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#689523"
    default-dark: "#a1c05c"
    alt-format:
      -
        id: color-green-rgb
        format: rgb
  - id: flexcyon-orange
    title: Orange Color
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#ed8126"
    default-dark: "#cc8449"
    alt-format:
      -
        id: color-orange-rgb
        format: rgb
  - id: flexcyon-yellow
    title: Yellow Color
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#e8c62a"
    default-dark: "#c29e42"
    alt-format:
      -
        id: color-yellow-rgb
        format: rgb
  - id: flexcyon-purple-lilac
    title: Purple Color
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#6f49ae"
    default-dark: "#a461c8"
    alt-format:
      -
        id: color-purple-rgb
        format: rgb
  - id: flexcyon-red-salmon
    title: Red Color
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#eb5325"
    default-dark: "#c03a47"
    alt-format:
      -
        id: color-red-rgb
        format: rgb
  - id: flexcyon-blue
    title: Blue Color
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "5c9fe4"
    default-dark: "#5a8fcd"
    alt-format:
      -
        id: color-blue-rgb
        format: rgb
  - id: flexcyon-pink
    title: Pink Color
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#e389ca"
    default-dark: "#d458a3"
    alt-format:
      -
        id: color-pink-rgb
        format: rgb
  - id: flexcyon-accent
    title: Accent Color
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#5770b9"
    default-dark: "#92a871"
  - title: Enable Extended Color Palette
    id: flexcyon-ext-colors-enabled
    type: class-toggle
    default: false

  - title: Base Colors
    type: heading
    level: 5
    collapsed: true
    description: Configure the base and other colours of this theme. You would need to click on the restore default button to properly preview most colours.
  - id: flexcyon-base-01
    title: Base Color 01
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#faf7ef"
    default-dark: "#14161c"
  - id: flexcyon-base-02
    title: Base Color 02
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#edebe5"
    default-dark: "#191d28"
  - id: flexcyon-base-03
    title: Base Color 03
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#dddcd6"
    default-dark: "#24262c"
  - id: flexcyon-base-04
    title: Base Color 04
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#d3d3ce"
    default-dark: "#4d566b"
  - id: flexcyon-base-05
    title: Base Color 05
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#b4b3af"
    default-dark: "#6f7685"
  - id: flexcyon-base-grey-dark
    title: Base dark grey
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#797876"
    default-dark: "#898c93"
  - id: flexcyon-base-grey-light
    title: Base light grey
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#080808"
    default-dark: "#d3d5d3"
  - id: flexcyon-base-grey-tab
    title: Base grey tab
    type: variable-color
    opacity: false
    format: hex
    default: "#71777f"
  - id: flexcyon-base-grey-token
    title: Base grey token
    type: variable-color
    opacity: false
    format: hex
    default: "#586582"
  - id: flexcyon-base-grey-scroll
    title: Base grey scroll
    type: variable-color
    opacity: false
    format: hex
    default: "#3f495e"
  - id: flexcyon-base-grey-scroll-hover
    title: Base grey scroll hover
    type: variable-color
    opacity: false
    format: hex
    default: "#5d6782"

  - title: Typography
    type: heading
    level: 5
    collapsed: true
  - id: text-normal
    title: Normal Text color
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: "#080808"
    default-dark: "#d3d5d3"
  - title: Muted text color
    id: flexcyon-text-muted
    type: variable-color
    opacity: true
    format: hex
    default: "#6f768599"
  - title: Default line height
    id: line-height-normal
    type: variable-number
    default: 1.4
  - title: Tight line height
    description: Used in search results, tree items, tooltips, and other smaller spaces. Description from the Obsidian Developer Docs.
    id: line-height-tight
    type: variable-number
    default: 1.25
  - title: Default word spacing
    id: flexcyon-w-spacing
    type: variable-number
    default: 0
    format: px
  - title: Default letter spacing
    id: flexcyon-l-spacing
    type: variable-number
    default: 0
    format: px
  - title: Highlight Text Vertical Padding
    id: flexcyon-highlight-verti-padding
    type: variable-number
    default: 1
    format: px
  - title: Highlight Text Horizontal Padding
    id: flexcyon-highlight-horiz-padding
    type: variable-number
    default: 2.5
    format: px
  - title: Highlight Text Border Radius
    id: flexcyon-highlight-border-radius
    type: variable-number
    default: 4
    format: px
    
  - title: Headings
    type: heading
    level: 5
    collapsed: true

  - id: flexcyon-coloured-headings
    title: Enable coloured headings
    type: class-toggle
    default: true

  - title: Enable soft glow for headings
    id: flexcyon-headings-glow-enabled
    type: class-toggle
    default: false

  - title: Heading 1
    type: heading
    level: 6
    collapsed: true
  - title: Enable heading indicators globally for Heading 1
    id: flexcyon-headings-indicator-h1
    description: If the Obsidian installer version is below 1.9.0, use this option instead.
    type: class-toggle
    default: false
  - title: Heading 1 font size
    id: h1-size
    type: variable-number
    default: 1.81803
    format: em
  - title: Heading 1 font weight
    id: h1-weight
    type: variable-number
    default: 700
  - title: Heading 1 line height
    id: h1-line-height
    type: variable-number
    default: 1.61
  - title: Enable underline for Heading 1
    id: flexcyon-h1-underline-enabled
    type: class-toggle
    default: false
  - title: Heading 1 alignment
    description: Sets the text alignment of Heading 1
    id: flexcyon-heading-1-alignment
    type: variable-select
    default: left
    options: 
      - label: Left
        value: left
      - label: Center
        value: center
      - label: Right
        value: right

  - title: Heading 2
    type: heading
    level: 6
    collapsed: true
  - title: Enable heading indicators globally for Heading 2
    id: flexcyon-headings-indicator-h2
    type: class-toggle
    default: false
  - title: Heading 2 font size
    id: h2-size
    type: variable-number
    default: 1.61803
    format: em
  - title: Heading 2 font weight
    id: h2-weight
    type: variable-number
    default: 675
  - title: Heading 2 line height
    id: h2-line-height
    type: variable-number
    default: 1.51
  - title: Enable underline for Heading 2
    id: flexcyon-h2-underline-enabled
    type: class-toggle
    default: false
  - title: Heading 2 alignment
    description: Sets the text alignment of Heading 2
    id: flexcyon-heading-2-alignment
    type: variable-select
    default: left
    options: 
      - label: Left
        value: left
      - label: Center
        value: center
      - label: Right
        value: right

  - title: Heading 3
    type: heading
    level: 6
    collapsed: true
  - title: Enable heading indicators globally for Heading 3
    id: flexcyon-headings-indicator-h3
    type: class-toggle
    default: false
  - title: Heading 3 font size
    id: h3-size
    type: variable-number
    default: 1.41803
    format: em
  - title: Heading 3 font weight
    id: h3-weight
    type: variable-number
    default: 650
  - title: Heading 3 line height
    id: h3-line-height
    type: variable-number
    default: 1.41
  - title: Enable underline for Heading 3
    id: flexcyon-h3-underline-enabled
    type: class-toggle
    default: false
  - title: Heading 3 alignment
    description: Sets the text alignment of Heading 3
    id: flexcyon-heading-3-alignment
    type: variable-select
    default: left
    options: 
      - label: Left
        value: left
      - label: Center
        value: center
      - label: Right
        value: right

  - title: Heading 4
    type: heading
    level: 6
    collapsed: true
  - title: Enable heading indicators globally for Heading 4
    id: flexcyon-headings-indicator-h4
    type: class-toggle
    default: false
  - title: Heading 4 font size
    id: h4-size
    type: variable-number
    default: 1.21803
    format: em
  - title: Heading 4 font weight
    id: h4-weight
    type: variable-number
    default: 625
  - title: Heading 4 line height
    id: h4-line-height
    type: variable-number
    default: 1.31
  - title: Enable underline for Heading 4
    id: flexcyon-h4-underline-enabled
    type: class-toggle
    default: false
  - title: Heading 4 alignment
    description: Sets the text alignment of Heading 4
    id: flexcyon-heading-4-alignment
    type: variable-select
    default: left
    options: 
      - label: Left
        value: left
      - label: Center
        value: center
      - label: Right
        value: right

  - title: Heading 5
    type: heading
    level: 6
    collapsed: true
  - title: Enable heading indicators globally for Heading 5
    id: flexcyon-headings-indicator-h5
    type: class-toggle
    default: false
  - title: Heading 5 font size
    id: h5-size
    type: variable-number
    default: 1.11803
    format: em
  - title: Heading 5 font weight
    id: h5-weight
    type: variable-number
    default: 600
  - title: Heading 5 line height
    id: h5-line-height
    type: variable-number
    default: 1.21
  - title: Enable underline for Heading 5
    id: flexcyon-h5-underline-enabled
    type: class-toggle
    default: false
  - title: Heading 5 alignment
    description: Sets the text alignment of Heading 5
    id: flexcyon-heading-5-alignment
    type: variable-select
    default: left
    options: 
      - label: Left
        value: left
      - label: Center
        value: center
      - label: Right
        value: right

  - title: Heading 6
    type: heading
    level: 6
    collapsed: true
  - title: Enable heading indicators globally for Heading 6
    id: flexcyon-headings-indicator-h6
    type: class-toggle
    default: false
  - title: Heading 6 font size
    id: h6-size
    type: variable-number
    default: 1.01803
    format: em
  - title: Heading 6 font weight
    id: h6-weight
    type: variable-number
    default: 575
  - title: Heading 6 line height
    id: h6-line-height
    type: variable-number
    default: 1.21
  - title: Enable underline for Heading 6
    id: flexcyon-h6-underline-enabled
    type: class-toggle
    default: false
  - title: Heading 6 alignment
    description: Sets the text alignment of Heading 6
    id: flexcyon-heading-6-alignment
    type: variable-select
    default: left
    options: 
      - label: Left
        value: left
      - label: Center
        value: center
      - label: Right
        value: right

  - title: Inline title
    type: heading
    level: 5
    collapsed: true
  - title: Inline title font size
    id: inline-title-size
    type: variable-number
    default: 1.802
    format: em
  - title: Inline title font weight
    id: inline-title-weight
    type: variable-number
    default: 700
  - title: Inline title line height
    id: inline-title-line-height
    type: variable-number
    default: 1.2

  - title: Code Blocks
    type: heading
    level: 5
    collapsed: true
  - title: Code Block Syntax Highlighting Mode
    type: class-select
    id: flexcyon-cb-syntax-mode
    allowEmpty: true
    default: none
    options: 
      - 
        label: Catppuccin
        value: flexcyon-syntax-catppuccin
      - 
        label: Lego
        value: flexcyon-syntax-lego
      - 
        label: Monochrome
        value: flexcyon-syntax-monochrome
  - title: Code Block File Extension
    type: info-text
    markdown: true
    description: Customise the code block file extension, only appears in Live Preview mode
  - title: Set Code Block File Extension Case
    id: flexcyon-codeblock-fmt-ext
    type: variable-select
    default: lowercase
    options: 
      - label: Capitalize
        value: capitalize
      - label: Uppercase
        value: uppercase
      - label: Lowercase
        value: lowercase

  - title: Add Prefix before Code Block File Extension
    id: flexcyon-codeblock-prefix-ext
    type: class-toggle
    default: false
  - title: Customise Prefix before Code Block File Extension
    id: flexcyon-code-file-ext-prefix
    type: variable-text
    default: "."
    quotes: true
  - title: Code Block File Extension Font Weight
    id: flexcyon-code-file-ext-font-w
    type: variable-number
    default: 500

  - title: UI Font sizes
    type: heading
    level: 5
    collapsed: true
  - title: Smaller UI Font size
    id: font-ui-smaller
    type: variable-number
    default: 12.94424
    format: px
  - title: Small UI Font size
    id: font-ui-small
    type: variable-number
    default: 14.56227
    format: px
  - title: Medium UI Font size
    id: font-ui-medium 
    type: variable-number
    default: 16.1803
    format: px
  - title: Large UI Font size
    id: font-ui-large
    type: variable-number
    default: 17.79833
    format: px

  - title: Table
    type: heading
    level: 5
    collapsed: true 
  - title: Table border color
    id: table-border-color
    type: variable-color
    opacity: true
    format: hex
    default: "#6f768566"
  - title: Table header size
    id: table-header-size
    type: variable-text
    default: "large"
  - title: Width of table in reading mode
    id: flexcyon-table-reading-mode-width
    type: variable-text
    default: 100%
  - title: Table Cell Vertical Padding
    id: flexcyon-td-verti-padding
    type: variable-number
    format: px
    default: 5
  - title: Table Cell Horizontal Padding
    id: flexcyon-td-horiz-padding
    type: variable-number
    format: px
    default: 10
  - title: Table Cell Live Preview Scaling
    description: Proportion to scale Live Preview table cell rendering when compared to Reading mode.
    id: flexcyon-td-live-pad-scale
    type: variable-number
    default: 0.2

  - title: Files
    type: heading
    level: 5
    collapsed: true
  - title: Enable dimmed file extensions in file explorer
    id: flexcyon-file-exp-dimmed-file-exts-enabled 
    type: class-toggle
    default: false
  - title: Enable Active File Indicator
    id: flexcyon-enable-active-indicator
    type: class-toggle
    default: false
  - title: Active File Indicator value
    description: Set a custom string value for active file indicator.
    id: flexcyon-active-indicator
    type: variable-text
    default: ">> "
    quotes: true
  - title: Enable vertical navigation
    id: flexcyon-vertical-nav
    description: Enables vertical navigation style. Navigation icons like Files, new note and so on are displayed vertically much like stacked tabs.
    type: class-toggle
    default: false
  - title: Select folder style
    description: Select the folder style, sometimes need to restart or force reload for it to take effect properly. Alternate folder style Adds padding for active file item, makes collapse icons and borders blue for active folders.
    type: class-select
    id: flexcyon-folder-style
    allowEmpty: true
    default: none
    options: 
      - 
        label: Rainbow folders
        value: flexcyon-rainbow-folders
      - 
        label: Alternate folder style
        value: flexcyon-alt-folder-style
      - 
        label: Markdown file tree style
        value: flexcyon-md-file-tree-style
  - title: Colour background instead of text for rainbow folders
    id: flexcyon-is-bg-rainbow
    type: class-toggle
    default: true
  - title: Enable minimalist trees
    description: Removes left borders and collapse icons from trees in the app, this affects folder and outlines 
    id: flexcyon-minimalist-tree
    type: class-toggle
    default: false
  - title: Vertical Tree Item Padding
    description: Vertical Padding of tree item variables like file explorer items
    id: flexcyon-tree-item-verti-padding
    type: variable-number
    format: px
    default: 2
  - title: Horizontal Tree Item Padding
    description: Horizontal Padding of tree item variables like file explorer items
    id: flexcyon-tree-item-horiz-padding
    type: variable-number
    format: px
    default: 10
  - title: Wrap Long Filenames
    description: Wrap long filenames to a new line instead of cutting it off with ellipses when the text does overflow
    id: flexcyon-wrap-long-filenames
    type: class-toggle
    default: true

  - title: Workspace
    type: heading
    level: 5
    collapsed: true
  - title: File line width
    id: file-line-width
    description: File line width when readable line length is enabled
    type: variable-number
    default: 50
    format: rem
  - title: Opacity of dimmed elements
    id: dimmed
    description: Opacity of dimmed UI elements
    type: variable-number
    default: 0.55
  - title: Opacity of block labels
    id: flexcyon-block-label-opacity
    description: Opacity of block ID labels
    type: variable-number
    default: 0.55
  - title: Editor Top Margin
    description: Sets the top margin of the editor.
    id: flexcyon-editor-margin-top
    type: variable-number
    default: 18
    format: px

  - title: Top Actions Alignment
    description: Alignment of the top actions (the ones with icons that allow you to make a new note, new folder etc.). Defaults to left if an invalid value is given.
    id: flexcyon-top-actions-alignment
    type: variable-text
    default: center
  - title: Prompts
    type: heading
    level: 6
    collapsed: true
  - title: Prompt width
    description: Sets the width of prompts like the command prompt
    id: prompt-width
    type: variable-number
    default: 700
    format: px
  - title: Prompt max width
    description: Sets the maximum width of prompts like the command prompt
    id: prompt-max-width
    type: variable-number
    default: 80
    format: vw
  - title: Prompt max height
    description: Sets the maximum height of prompts like the command prompt
    id: prompt-max-height
    type: variable-number
    default: 70
    format: vh
  - title: Prompt alignment
    description: Configure the alignment of prompt such as the command prompt and Omnisearch search prompt
    type: class-select
    id: flexcyon-prompt-alignment
    allowEmpty: true
    default: none
    options: 
      - 
        label: Top left
        value: flexcyon-prompt-align-top-left
      - 
        label: Top center
        value: flexcyon-prompt-align-top-center
      -
        label: Center left
        value: flexcyon-prompt-align-center-left
      -
        label: Bottom left
        value: flexcyon-prompt-align-bottom-left
      -
        label: Bottom center 
        value: flexcyon-prompt-align-bottom-center
  - title: Suggestion item vertical padding
    description: Configure the vertical padding of Search, Quick Switcher and Omnisearch
    id: flexcyon-suggestion-verti-padding
    type: variable-number
    default: 8
    format: px
  - title: Suggestion item horizontal padding
    description: Configure the horizontal padding of Search, Quick Switcher and Omnisearch
    id: flexcyon-suggestion-horiz-padding
    type: variable-number
    default: 12
    format: px
  
  - title: Animations
    type: heading
    level: 5
    collapsed: true
    description: Please note that Bases Cards View plus animations might not be good for performance.
  - title: Animation type
    description: Configure animation type for transitions of prompts, modals and tab containers.
    type: class-select
    id: flexcyon-anim-type
    allowEmpty: true
    default: none
    options: 
      - 
        label: Slide in Left to Right
        value: flexcyon-anims-slide-ltr
      - 
        label: Slide in Right to Left
        value: flexcyon-anims-slide-rtl
      - 
        label: Slide in Top to Bottom
        value: flexcyon-anims-slide-tb
      - 
        label: Slide in Bottom to Top
        value: flexcyon-anims-slide-bt
      - 
        label: Rotate in Bottom to Top
        value: flexcyon-anims-spin-bt
      - 
        label: Rotate in Right to Left
        value: flexcyon-anims-spin-rl
      - 
        label: Scale Up
        value: flexcyon-anims-scale-up

  - title: Animation duration
    id: flexcyon-anim-duration
    description: Transition duration for animations. Affects Bases Cards View flex grow transition as well as many other UI elements when animations are enabled
    type: variable-number
    default: 0.3
    format: s
  - title: Animation easing function
    id: flexcyon-anim-easing
    description: Transition easing fucntion for animations
    type: variable-text
    default: ease-in-out
  - title: Animation slide amount
    id: flexcyon-anim-slide-amount
    description: The amount of pixels the slide animations will slide
    type: variable-number
    default: 56.63105 
    format: px
  - title: Enable Animations in Style Settings containers
    id: flexcyon-anim-style-settings-contain
    type: class-toggle
    default: false

  - title: Editor Background
    type: heading
    level: 5
    collapsed: true
  - title: Select Background Type
    description: Select the background type for the editor
    type: class-select
    id: flexcyon-bg-type
    allowEmpty: true
    default: none
    options: 
      - 
        label: Grid Background
        value: flexcyon-editor-grid
      - 
        label: Dotted Background
        value: flexcyon-editor-dots
      - 
        label: Rhombus Background
        value: flexcyon-editor-rhombus
  - title: Rotation value for grid and rhombus background
    description: How many degrees the grid background will be rotated
    id: flexcyon-editor-bg-rotation
    type: variable-number
    default: 0
    format: deg
  - title: Width between each dot/line for editor background
    id: flexcyon-editor-bg-width
    type: variable-number
    default: 15
    format: px
  - title: Size of dots for dotted background
    id: flexcyon-editor-dot-size
    type: variable-number
    default: 2.5
    format: px

  - title: Layout
    type: heading
    level: 5
    collapsed: true
  - title: Select workspace layout
    description: Select the workspace layout. Card layout adds solid rounded borders. Angled layout is tilted stuff. Powerlevel10k one has plenty of polygons.
    type: class-select
    id: flexcyon-workspace-layout
    allowEmpty: true
    default: none
    options: 
      - 
        label: Cards Layout
        value: flexcyon-workspace-card-layout
      - 
        label: Angled Layout
        value: flexcyon-workspace-angled-layout
      - 
        label: Powerlevel10k Layout
        value: flexcyon-workspace-pl10k-layout
  - title: Enable TUI add-on for cards layout
    description: Makes Files, properties and other items adopt styling inspired by TUIs. 
    id: flexcyon-workspace-cards-tui-ext
    type: class-toggle
    default: true

  - title: Callouts
    type: heading
    level: 5
    collapsed: true
  - title: Callout Icon Right padding
    id: flexcyon-callout-icon-right-padding
    description: Right padding for the callout icon
    type: variable-number
    default: 4
    format: px
  - title: First Codeblock Margin Top
    id: flexcyon-callout-first-codeblock-margin-top
    description: Margin top for the first codeblock in a callout, affects images too.
    type: variable-number
    default: 1
    format: rem
  - title: Callout Metadata Background Opacity
    id: flexcyon-callout-bg-opacity
    description: Configures the opacity of callouts when they have metadata of <all-*> or <bg-*>
    type: variable-text;
    default: 20%
  - title: Callout Vertical Margin
    id: flexcyon-callout-vertical-margin
    description: Configures the vertical margin of callouts
    type: variable-number
    default: 1
    format: em
  - title: Callout Vertical Padding
    id: flexcyon-callout-verti-padding
    description: Configures the vertical padding of callouts
    type: variable-number
    default: 12
    format: px
  - title: Callout Horizontal Padding
    id: flexcyon-callout-horiz-padding
    description: Configures the horizontal padding of callouts
    type: variable-number
    default: 24
    format: px
  - title: Callout Border Radius
    id: callout-radius
    description: Configures the border radius of callouts
    type: variable-number
    default: 2
    format: px
  - title: Callout Added Border Radius
    id: flexcyon-callout-radix
    description: Configures the border radius of callouts and other UI elements with additional border radius. E.g. Cards TUI add-on.
    type: variable-number
    default: 16
    format: px
  - title: Select callout style
    description: Modifies the default styles of all callouts. Needs an app reload to properly refresh callout rendering.
    type: class-select
    id: flexcyon-callout-style
    allowEmpty: true
    default: none
    options: 
      - 
        label: TUI Callouts
        value: flexcyon-tui-callouts
      - 
        label: Plain Callouts
        value: flexcyon-plain-callouts
      - 
        label: Vertical Callouts
        value: flexcyon-vert-callouts
  - title: Flashcard callout width
    id: flexcyon-callouts-flashcard-width
    description: Configures the width of flashcard callouts
    type: variable-number
    default: 250
    format: px
  - title: Flashcard callout height
    id: flexcyon-callouts-flashcard-height
    description: Configures the height of flashcard callouts
    type: variable-number
    default: 250
    format: px
  - title: Flashcard callout animation duration
    id: flexcyon-callout-flashcard-animation-duration
    type: variable-number
    default: 0.5
    format: s
  - title: Popup callout animation duration
    type: variable-number
    id: flexcyon-callout-pop-animation-duration
    default: 0.2
    format: s

  - title: Horizontal Rule
    type: heading
    level: 5
    collapsed: true
  - title: Disable horizontal rules in reading mode
    description: Do not display horizontal rules in reading mode
    id: flexcyon-hr-no-reading
    type: class-toggle
    default: false
  - title: Horizontal Rule Colour
    id: hr-color
    type: variable-color
    opacity: false
    format: hex
    default: "#393e48"
  - title: Add custom string inside horizontal rules
    type: class-toggle
    id: flexcyon-cust-str-hr
    default: false
  - title: Horizontal rule custom string content
    id: flexcyon-cust-hr-str
    type: variable-text
    default: "f"
    quotes: true
  - title: Horizontal rule custom string font size
    id: flexcyon-cust-hr-str-font-size
    type: variable-number
    default: 1.11803
    format: em
  - title: Horizontal rule custom string horizontal padding
    type: variable-number
    id: flexcyon-cust-hr-str-horiz-padding
    default: 8
    format: px

  - title: Checkboxes
    type: heading
    level: 5
    collapsed: true
  - title: Enable ASCII checkboxes
    type: class-toggle
    id: flexcyon-ascii-checkboxes-enabled
    default: false
  - title: ASCII checkboxes font size
    id: flexcyon-ascii-checkboxes-font-size
    type: variable-number
    default: 1.2
    format: rem
  - title: Enable Clip Path checkboxes
    type: class-toggle
    id: flexcyon-clip-path-checkboxes-enabled
    default: false

  - title: Bullet lists
    type: heading
    level: 5
    collapsed: true
  - title: Enable Rainbow bullet lists
    type: class-toggle
    id: flexcyon-rainbow-bullet-points
    default: false

  - title: Numbered lists
    type: heading
    level: 5
    collapsed: true
  - title: Select Default Numbered List Style in Reading Mode
    description: Unfortunately I cannot get it to work within CodeMirror's context, because the output html is not ordered list tags which are easier to style.
    type: variable-select
    id: flexcyon-default-ol-style
    default: decimal
    options: 
      - label: None
        value: none
      - label: Disc
        value: disc
      - label: Circle
        value: circle
      - label: Square
        value: square
      - label: Decimal
        value: decimal
      - label: CJK Decimal
        value: cjk-decimal
      - label: Decimal Leading Zero
        value: decimal-leading-zero
      - label: Lower Roman
        value: lower-roman
      - label: Upper Roman
        value: upper-roman
      - label: Lower Greek
        value: lower-greek
      - label: Lower Alphabet
        value: lower-alpha
      - label: Lower Latin
        value: lower-latin
      - label: Upper Alphabet
        value: upper-alpha
      - label: Upper Latin
        value: upper-latin
      - label: Arabic Indic
        value: arabic-indic
      - label: Armenian
        value: armenian
      - label: Bengali
        value: bengali
      - label: Cambodian
        value: cambodian
      - label: Khmer
        value: khmer
      - label: CJK Earthly Branch
        value: cjk-earthly-branch
      - label: CJK Heavenly Branch
        value: cjk-heavenly-branch
      - label: CJK Ideographic
        value: cjk-ideographic
      - label: Devanagari
        value: davanagari
      - label: Ethiopic Numeric
        value: ethiopic-numeric
      - label: Georgian
        value: georgian
      - label: Gujarati
        value: gujarati
      - label: Gurmukhi
        value: gurmukhi
      - label: Hebrew
        value: hebrew
      - label: Hiragana
        value: hiragana
      - label: Hiragana Iroha
        value: hiragana-iroha
      - label: Hiragana Formal
        value: hiragana-formal
      - label: Japanese Formal
        value: japanese-formal
      - label: Japanese Informal
        value: japanese-informal
      - label: Kannada
        value: kannada
      - label: Kannada Iroha
        value: kannada-iroha
      - label: Katakana
        value: katakana
      - label: Katakana Iroha
        value: katakana-iroha
      - label: Korean Hangul Formal
        value: korean-hangul-formal
      - label: Korean Hanja Formal
        value: korean-hanja-formal
      - label: Korean Hanja Informal
        value: korean-hanja-inforal
      - label: Lao
        value: lao
      - label: Lower Armenian
        value: lower-armenian
      - label: Malayalam
        value: malayalam
      - label: Mongolian
        value: mongolian
      - label: Myanmar
        value: myanmar
      - label: Oriya
        value: oriya
      - label: Persian
        value: persian
      - label: Simplified Chinese Formal
        value: simplified-chinese-formal
      - label: Simplified Chinese Informal
        value: simplified-chinese-informal
      - label: Tamil
        value: tamil
      - label: Telugu
        value: telugu
      - label: Thai
        value: thai
      - label: Tibetan
        value: tibetan
      - label: Traditional Chinese Formal
        value: traditional-chinese-formal
      - label: Traditional Chinese Informal
        value: traditional-chinese-informal
      - label: Upper Armenian
        value: upper-armenian
      - label: Disclosure Open
        value: disclosure-open

  - title: Media
    type: heading
    level: 5
    collapsed: true
  - title: Media Embed Vertical margin
    type: variable-number
    id: flexcyon-media-embed-vertical-margin
    default: 8
    format: px
  - title: Image Border Radius
    type: variable-number
    id: img-border-radius
    default: 15
    format: px

  - title: Links
    type: heading
    level: 5
    collapsed: true
  - title: Internal Link Color
    id: flexcyon-link-color
    type: variable-themed-color
    default-light: "#6f49ae"
    default-dark: "#a461c8"
    format: hex
  - title: External Color
    id: flexcyon-external-link-color
    type: variable-themed-color
    format: hex
    default-light: "#5c9fe4"
    default-dark: "#5a8fcd"
  - title: Unresolved Link Color
    id: flexcyon-link-unresolved-color
    type: variable-themed-color
    format: hex
    default-light: "#6f49ae"
    default-dark: "#a461c8"

  - title: Properties
    type: heading
    level: 5
    collapsed: true
  - title: Do not show properties in reading mode
    id: flexcyon-metadata-display-reading-disabled
    type: class-toggle
    default: false
  - title: Do not show properties in live preview mode
    id: flexcyon-metadata-display-editing-disabled
    type: class-toggle
    default: false
  - title: Enable rainbow metadata icons
    id: flexcyon-metadata-rainbow-icons
    type: class-toggle
    default: false
  - title: Metadata container left padding
    id: flexcyon-meta-container-padding-left
    type: variable-number
    default: 14
    format: px

  - title: Status Bar
    type: heading
    level: 5
    collapsed: true
  - title: Hide until trigger
    description: Select whether the status bar is hidden, and if it is whether to hover or to press and hold to unhide it.
    type: class-select
    id: flexcyon-status-hide-until-trigger
    allowEmpty: true
    default: none
    options: 
      - 
        label: Hide until hover
        value: flexcyon-status-hide-until-hover
      - 
        label: Hide until hold
        value: flexcyon-status-hide-until-hold
  - title: Status bar alignment
    type: class-select
    id: flexcyon-status-alignment
    allowEmpty: true
    default: none
    options: 
      - 
        label: Left
        value: flexcyon-status-left-align
      - 
        label: Centre
        value: flexcyon-status-centre-align
  - title: Text when hide until hover enabled
    id: flexcyon-status-hide-until-hover-text
    description: Text to show when hide until hover is enabled, do not leave empty
    type: variable-text
    default: "Show status"
    quotes: true
  - title: Translation for showing status bar on hover
    id: flexcyon-status-hide-until-hover-translation
    description: Translation for showing status bar on hover, requires hide until hover to be enabled.
    type: variable-number
    default: 80
    format: vw
  - title: Transition duration for showing status bar on hover
    id: flexcyon-status-hide-hover-duration
    description: Transition duration for showing status bar on hover, requires hide until hover to be enabled.
    type: variable-number
    default: 0.35
    format: s
  - title: Transition timing function for showing status bar on hover
    description: Transition timing function for showing status bar on hover, requires hide until hover to be enabled.
    id: flexcyon-status-hide-hover-function
    type: variable-text
    default: ease-out
  - title: Use text instead of icons for mode status
    id: flexcyon-status-text-mode
    description: Use text instead of icons for mode status
    type: class-toggle
    default: false
  - title: Reading Mode Text
    id: flexcyon-status-reading-text
    description: Text to display when in reading mode, needs use text instead of icons for mode status enabled.
    type: variable-text
    default: "READ"
    quotes: true
  - title: Source Mode Text
    id: flexcyon-status-source-text
    description: Text to display when in source mode, needs use text instead of icons for mode status enabled.
    type: variable-text
    default: "SOURCE"
    quotes: true
  - title: Live Preview Mode Text
    id: flexcyon-status-live-text
    description: Text to display when in live preview mode, needs use text instead of icons for mode status enabled.
    type: variable-text
    default: "LIVE"
    quotes: true
  - title: Show status bar on mobile
    id: flexcyon-status-mobile-enabled
    type: class-toggle
    default: false
  - title: Status bar font size
    id: status-bar-font-size
    type: variable-number
    default: 13.753255
    format: px
  - title: Select status bar style
    description: Angled status bar style is inspired by Powerlevel10k. Cards has a more pronounced border radius.
    type: class-select
    id: flexcyon-status-style
    allowEmpty: true
    default: none
    options: 
      - 
        label: Angled
        value: flexcyon-status-style-angled
      - 
        label: Cards
        value: flexcyon-status-style-card
      -
        label: Powerlevel10k
        value: flexcyon-status-style-pl10k

  - title: Enable status text color
    id: flexcyon-status-text-enable-color
    description: Affects text colors for vim mode status text as well.
    type: class-toggle
    default: false

  - title: Title Bar
    type: heading
    level: 5
    collapsed: true
  - title: Titlebar Button Effects
    description: Enable hover effects on titlebar buttons
    id: flexcyon-titlebar-button-effects
    type: class-toggle
    default: false

  - title: Line Numbers
    type: heading
    level: 5
    collapsed: true
  - title: Highlight Active Line
    description: Highlights the active line while editing.
    id: flexcyon-highlight-active-line
    type: class-toggle
    default: false
  - title: Enable Relative Line Numbers
    description: Enable Relative Line Numbers. Adapted from Shimmering Focus Theme
    id: flexcyon-enable-rel-nums
    type: class-toggle
    default: false
  - title: Relative and normal line numbers on different lines
    description: Does not display line numbers for lines which have relative line numbers displayed. 
    type: class-toggle
    id: flexcyon-no-num-with-relative
    default: false
  - title: Only display relative line numbers
    description: Overrides previous configuration option.
    type: class-toggle
    id: flexcyon-relative-num-only
    default: false
  - title: Configure Relative Line Number Style
    type: class-select
    id: flexcyon-select-relative-num
    allowEmpty: true
    default: none
    options: 
      - 
        label: Roman
        value: flexcyon-roman-rel-nums
      - 
        label: Greek
        value: flexcyon-greek-rel-nums
      - 
        label: Chinese
        value: flexcyon-chinese-rel-nums
  - title: Replace active line number with string
    description: Customise the active line number with your own string, defaults to "->"
    type: class-toggle
    id: flexcyon-repl-active-line-num-str
    default: false
  - title: Replaced active line number string value
    id: flexcyon-repl-active-line-str
    type: variable-text
    default: "->"
    quotes: true

  - title: Cursor
    type: heading
    level: 5
    collapsed: true
  - title: Enable Smooth Cursor
    id: flexcyon-enable-smooth-cursor
    type: class-toggle
    default: true
  - title: Smooth cursor transition duration
    id: flexcyon-cursor-duration
    type: variable-number
    default: 42.5
    format: ms
  - title: Smooth cursor timing function
    id: flexcyon-cursor-timing-fn
    type: variable-text
    default: ease-in
  - title: Smooth cursor minimum width
    id: flexcyon-cursor-min-width
    type: variable-text
    default: unset

  - title: Graph
    type: heading
    level: 5
    collapsed: true
  - title: Graph View Controls Vertical Padding
    type: variable-number
    id: graph-control-verti-padding
    default: 6
    format: px
  - title: Graph View Controls Horizontal Padding
    type: variable-number
    id: graph-control-horiz-padding
    default: 12
    format: px

  - title: View header
    type: heading
    level: 5
    collapsed: true
  - title: View header breadcrumb max width
    id: flexcyon-view-header-breadcrumb-max-w
    description: Max width of view header breadcrumb
    type: variable-number
    default: 12.5
    format: vw
  - title: Display device operating system details in view header
    id: flexcyon-display-os
    type: class-toggle
    default: false
  - title: Number tabs
    id: flexcyon-number-tabs
    description: Numbers your tabs in sequential order. Each tab group has its own counter. Meant for RTZ mode, but can be enabled separately.
    type: class-toggle
    default: false
  - title: Remove Tab Headers
    id: flexcyon-remove-tab-headers
    description: Removes tab headers. You can still view the original content by hovering and a tooltip will appear. Meant for RTZ mode, but can be enabled separately.
    type: class-toggle
    default: false
  - title: Device operating system details right padding
    type: variable-number
    id: flexcyon-os-detail-padding-r
    default: 24
    format: px
  - title: Display screen dimensions
    description: Display the width and height of the current Obsidian window using pure CSS
    id: flexcyon-display-screen-dimens
    type: class-toggle
    default: false
  - title: Display screen dimensions left padding
    type: variable-number
    id: flexcyon-screen-dimens-padding-l
    default: 16
    format: px

  - title: Icons
    description: For icon related styling
    type: heading
    level: 5
    collapsed: true
  - title: Upscale percentage of icons 1
    id: upsize
    description: Upscale percentage used in smiley icons and side dock icon effects
    type: variable-text
    default: 103%
  - title: Upscale percentage of icons 2
    id: expand
    description: Upscale percentage used in side dock icon effects
    type: variable-text
    default: 110%
  - title: Smiley Toggle Icons 
    description: Display smiley toggle icons in the UI
    id: flexcyon-settings-smiley-icons-enabled
    type: class-toggle
    default: false
  - title: Load ASCII Icon Set
    description: Replaces some icons with ASCII Icons, works best when used together with smiley icons. This will override the declarations by community plugins like Iconic for the specific icons targeted. This can be prevented with the setting below.
    id: flexcyon-ascii-icon-set
    type: class-toggle
    default: false
  - title: Ensure community plugin icons take precedence
    description: Ensure community plugins which modify icons have their modifications take precedence over this theme's. Smiley Icons and ASCII Icons will not render when said community plugins are enabled and this setting is enabled. This setting currently only works with the Iconic plugin, as adding support for all icon related plugins negatively affects performance too much.
    id: flexcyon-ensure-plugin-icon
    type: class-toggle
    default: true
  - title: Coloured Icons in Settings
    description: Display coloured icons for buttons in setting like uninstall, options, hotkeys, etc.
    id: flexcyon-settings-coloured-icons
    type: class-toggle
    default: false

  - title: Settings
    type: heading
    level: 4
    collapsed: true
    description: Customise the appearance of settings
  - title: Enable community item effects
    description: Enable installed tooltip effects such as subtle dimming of community items and fixing positioning of installed tooltip in community items.
    id: flexcyon-settings-comm-item-enabled
    type: class-toggle
    default: false
  - title: Opacity of community items (unselected)
    id: flexcyon-comm-item-opacity
    type: variable-number
    default: 0.89
  - title: Installed tooltip left margin
    description: Control the left margin of the installed tooltip
    id: flexcyon-settings-installed-tooltip-left-margin
    type: variable-number
    default: 1
    format: rem
  - title: Do not show scrollbar in settings
    id: flexcyon-settings-scrollbar-removed
    description: Do not show scrollbar in settings
    type: class-toggle
    default: false
  - title: Enable alternate active item effect in settings
    id: flexcyon-enable-alt-active-item-effect
    type: class-toggle
    default: true
  - title: Input box Vertical Padding
    type: variable-number
    id: flexcyon-input-verti-padding
    default: 4
    format: px
  - title: Input box Horizontal Padding
    type: variable-number
    id: flexcyon-input-verti-padding
    default: 8
    format: px

  - title: Style Settings
    type: heading
    level: 5
    collapsed: true
    description: Configure the appearance for style settings
  - title: Indentation width between style setting headings
    type: variable-number
    id: flexcyon-style-settings-indent-width
    default: 4
    format: px
  - title: Dim collapsed style settings headings
    description: Dims collapsed Style Settings headings, useful for navigating larger or heavily nested Style Settings.
    type: class-toggle
    id: flexcyon-style-settings-dim-collapsed-headings
    default: true

  - title: Plugins
    type: heading
    level: 4
    collapsed: true
    description: Style settings related to supported plugins
  - title: Alternate file tree 
    type: heading
    level: 5
    collapsed: true
  - title: Folders font size
    id: oz-fta-folder-font-size
    description: Used in alternate file tree folder
    type: variable-number
    default: 0.925
    format: rem
  - title: Folders font color
    id: oz-fta-folder-pane-file-name-color
    type: variable-themed-color
    format: hex
    opacity: true
    default-light: "#080808"
    default-dark: "#d3d5d3"
  - title: Active folder color
    id: oz-fta-all-panes-active-text-color
    type: variable-themed-color
    format: hex
    default-light: "#080808"
    default-dark: "#d3d5d3"
  - title: Files font size
    id: oz-fta-file-font-size
    description: Used in alternate file tree files
    type: variable-number
    default: 0.9
    format: rem
  - title: Files font color
    id: oz-fta-file-pane-file-name-color
    type: variable-color
    opacity: true
    format: hex
    default: "#6f768599"
  - title: Disable folder icons
    id: flexcyon-oz-folder-icons-disabled
    description: Remove folder icons
    type: class-toggle
    default: false
  - title: Disable file tree header
    id: flexcyon-oz-file-tree-header-disabled
    description: Remove file tree header
    type: class-toggle
    default: false
  - title: Enable Alternate folder count
    id: flexcyon-oz-alternate-folder-count
    description: Alternate folder count style, shows count on hover
    type: class-toggle
    default: false
  - title: Enable dimmed file extensions in file tree
    id: flexcyon-oz-dimmed-file-exts-enabled
    type: class-toggle
    default: false

  - title: Full Calendar
    type: heading
    level: 5
    collapsed: true
  - title: Opacity of dimmed full calendar items 
    id: flexcyon-fc-dimmed-items-opacity
    type: variable-number
    default: 0.89
  - title: Dataview
    type: heading
    level: 5
    collapsed: true
  - title: Horizontal padding of dataview error messages
    id: flexcyon-dataview-horizontal-padding
    type: variable-number
    default: 8
    format: px

  - title: Canvas
    type: heading
    level: 5
    collapsed: true
  - title: Blur inactive Canvas nodes
    id: flexcyon-canvas-blur-inactive-nodes
    description: Toggle the blur effect of inactive canvas nodes.
    type: class-toggle
    default: false
  - title: Blur intensity for inactive nodes
    id: flexcyon-canvas-blur-intensity
    description: How intense the blur effect is when the blur inactive canvas nodes mode is on
    type: variable-number
    default: 1
    format: px
  - title: Canvas card menu alignment
    type: class-select
    id: flexcyon-canvas-menu-alignment
    allowEmpty: true
    default: none
    options: 
      - 
        label: Bottom left
        value: flexcyon-canvas-menu-bottom-left
      - 
        label: Bottom right
        value: flexcyon-canvas-menu-bottom-right
      - 
        label: Top center
        value: flexcyon-canvas-menu-top-center
      - 
        label: Top left
        value: flexcyon-canvas-menu-top-left
      - 
        label: Top right
        value: flexcyon-canvas-menu-top-right
      -
        label: Left aligned center
        value: flexcyon-canvas-menu-lcenter-center
      -
        label: Left aligned top
        value: flexcyon-canvas-menu-lcenter-top
      -
        label: Left aligned bottom
        value: flexcyon-canvas-menu-lcenter-bottom
      -
        label: Right aligned center
        value: flexcyon-canvas-menu-rcenter-center
      -
        label: Right aligned top
        value: flexcyon-canvas-menu-rcenter-top
      -
        label: Right aligned bottom
        value: flexcyon-canvas-menu-rcenter-bottom
      -
        label: Right aligned center align
        value: flexcyon-canvas-menu-rcenter-align

  - title: Various Complements
    type: heading
    level: 5
    collapsed: true
    description: For configuring the Various Complements Plugin
  - title: Vertical Suggestion Padding
    type: variable-number
    id: flexcyon-var-comps-sugg-vert-padding
    default: 7
    format: px
  - title: Horizontal Suggestion Padding
    type: variable-number
    id: flexcyon-var-comps-sugg-horiz-padding
    default: 12
    format: px
  - title: Compact Suggestion Mode
    id: flexcyon-var-comps-compact-mode
    description: Overrides defaults. Uses padding 4px 8px.
    type: class-toggle
    default: false

  - title: Omnisearch
    type: heading
    level: 5
    collapsed: true
    description: For configuring the Omnisearch Plugin
  - title: Disable Omnisearch Icons
    id: flexcyon-omnisearch-no-icons
    description: Removes Omnisearch search result icons.
    type: class-toggle
    default: false
  - title: Omnisearch Body Left Margin
    type: variable-number
    id: flexcyon-omnisearch-body-margin-left
    default: 1.45
    format: rem

  - title: Bases
    type: heading
    level: 5
    collapsed: true
    description: Currently experimental, will add to docs later
  - title: Bases Cards View
    type: heading
    level: 6
    collapsed: false
  - title: Default string when Card View item image not found
    id: bases-no-img-str
    type: variable-text
    default: "No image path could be found for this file"
    quotes: true
  - title: Bases Card Border Radius
    id: bases-border-r
    type: variable-number
    default: 16
    format: px
  - title: Bases Card Group Padding
    id: bases-cards-group-padding
    type: variable-number
    default: 16
    format: px
  - title: Bases Card Padding Top
    id: flexcyon-bases-card-padding-top
    type: variable-number
    default: 8
    format: px
  - title: Bases Card Padding Right
    id: flexcyon-bases-card-padding-right
    type: variable-number
    default: 0
    format: px
  - title: Bases Card Padding Bottom
    id: flexcyon-bases-card-padding-bottom
    type: variable-number
    default: 0
    format: px
  - title: Bases Card Padding Left
    id: flexcyon-bases-card-padding-left
    type: variable-number
    default: 2
    format: px
  - title: Bases Card View Flex Grow
    id: flexcyon-bases-card-flex-gorw
    description: How much the Card View tries to scale up or down depending on tab size e.g. when toggling sidebars.
    type: variable-number
    default: 0.55
  - title: Bases Card View Delay Factor
    id: flexcyon-bases-card-flex-grow
    description: This is the factor of how long the Card View takes to scale depending on tab size. Technically just this value multiplied by the animation duration value.
    type: variable-number
    default: 0.55
  - title: Bases Cards View
    type: heading
    level: 6
    collapsed: false
  - title: Bases Table Cell left padding
    id: flexcyon-bases-td-padding-l
    type: variable-number
    default: 2
    format: px
    
  - title: Others
    type: heading
    level: 4
    collapsed: true
    description: Vim mode text, new tab appearance, side dock icons, tooltip radius, background images
  - title: Vim Mode Text
    description: Text to display modes when using built-in vim bindings, inherits style and color from status bar style
    type: heading
    level: 5
    collapsed: true
  - title: Enable Vim Mode Text
    id: flexcyon-vim-mode-text-enable
    description: Enable text for displaying current vim mode
    type: class-toggle
    default: true
  - title: Vim mode text left positioning
    id: flexcyon-vim-left-positioning
    type: variable-number
    description: How far from the left of the screen the current vim mode text is (as the number gets greater, the text moves to the right of the screen)
    default: 6
    format: px
  - title: Vim mode text bottom positioning
    id: flexcyon-vim-bottom-positioning
    type: variable-number
    description: How far from the bottom of the screen the current vim mode text is (as the number gets greater, the text moves higher up the screen)
    default: -4
    format: px
  - title: Insert Mode Text
    description: Text to display when in insert mode
    id: flexcyon-vim-insert-text
    type: variable-text
    default: "INSERT"
    quotes: true
  - title: Normal Mode Text
    description: Text to display when in normal mode
    id: flexcyon-vim-normal-text
    type: variable-text
    default: "NORMAL"
    quotes: true
  - title: Command Mode Text
    description: Text to display when in command mode
    id: flexcyon-vim-command-text
    type: variable-text
    default: "COMMAND"
    quotes: true

  - title: New Tab Appearance
    type: heading
    level: 5
    collapsed: true
    description: Customise the appearance of new tabs. Type backslash character and a to pass it as a newline in ASCII art and other input values
  - title: Add before empty state title
    type: class-select
    id: flexcyon-new-tab-mod
    allowEmpty: true
    default: none
    options: 
      - 
        label: ASCII art
        value: flexcyon-ascii-enable
      - 
        label: Quote
        value: flexcyon-quote-enable
  - title: Background for add before empty state title
    description: Background color for the add before empty state title, accepts CSS variables.
    type: variable-text
    id: flexcyon-new-tab-bg-wrapper
    default: linear-gradient(to right, var(--text-accent), var(--color-blue), var(--color-cyan))
  - title: Quote
    id: flexcyon-quote-val
    description: The quote that will be displayed
    type: variable-text
    default: "This is a placeholder quote\ain the Flexcyon Theme."
    quotes: true
  - title: Quote Attribution Prefix
    id: flexcyon-quote-credit-prefix
    description: The prefix before the quote attribution
    type: variable-text
    default: "-"
    quotes: true
  - title: Quote Attribution
    id: flexcyon-quote-credit
    description: The quote attribution
    type: variable-text
    default: "bladeacer"
    quotes: true
  - title: Quote font size
    id: flexcyon-quote-font-size
    type: variable-number
    default: 24
    format: px
  - title: ASCII Art
    id: flexcyon-ascii-art
    description: ASCII art to display in new tab
    type: variable-text
    default: " \a\
    _______________                                       \a\
    ___  ____/__  /________  ____________  ______________ \a\
    __  /_   __  /_  _ \\_  |/_/  ___/_  / / /  __ \\_  __ \\ \a\
    _  __/   _  / /  __/_>  < / /__ _  /_/ // /_/ /  / / / \a\
    /_/      /_/  \\___//_/|_| \\___/ _\\__, / \\____//_/ /_/ \a\
                                    /____/                \a\a\a "
    quotes: true
  - title: ASCII art font size limit
    description: The maximum size of the ASCII art
    id: flexcyon-ascii-max-font-size
    type: variable-number
    default: 14
    format: px
  - title: ASCII art line height
    description: The line height of the ASCII art and quotes.
    id: flexcyon-ascii-line-height
    type: variable-number
    default: 1.5
  - title: Disable Empty State title
    id: flexcyon-empty-state-title-disable
    description: Toggle the empty state title
    type: class-toggle
    default: true
  - title: Disable Empty State Actions
    id: flexcyon-empty-state-actions-disable
    description: Toggle the empty state actions
    type: class-toggle
    default: false

  - title: Side Dock
    type: heading
    level: 5
    collapsed: true
  - title: Enable side dock icon effects
    id: flexcyon-sidedock-icon-effects
    description: Enable the colors, dim till hover effects for side dock icons
    type: class-toggle
    default: false
  - title: Side Dock Ribbon Width
    description: Configure the width of the workspace ribbon on the left.
    id: ribbon-width
    type: variable-number
    default: 48
    format: px
  - title: Place workspace ribbon at the top
    id: flexcyon-ribbon-top
    type: class-toggle
    default: false
  - title: Place vault switcher at the top
    id: flexcyon-vault-switch-top
    type: class-toggle
    default: false
  - title: Reverse order of vault switcher and actions
    id: flexcyon-vault-reverse
    type: class-toggle
    default: false

  - title: Tooltip radius
    type: heading
    level: 5
    collapsed: true
  - title: Small radius
    id: radius-s
    type: variable-number
    default: 2
    format: px
  - title: Medium radius
    id: radius-m
    type: variable-number
    default: 4
    format: px
  - title: Large radius
    id: radius-l
    type: variable-number
    default: 6
    format: px
  - title: Extra large radius
    id: radius-xl
    type: variable-number
    default: 8
    format: px

  - title: Sidebar Background
    type: heading
    description: Configure background images in the left and right sidebars
    level: 5
    collapsed: true
  - title: Select background in sidebar
    description: Overrides background image declaration below, configures in both left and right sidebar
    type: class-select
    id: flexcyon-sidebar-bg
    allowEmpty: true
    default: none
    options: 
      - 
        label: Grid
        value: flexcyon-sidebar-bg-grid
      - 
        label: Dotted
        value: flexcyon-sidebar-bg-dots
      - 
        label: Rhombus
        value: flexcyon-sidebar-bg-rhombus

  - title: Left sidebar background image url
    id: flexcyon-bg-image-sidebar-left-url
    type: variable-text
    default: url("")
  - title: Right sidebar background image url
    id: flexcyon-bg-image-sidebar-right-url
    type: variable-text
    default: url("")
  - title: Sidebar Background image blend mode
    id: flexcyon-bg-image-blend-mode
    type: variable-text
    default: darken
  - title: Sidebar Background image repeat
    id: flexcyon-bg-image-repeat
    type: variable-text
    default: no-repeat
  - title: Sidebar Background image blur
    id: flexcyon-bg-image-blur
    type: variable-number
    default: 0
    format: px
  - title: Sidebar Background image brightness
    id: flexcyon-bg-image-brightness
    type: variable-text
    default: unset
  - title: Sidebar Background image size
    id: flexcyon-bg-image-size
    type: variable-text
    default: contain
  - title: Sidebar Background image position
    id: flexcyon-bg-image-position
    type: variable-text
    default: center

  - title: Modal Background
    type: heading
    description: Configure background images in the background of settings menu, prompts etc
    level: 5
    collapsed: true
  - title: Modal Background image url
    id: flexcyon-modal-bg-url
    type: variable-text
    default: url("")
  - title: Modal background image blend mode
    id: flexcyon-modal-image-blend-mode
    type: variable-text
    default: lighten
  - title: Modal Background image repeat
    id: flexcyon-modal-image-repeat
    type: variable-text
    default: no-repeat
  - title: Modal Background image blur
    id: flexcyon-modal-image-blur
    type: variable-number
    default: 0
    format: px
  - title: Modal Background image brightness
    id: flexcyon-modal-image-brightness
    type: variable-text
    default: unset
  - title: Modal Background image size
    id: flexcyon-modal-image-size
    type: variable-text
    default: cover
  - title: Modal Background image position
    id: flexcyon-modal-image-position
    type: variable-text
    default: center
 */

body {
  div.pcr-app.visible {
    background-color: var(--color-base-30);
  }

  .pcr-app .pcr-interaction {
    .pcr-type {
      color: var(--text-normal);
      background: var(--color-base-50);
      opacity: 0.85;
    }

    .pcr-type.active {
      background: var(--text-accent);
      border: unset;
      opacity: unset;
    }

    .pcr-cancel {
      color: var(--text-normal);
      background: var(--color-red);
    }

    .pcr-save {
      color: var(--text-normal);
      background: var(--color-blue);
    }
  }
}

.themed-color-wrapper {
  .theme-dark .pickr-reset button {
    color: #d3d3d3aa;
    background-color: #191d28aa;
    scale: var(--upsize);
  }
  .theme-light .pickr-reset button {
    color: #080808aa;
    background-color: #edebe5aa;
    scale: var(--upsize);
  }
}

@mixin setting-item-heading-margin($data-level) {
  .setting-item-heading[data-level="#{$data-level}"],
  .setting-item-heading[data-level="#{$data-level}"]
    + .style-settings-container {
    margin-left: calc(
      ($data-level + 1) * var(--flexcyon-style-settings-indent-width)
    );
  }
}

@include setting-item-heading-margin(0);
@include setting-item-heading-margin(1);
@include setting-item-heading-margin(2);
@include setting-item-heading-margin(3);
@include setting-item-heading-margin(4);
@include setting-item-heading-margin(5);
@include setting-item-heading-margin(6);

.style-settings-collapse-indicator svg {
  scale: calc(var(--expand) + 20%);
}

body.flexcyon-style-settings-dim-collapsed-headings {
  .style-settings-heading.is-collapsed {
    opacity: calc(var(--dimmed) + 0.05);
  }
}

body .setting-item:not(.is-collapsed).setting-item-heading {
  border-bottom: 1px solid var(--text-faint);
}

.style-settings-import,
.style-settings-export {
  text-decoration: none;
}
.style-settings-import {
  color: var(--color-blue);
}

.setting-item-heading .setting-item-name {
  font-size: var(--font-ui-large);
}

.mod-settings hr {
  border-color: transparent;
}
