[text]
base = { family = "Inconsolata", size = 15 }

[workspace]
background = "$surface.0"
pane_divider = { width = 1, color = "$border.0" }

[workspace.titlebar]
height = 32
border = { width = 1, bottom = true, color = "$border.0" }
title = "$text.0"
avatar_width = 18
avatar = { corner_radius = 10, border = { width = 1, color = "#00000088" } }
avatar_ribbon = { background = "#ff0000", height = 3, width = 12 }
outdated_warning = { extends = "$text.2", size = 13 }
share_icon_color = "$text.2.color"
share_icon_active_color = "$text.0.color"

[workspace.titlebar.sign_in_prompt]
extends = "$text.2"
size = 13
underline = true
padding = { right = 8 }

[workspace.titlebar.hovered_sign_in_prompt]
extends = "$workspace.titlebar.sign_in_prompt"
color = "$text.1.color"

[workspace.titlebar.offline_icon]
padding = { right = 4 }
width = 16
color = "$text.2.color"

[workspace.tab]
height = 34
text = "$text.2"
padding = { left = 12, right = 12 }
icon_width = 8
spacing = 10
icon_close = "$text.2.color"
icon_close_active = "$text.0.color"
icon_dirty = "$status.info"
icon_conflict = "$status.warn"
border = { left = true, bottom = true, width = 1, color = "$border.0", overlay = true }

[workspace.active_tab]
extends = "$workspace.tab"
border.bottom = false
background = "$surface.1"
text = "$text.0"

[workspace.sidebar]
width = 30
border = { right = true, width = 1, color = "$border.0" }

[workspace.sidebar.resize_handle]
padding = { left = 1 }
background = "$border.0"

[workspace.sidebar.item]
icon_color = "$text.2.color"
icon_size = 18
height = "$workspace.tab.height"

[workspace.sidebar.active_item]
extends = "$workspace.sidebar.item"
icon_color = "$text.0.color"

[workspace.left_sidebar]
extends = "$workspace.sidebar"
border = { width = 1, color = "$border.0", right = true }

[workspace.right_sidebar]
extends = "$workspace.sidebar"
border = { width = 1, color = "$border.0", left = true }

[workspace.status_bar]
padding = { left = 6, right = 6 }
height = 24
cursor_position = "$text.2"
diagnostic_message = "$text.2"
diagnostic_icon_size = 18
diagnostic_icon_spacing = 8
diagnostic_icon_color = "$text.2.color"

[panel]
padding = { top = 12, left = 12, bottom = 12, right = 12 }

[chat_panel]
extends = "$panel"
channel_name = { extends = "$text.0", weight = "bold" }
channel_name_hash = { text = "$text.2", padding.right = 8 }

[chat_panel.message]
body = "$text.1"
sender = { extends = "$text.0", weight = "bold", margin.right = 8 }
timestamp = "$text.2"
padding.bottom = 6

[chat_panel.pending_message]
extends = "$chat_panel.message"
body = { color = "$text.3.color" }
sender = { color = "$text.3.color" }
timestamp = { color = "$text.3.color" }

[chat_panel.channel_select.item]
padding = 4
name = "$text.1"
hash = { extends = "$text.2", margin.right = 8 }

[chat_panel.channel_select.hovered_item]
extends = "$chat_panel.channel_select.item"
background = "$state.hover"
corner_radius = 6

[chat_panel.channel_select.active_item]
extends = "$chat_panel.channel_select.item"
name = "$text.0"

[chat_panel.channel_select.hovered_active_item]
extends = "$chat_panel.channel_select.hovered_item"
name = "$text.0"

[chat_panel.channel_select.header]
extends = "$chat_panel.channel_select.active_item"
padding.bottom = 4
padding.left = 0

[chat_panel.channel_select.menu]
padding = 4
corner_radius = 6
border = { color = "$border.0", width = 1 }
background = "$surface.0"
shadow = { offset = [0, 2], blur = 16, color = "$shadow.0" }

[chat_panel.input_editor]
background = "$surface.1"
corner_radius = 6
padding = { left = 8, right = 8, top = 7, bottom = 7 }
text = "$text.0"
placeholder_text = "$text.2"
selection = "$selection.host"
border = { width = 1, color = "$border.0" }

