@source('./images/light');  /* Specify the image resource path */
@parent('clam');  /* Set parent theme (default is clam) */


$bg-color: #fafafa;
$fg-color: #202020;
$disabled-color: #a0a0a0;
$select-color: #ffffff;
$select-bg-color: #2f60d8;


* {
    /* Global settings */
    font-family: 'Segoe UI', sans;
    font-size: 10px;
    background: $bg-color;
    color: $fg-color;
    field-background: $bg-color;
}

*:focus {
    color: $select-bg-color;
}

*:disabled {
    color: $disabled-color;
}

*::caret {
    /* Global caret-styling */
    width: 1px;
    color: $fg-color;
}

*::selection {
    /* Global selection colors */
    background: $select-bg-color;
    color: $select-color;
}

button,
button:selected {
    image: $button-rest;  /* Use a loaded image for the widget */
    border: 4px;  /* How much to crop them image when stretching */
    padding: 8px 4px;  /* Padding inside the widget */
    anchor: center;
    sticky: nsew;
}

button:hover {
    image: $button-hover;
    color: #1a1a1a;
}

button:pressed {
    image: $button-pressed;
    color: #636363;
}

button:disabled,
button:selected:disabled {
    image: $button-disabled;
    color: #a2a2a2;
}