:root {
    /* Slint colors */
    --color_baby_blue: #667cff;
    --color_blue: #2379f4;
    --color_dark: #151d21;
    --color_dark_20: #d0d2d3;
    --color_dark_40: #a1a5a6;
    --color_dark_80: #444a4d;
    --color_dark_gray: #73777a;
    --color_dark_blue: #250ce8;
    --color_deep_indigo: #1f284d;
    --color_focus_blue: #3573d8;
    --color_gray: #e8e9e9;
    --color_ice_blue: #0db1ff;
    --color_light_blue: #f2f4ff;
    --color_light_gray_2: #b8bbbc;
    --color_light_purple: #99a8ff;
    --color_medium_gray: #939393;
    --color_purple: #6b0dff;

    --color_white: #ffffff;

    /* style properties */
    --highlight-bg: var(--color_focus_blue);
    --highlight-fg: var(--color_white);

    --highlight2-bg: var(--vscode-input-foreground);
    --highlight2-fg: var(--vscode-input-background);

    --undefined-bg: var(--vscode-background);
    --undefined-fg: var(--vscode-disabledForeground);
}

.properties-editor {
    padding: 0;
}

.properties-editor .welcome-page {
    color: var(--vscode-disabledForeground);
    padding: 10px 22px 0;
}

.properties-editor .element-header {
    background: var(--highlight-bg);
    color: var(--highlight-fg);
    font-size: 140%;
    font-weight: bold;

    width: 100%;
    height: 50px;
    padding: 5px;
}

.properties-editor .name-column {
    white-space: nowrap;
    padding-left: 5px;
}

.properties-editor .value-column {
    width: 100%;
}

.properties-editor .value-column-content {
    display: flex;
}

.properties-editor .properties-table {
    width: 100%;
}

.properties-editor .properties-table .group-header td {
    background-color: var(--highlight2-bg);
    color: var(--highlight2-fg);
    font-weight: bold;
    padding: 0 5px;
}

.properties-editor .properties-table .undefined {
    background-color: var(--undefined-bg);
    color: var(--undefined-fg);
}

.properties-editor .properties-table input {
    margin: 0px;
    border: none;
    width: 100%;
}

.properties-editor .properties-table input.value-changed {
    color: var(--vscode-inputValidation-infoBorder);
}