// ---
// -- Base geometry
// -
#root
  --general-margin: 2px
  --general-border-radius: 4px
#root[data-density="compact"]
  --general-margin: 1px
  --general-border-radius: 2px
#root[data-density="loose"]
  --general-margin: 3px
  --general-border-radius: 5px

// ---
// -- Base colors
// -
#root[data-frame-color-scheme="dark"]
  --frame-bg: var(--s-frame-bg, #282828)
  --frame-fg: var(--s-frame-fg, #ccc)
  --frame-el-overlay-hover-bg: #ffffff16
  --frame-el-overlay-clicked-bg: #ffffff24
  --frame-el-overlay-selected-bg: #ffffff24
  --frame-el-overlay-selected-border: var(--s-accent, #47cfff)
  --frame-scrollbar-color: #ffffff46
#root[data-frame-color-scheme="light"]
  --frame-bg: var(--s-frame-bg, #eaeaea)
  --frame-fg: var(--s-frame-fg, #222)
  --frame-el-overlay-hover-bg: #00000012
  --frame-el-overlay-clicked-bg: #0000001c
  --frame-el-overlay-selected-bg: #00000012
  --frame-el-overlay-selected-border: var(--s-accent, #146fd9)
  --frame-scrollbar-color: #00000046

#root[data-toolbar-color-scheme="dark"]
  --toolbar-bg: var(--s-toolbar-bg, #323232)
  --toolbar-fg: var(--s-toolbar-fg, #eee)
  --toolbar-el-overlay-hover-bg: #ffffff16
  --toolbar-el-overlay-clicked-bg: #ffffff24
  --toolbar-el-overlay-active-bg: #ffffff24
  --toolbar-el-overlay-active-border: #ffffff00
  --toolbar-el-overlay-selected-bg: #ffffff24
  --toolbar-el-overlay-selected-border: var(--s-accent, #47cfff)
  --status-ok: #64df64
  --status-err: #df6464
  --status-active: #47cfff
  --status-notice: #00e9fb
  --accent: var(--s-accent, var(--status-active))
  --border: var(--s-toolbar-border, #21212164)
  --toolbar-scrollbar-color: #ffffff46
#root[data-toolbar-color-scheme="light"]
  --toolbar-bg: var(--s-toolbar-bg, #fafafa)
  --toolbar-fg: var(--s-toolbar-fg, #111)
  --toolbar-el-overlay-hover-bg: #00000012
  --toolbar-el-overlay-clicked-bg: #0000001c
  --toolbar-el-overlay-active-bg: #fff2
  --toolbar-el-overlay-active-border: #00000008
  --toolbar-el-overlay-selected-bg: #00000012
  --toolbar-el-overlay-selected-border: var(--s-accent, #146fd9)
  --status-ok: #098623
  --status-err: #d72f2f
  --status-active: #146fd9
  --status-notice: #01acda
  --accent: var(--s-accent, var(--status-active))
  --border: var(--s-toolbar-border, #dbdbdb64)
  --toolbar-scrollbar-color: #00000046

#root[data-act-el-color-scheme="dark"]
  --active-el-bg: var(--s-act-el-bg, #ffffff24)
  --active-el-fg: var(--s-act-el-fg, #fff)
  --active-el-shadow: 0 1px 4px -1px #00000048, inset 0 0 0 1px var(--s-act-el-border, #ffffff08)
  --active-el-overlay-hover-bg: #ffffff16
  --active-el-overlay-clicked-bg: #ffffff24
#root[data-act-el-color-scheme="light"]
  --active-el-bg: var(--s-act-el-bg, #ffffff)
  --active-el-fg: var(--s-act-el-fg, #000)
  --active-el-shadow: 0 1px 4px -1px #00000052, inset 0 0 0 1px var(--s-act-el-border, #fff2)
  --active-el-overlay-hover-bg: #00000012
  --active-el-overlay-clicked-bg: #0000001c

#root[data-popup-color-scheme="dark"]
  --popup-bg: var(--s-popup-bg, var(--frame-bg, #363636))
  --popup-fg: var(--s-popup-fg, var(--frame-fg, #fafafa))
  --popup-shadow: 0 0 0 1px var(--s-popup-border, #ffffff16), 0 1px 16px 0 #00000048
  --popup-scrollbar-color: #ffffff46
#root[data-popup-color-scheme="light"]
  --popup-bg: var(--s-popup-bg, var(--frame-bg, #fff))
  --popup-fg: var(--s-popup-fg, var(--frame-fg, #111))
  --popup-shadow: 0 0 0 1px var(--s-popup-border, #00000016), 0 1px 16px 0 #00000032
  --popup-scrollbar-color: #00000046

// ---
// -- Plain theme
// -
#root[data-theme="plain"][data-density="default"]
  --general-border-radius: 2px
#root[data-theme="plain"][data-density="loose"]
  --general-border-radius: 3px
#root[data-theme="plain"][data-frame-color-scheme="dark"]
  --frame-el-bg: var(--toolbar-bg)
  --frame-el-fg: var(--toolbar-fg)
  --frame-el-shadow: 0 1px 1px 0 #0002
  --active-el-shadow: 0 1px 4px -1px #00000048, inset 0 0 0 1px var(--s-act-el-border, #fff1)
#root[data-theme="plain"][data-frame-color-scheme="light"]
  --frame-el-bg: var(--toolbar-bg)
  --frame-el-fg: var(--toolbar-fg)
  --frame-el-shadow: 0 1px 1px 0 #0002
  --active-el-shadow: 0 1px 4px -1px #00000042, inset 0 0 0 1px var(--s-act-el-border, #146fd9)

// ---
// -- Local color
// -
#root[data-toolbar-color-scheme="dark"]
  [data-color="inactive"]
    --color: #aaa
  [data-color="yellow"]
    --color: #ffcb00
  [data-color="purple"]
    --color: #c071fc
#root[data-toolbar-color-scheme="light"]
  [data-color="inactive"]
    --color: #646464
  [data-color="yellow"]
    --color: #f7c500
  [data-color="purple"]
    --color: #af51f5

[data-color="toolbar"]
  --color: var(--toolbar-fg)
[data-color="blue"]
  --color: #37adff
[data-color="turquoise"]
  --color: #00c79a
[data-color="green"]
  --color: #51cd00
[data-color="orange"]
  --color: #ff9f00
[data-color="red"]
  --color: #ff613d
[data-color="pink"]
  --color: #ff4bda

// ---
// -- Animation speed
// -
#root[data-animations="none"]
  --d-swift: 0s
  --d-fast: 0s
  --d-norm: 0s
  --d-slow: 0s
#root[data-animations="fast"]
  --d-swift: .1s
  --d-fast: .12s
  --d-norm: .2s
  --d-slow: .3s
#root[data-animations="norm"]
  --d-swift: .12s
  --d-fast: .16s
  --d-norm: .3s
  --d-slow: .42s
#root[data-animations="slow"]
  --d-swift: .16s
  --d-fast: .2s
  --d-norm: .3s
  --d-slow: .5s
