_variables.scss

/*-------------------------------------------*\
    Variables
\*-------------------------------------------*/

:root {
    --sans-serif: "Pixelated MS Sans Serif", Arial;
    /* Color */
    --surface: lightblue;
    --button-highlight: #ffffff;
    --button-face: #dfdfdf;
    --button-shadow: #808080;
    --window-frame: #0a0a0a;
    --dialog-blue: #000080;
    --dialog-blue-light: #1084d0;
    --link-blue: #0000ff;

    /* Spacing */
    --element-spacing: 8px;
    --grouped-button-spacing: 4px;
    --grouped-element-spacing: 6px;
    --radio-width: 12px;
    --checkbox-width: 13px;
    --radio-label-spacing: 6px;
    --range-track-height: 4px;
    --range-spacing: 10px;

    /* Some detailed computations for radio buttons and checkboxes */
    --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
    --radio-total-width: calc(var(--radio-total-width-precalc));
    --radio-left: calc(-1 * var(--radio-total-width-precalc));
    --radio-dot-width: 4px;
    --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
    --radio-dot-left: calc(
        -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(--radio-dot-width) / 2
    );
    --checkbox-total-width-precalc: var(--checkbox-width) + var(--radio-label-spacing);
    --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
    --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
    --checkmark-width: 7px;
    --checkmark-top: 3px;
    --checkmark-left: 3px;

    /* Borders */
    --border-width: 1px;
    --border-raised-outer: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-highlight);
    --border-raised-inner: inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-face);
    --border-sunken-outer: inset -1px -1px var(--button-highlight), inset 1px 1px var(--window-frame);
    --border-sunken-inner: inset -2px -2px var(--button-face), inset 2px 2px var(--button-shadow);

    /* Window borders flip button-face and button-highlight */
    --border-window-outer: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-face);
    --border-window-inner: inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);
    --border-field: inset -1px -1px var(--button-highlight), inset 1px 1px var(--button-shadow),
        inset -2px -2px var(--button-face), inset 2px 2px var(--window-frame);

    --border-status-bar-field: inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow);
}