.button.is-info {
    background-color: var(--color-surface-info);
    border-color: transparent;
    color: var(--color-text-inverse);
}

.button.is-info:hover,
.button.is-info.is-hovered,
.button.is-info:active,
.button.is-info.is-active {
    background-color: var(--color-surface-accent-hover);
    border-color: transparent;
    color: var(--color-text-inverse);
}

.button.is-info:focus,
.button.is-info.is-focused {
    border-color: transparent;
    box-shadow: 0 0 0.5em var(--color-shadow-focus);
    color: var(--color-text-inverse);
}

.button.is-info[disabled] {
    background-color: var(--color-surface-info);
}

.button.is-info.is-inverted {
    background-color: var(--color-surface-raised);
    border-color: transparent;
    color: var(--color-surface-info);
}

.button.is-info.is-inverted:hover,
.button.is-info.is-inverted[disabled] {
    background-color: var(--color-surface-muted);
    color: var(--color-surface-info);
}

.button.is-info.is-loading::after {
    border-color: transparent transparent var(--color-text-inverse) var(--color-text-inverse) !important;
}

.button.is-info.is-outlined {
    background-color: transparent;
    border-color: var(--color-surface-info);
    color: var(--color-surface-info);
}

.button.is-info.is-outlined:hover,
.button.is-info.is-outlined:focus {
    background-color: var(--color-surface-info);
    border-color: var(--color-surface-info);
    color: var(--color-text-inverse);
}

.button.is-info.is-outlined.is-loading::after {
    border-color: transparent transparent var(--color-surface-info) var(--color-surface-info) !important;
}

.button.is-info.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-surface-info);
    color: var(--color-surface-info);
}

.button.is-info.is-inverted.is-outlined {
    background-color: transparent;
    border-color: var(--color-text-inverse);
    color: var(--color-text-inverse);
}

.button.is-info.is-inverted.is-outlined:hover,
.button.is-info.is-inverted.is-outlined:focus {
    background-color: var(--color-surface-raised);
    border-color: var(--color-surface-raised);
    color: var(--color-surface-info);
}

.button.is-info.is-inverted.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-text-inverse);
    color: var(--color-text-inverse);
}

/* The Add control that closes an editable table.
 *
 * Marked with .is-add in the markup rather than inferred from where it sits. There is no structural
 * signal that says "this button adds a row": the previous rule for it named three panel ids, which
 * silently missed the four EHR partials that call their panel something else, Dr. Chrono among them.
 * A class travels with the button, so a panel added later is styled by being written correctly
 * rather than by somebody remembering to extend a list in a stylesheet.
 *
 * Kept alongside .is-primary rather than replacing it, so the button still reads as a primary
 * control everywhere the role is not re-pointed, and so removing this rule leaves it styled.
 *
 * Fill, frame and label are drawn from three roles rather than one, so a brand can invert the
 * control instead of only recolouring it. tokens.css wires all three to the primary action, where
 * border and fill are the same colour and the button reads as a fill; a brand that parts them gets
 * an outline out of the same rule. Nimblr renders byte-identically to before. */
.button.is-primary.is-add {
    background-color: var(--color-surface-add);
    border-color: var(--color-border-add);
    color: var(--color-text-add);
}

.button.is-primary.is-add:hover,
.button.is-primary.is-add.is-hovered,
.button.is-primary.is-add:active,
.button.is-primary.is-add.is-active {
    background-color: var(--color-surface-add-hover);
    border-color: var(--color-border-add);
    color: var(--color-text-add);
}

.button.is-primary.is-add[disabled] {
    background-color: var(--color-surface-add);
    border-color: var(--color-border-add);
    color: var(--color-text-add);
}