[chat_panel.sign_in_prompt]
extends = "$text.0"
underline = true

[chat_panel.hovered_sign_in_prompt]
extends = "$chat_panel.sign_in_prompt"
color = "$text.1.color"

[contacts_panel]
extends = "$panel"
host_row_height = 28
host_avatar = { corner_radius = 10, width = 18 }
host_username = { extends = "$text.0", padding.left = 8 }
tree_branch_width = 1
tree_branch_color = "$surface.2"

[contacts_panel.project]
height = 24
padding = { left = 8 }
guest_avatar = { corner_radius = 8, width = 14 }
guest_avatar_spacing = 4

[contacts_panel.project.name]
extends = "$text.1"
margin = { right = 6 }

[contacts_panel.unshared_project]
extends = "$contacts_panel.project"

[contacts_panel.hovered_unshared_project]
extends = "$contacts_panel.unshared_project"
background = "$state.hover"
corner_radius = 6

[contacts_panel.shared_project]
extends = "$contacts_panel.project"
name.color = "$text.0.color"

[contacts_panel.hovered_shared_project]
extends = "$contacts_panel.shared_project"
background = "$state.hover"
corner_radius = 6

[project_panel]
extends = "$panel"
padding.top = 6    # ($workspace.tab.height - $project_panel.entry.height) / 2

[project_panel.entry]
text = "$text.1"
height = 22
icon_color = "$text.3.color"
icon_size = 8
icon_spacing = 8

[project_panel.hovered_entry]
extends = "$project_panel.entry"
background = "$state.hover"

[project_panel.selected_entry]
extends = "$project_panel.entry"
text = { extends = "$text.0" }

[project_panel.hovered_selected_entry]
extends = "$project_panel.hovered_entry"
text = { extends = "$text.0" }

[selector]
background = "$surface.0"
padding = 8
margin = { top = 52, bottom = 52 }
corner_radius = 6
shadow = { offset = [0, 2], blur = 16, color = "$shadow.0" }
border = { width = 1, color = "$border.0" }

[selector.input_editor]
background = "$surface.1"
corner_radius = 6
padding = { left = 16, right = 16, top = 7, bottom = 7 }
text = "$text.0"
placeholder_text = "$text.2"
selection = "$selection.host"
border = { width = 1, color = "$border.0" }

[selector.empty]
text = "$text.2"
padding = { left = 16, right = 16, top = 8, bottom = 4 }

[selector.item]
text = "$text.1"
highlight_text = { extends = "$text.base", color = "$editor.syntax.keyword.color", weight = "$editor.syntax.keyword.weight" }
padding = { left = 16, right = 16, top = 4, bottom = 4 }
corner_radius = 6

[selector.active_item]
extends = "$selector.item"
background = "$state.hover"
text = "$text.0"

[editor]
text = "$text.1"
background = "$surface.1"
gutter_background = "$surface.1"
active_line_background = "$state.active_line"
highlighted_line_background = "$state.highlighted_line"
line_number = "$text.2.color"
line_number_active = "$text.0.color"
selection = "$selection.host"
guest_selections = "$selection.guests"
error_color = "$status.bad"
invalid_error_diagnostic = { text = "$text.3.color" }
invalid_warning_diagnostic = { text = "$text.3.color" }
invalid_information_diagnostic = { text = "$text.3.color" }
invalid_hint_diagnostic = { text = "$text.3.color" }

[editor.diagnostic_path_header]
text = "$text.0.color"
header.background = "#ffffff08"
header.border = { width = 1, top = true, color = "$border.0" }

[editor.error_diagnostic]
text = "$status.bad"
header.border = { width = 1, top = true, color = "$border.0" }

[editor.warning_diagnostic]
text = "$status.warn"
header.border = { width = 1, top = true, color = "$border.0" }

[editor.information_diagnostic]
text = "$status.info"
border = { width = 1, top = true, color = "$border.0" }

[editor.hint_diagnostic]
text = "$status.info"
border = { width = 1, top = true, color = "$border.0" }

[project_diagnostics]
background = "$surface.1"
empty_message = "$text.0"
status_bar_item = { extends = "$text.2", margin.right = 10 }