button,
scale slider {
    border-radius: 3px;
    padding: 0.5em;
    border-width: 1px;
    background-color: @button_bg_color;
    color: @button_fg_color;
}

button.suggested-action {
    background-color: @selected_bg_color;
    color: @selected_fg_color;
    border-color: @selected_bg_color;
}

.toolbar > button,
button.flat {
    background: none;
    color: inherit;
    border-color: transparent;
}

button:hover,
scale:hover slider {
    background-color: mix(@button_bg_color, @button_fg_color, 0.1);
    color: @button_fg_color;
}

button.suggested-action:hover {
    background-color: mix(@selected_bg_color, @selected_fg_color, 0.1);
    color: @selected_fg_color;
}

.toolbar > button:hover,
.toolbar > button:active,
.toolbar > button:checked,
button.flat:hover,
button.flat:active,
button.flat:checked {
    border-color: @border_color;
}

button:checked {
    background-color: mix(@button_bg_color, @button_fg_color, 0.2);
    color: @fg_color;
}

button:active {
    background-color: mix(@button_bg_color, @button_fg_color, 0.3);
    color: @fg_color;
}

button.suggested-action:active {
    background-color: mix(@selected_bg_color, @selected_fg_color, 0.3);
    color: @selected_fg_color;
}

button:disabled:disabled,
scale:disabled:disabled slider {
    background: @bg_color;
    color: @fg_color;
}

button.circular {
    border-radius: 1000px;
    min-width: 1.2em;
}

button.link {
    color: @focus_color;
}
button.link:hover {
    color: mix(@focus_color, @fg_color, 0.2);
}
button.link:active {
    color: mix(@focus_color, @fg_color, 0.5);
}
button.link > label {
    text-decoration: underline;
}

.linked:not(.vertical) > button:not(:first-child),
.linked:not(.vertical) > entry:not(:first-child),
.linked:not(.vertical) > combobox:not(:first-child) button.combo {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.linked:not(.vertical) > button:not(:last-child),
.linked:not(.vertical) > entry:not(:last-child),
.linked:not(.vertical) > combobox:not(:last-child) button.combo {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.linked:not(.vertical) > button:not(:last-child),
.linked:not(.vertical) > entry:not(:last-child) {
    border-right-width: 0;
}
.linked:not(.vertical) > :focus + button,
.linked:not(.vertical) > :focus + entry {
    border-left-color: @focus_color;
}

.linked.vertical > button:not(:first-child),
.linked.vertical > entry:not(:first-child),
.linked.vertical > combobox:not(:first-child) button.combo {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.linked.vertical > button:not(:last-child),
.linked.vertical > entry:not(:last-child),
.linked.vertical > combobox:not(:last-child) button.combo {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.linked.vertical > button:not(:last-child),
.linked.vertical > entry:not(:last-child) {
    border-bottom-width: 0;
}
.linked.vertical > :focus + button,
.linked.vertical > :focus + entry {
    border-top-color: @focus_color;
}

spinbutton {
    border-width: 1px;
}
spinbutton text,
spinbutton entry {
    padding: 0.5em;
    border-width: 0;
}
spinbutton:not(.vertical) text,
spinbutton:not(.vertical) entry {
    min-width: 1.5em;
}
spinbutton.vertical text,
spinbutton.vertical entry {
    min-height: 1.5em;
}
spinbutton button {
    border-radius: 0;
}
spinbutton:not(.vertical) button {
    border-width: 0 0 0 1px;
}
spinbutton.vertical button.up {
    border-width: 0 0 1px;
}
spinbutton.vertical button.down {
    border-width: 1px 0 0;
}
spinbutton button:focus {
    border-color: @border_color;
}

switch {
    border-width: 1px;
    border-radius: 1000px;
    background-color: @base_color;
    color: @text_color;
}

switch:checked {
    background: @selected_bg_color;
    color: @selected_fg_color;
}

switch slider {
    margin: 0.4em;
    min-width: 1em;
    min-height: 1em;
    border-radius: 1000px;
    background: currentColor;
}

/* hide on/off icons */
switch image,
switch image:disabled:disabled {
    color: transparent;
}

button separator {
    min-width: 1px;
    background-color: @border_color;
}

.image-text-button image {
    margin-right: 0.5em;
}