body {
    --deft-border-color: #BCBEBF;
    --deft-highlight-border-color: #3DAEE9;
    --deft-disabled-border-color: #DADBDB;

    --deft-default-color: #010101;
    --deft-disabled-color: #A8A9AA;
    --deft-placeholder-color: #666;

    --deft-disabled-placeholder-color: #A8A9AA;

    --deft-highlight-background: #3DAEE9;
    --deft-disabled-background: #f0f0f0;
    --deft-form-control-background: #FCFCFC;
    --deft-button-background: #FCFCFC;
    --deft-body-background: #EFF0F1;

    --deft-scrollbar-background: #E1E1E1;
    --deft-scrollbar-thumb-background: #C1C1C1;

    --deft-dialog-title-background: #E1E3E4;
    --deft-tooltip-border-color: #c7ced5;

    color: var(--deft-default-color);
    background: var(--deft-body-background);
    font-size: 14px;
}

*::scrollbar, *::scrollbar {
    background: var(--deft-scrollbar-background);
}

*::scrollbar-thumb, *::scrollbar-thumb {
    background: var(--deft-scrollbar-thumb-background);
}

body[theme="dark"] {
    --deft-border-color: #6E7175;
    --deft-highlight-border-color: #5993B2;
    --deft-disabled-border-color: #3A3D41;

    --deft-default-color: #f0f0f0;
    --deft-disabled-color: #727679;
    --deft-placeholder-color: #A1A9B1;

    --deft-disabled-placeholder-color: #5A5D63;

    --deft-highlight-background: #3DAEE9;
    --deft-disabled-background: #2F3338;
    --deft-form-control-background: #1B1E20;
    --deft-button-background: #31363B;
    --deft-body-background: #2A2E32;

    --deft-scrollbar-background: #1B1E20;
    --deft-scrollbar-thumb-background: #424546;

    --deft-dialog-title-background: #31363B;
    --deft-tooltip-border-color: #8b9298;
}

tooltip {
    border: 1px var(--deft-tooltip-border-color);
    padding: 0.2em 0.6em;
}

dialog {
    background: var(--deft-body-background);
    border: 1px var(--deft-border-color);
}

dialog-title {
    width: 100%;
    background: var(--deft-dialog-title-background);
    border-bottom: 1px var(--deft-border-color);
    padding: 4px 10px;
}

button {
    background: var(--deft-button-background);
    border: 1px var(--deft-border-color);
    border-radius: 3px;
    padding: 4px 8px;
}
button:hover {
    border: 1px var(--deft-highlight-border-color);
}
button[disabled], button[disabled]:hover {
    color: var(--deft-disabled-color);
    background: var(--deft-disabled-background);
    border: 1px var(--deft-disabled-border-color);
}

checkbox::box {
    width: 1.2em;
    height: 1.2em;
    margin-right: 2px;
    border: 1px var(--deft-border-color);
    border-radius: 2px;
}

checkbox:hover::box {
    border: 1px var(--deft-highlight-border-color);
}
checkbox[checked]::box {
    background: var(--deft-form-control-background);
    border: 1px var(--deft-highlight-border-color);
}

checkbox[disabled], checkbox[disabled]:hover {
    color: var(--deft-disabled-color);
}

checkbox[disabled]::box, checkbox[disabled]:hover::box {
    border: 1px var(--deft-disabled-border-color);
}

radiogroup {
    flex-direction: row;
    gap: 10px;
}


radio::box {
    width: 1.2em;
    height: 1.2em;
    margin-right: 2px;
    border: 1px var(--deft-border-color);
    border-radius: 0.6em;
}

radio:hover::box {
    border: 1px var(--deft-highlight-border-color);
}
radio[checked]::box {
    background: var(--deft-form-control-background);
    border: 1px var(--deft-highlight-border-color);
}
radio[disabled], radio[disabled]:hover {
    color: var(--deft-disabled-color);
}

radio[disabled]::box, radio[disabled]:hover::box {
    border: 1px var(--deft-disabled-border-color);
}


text-input, text-edit {
    background: var(--deft-form-control-background);
    border: 1px var(--deft-border-color);
    border-radius: 3px;
    min-height: 2em;
    padding: 4px;
    overflow: auto;
}

text-input, entry {
    height: 2em;
}

text-edit {
    overflow: auto;
    height: 5em;
}

text-input:hover, text-edit:hover {
    border: 1px var(--deft-highlight-border-color);
}
text-input:focus, text-edit:focus {
    border: 1px var(--deft-highlight-border-color);
}
text-input::placeholder, text-edit::placeholder {
    color: var(--deft-placeholder-color);
}
text-input[disabled], text-edit[disabled], text-input[disabled]:hover, text-edit[disabled]:hover {
    background: var(--deft-disabled-background);
    border: 1px var(--deft-disabled-border-color);
    color: var(--deft-disabled-color);
}
text-input[disabled]::placeholder, text-edit[disabled]::placeholder {
    color: var(--deft-disabled-placeholder-color);
}

menu {
    border: var(--deft-border-color) 1px;
    padding: 3px;
}
menu-item-standard {
    padding: 4px 12px;
}
menu-item-standard:hover {
    background: var(--deft-highlight-background);
}
menu-item-standard[disabled], menu-item-standard[disabled]:hover {
    color: var(--deft-disabled-color);
    background: transparent;
}
menu-item-separator {
    background: var(--deft-disabled-color);
    height: 1px;
    width: 100%;
    margin: 3px 0;
}

select {
    background: var(--deft-form-control-background);
    border: 1px var(--deft-border-color);
    border-radius: 2px;
    padding: 2px 6px;
    height: 2em;
}
select:hover {
    border: 1px var(--deft-highlight-border-color);
}
select::options {
    background: var(--deft-form-control-background);
    color: inherit;
    border: 1px var(--deft-border-color);
    padding: 1px 0;
    font-size: inherit;
}
select::option {
    padding: 4px 6px;
}
select::option-hover {
    background: var(--deft-highlight-background);
}
select::placeholder {
    color: var(--deft-placeholder-color);
}
select[disabled], select[disabled]:hover {
    background: var(--deft-disabled-background);
    color: var(--deft-disabled-color);
    border: 1px var(--deft-disabled-border-color);
}
select[disabled]::placeholder {
    color: var(--deft-disabled-placeholder-color);
}