button {
    border-style: solid;
    border-width: 2px;
    border-radius: 7px;
    padding: 4px 6px;
    white-space: nowrap;
    font-weight: bold;
    background-color: var(--form-background);
}

button:enabled {
    cursor: pointer;
    border-color: var(--border-color);
    color: var(--text-color);
}

button:disabled {
    cursor: not-allowed;
    border-color: var(--ghost-color);
    color: var(--ghost-color);
    text-decoration: line-through;
}

button:disabled > svg.icon {
    fill: var(--ghost-color);
}

/* buttons highlight blue on hover */
button:enabled:hover {
    border-color: var(--link-color);
	color: var(--link-color);
}

button:enabled:hover > svg.icon {
    fill: var(--link-color);
}

/* update buttons highlight orange on hover */
button.update:enabled:hover {
	border-color: orangered;
	color: orangered;
}

button.update:enabled:hover > svg.icon {
    fill: orangered;
}

/* delete buttons highlight red on hover */
button.delete:enabled:hover {
    border-color: red;
    color: red;
}

button.delete:enabled:hover > svg.icon {
    fill: red;
}