.action-button {
    border-radius: 0.5em;
    margin: 0.5em;
    cursor: pointer;
    border: none;
}

.action-button.disabled {
    cursor: default;
    opacity: 50%;
}

.action-button.action-button-primary {
    background-color: var(--color-ui-accent);
    color: var(--color-p-light);
}
.action-button.action-button-primary:hover:not.disabled {
    background-color: var(--color-ui-accent-hover);
    color: var(--color-p-light-hover);
}
.action-button.action-button-primary:active:not.disabled {
    background-color: var(--color-ui-accent-active);
    color: var(--color-p-light-active);
}

.action-button.action-button-secondary {
    background-color: var(--color-ui-neutral-dark);
    color: var(--color-p-light);
}
.action-button.action-button-secondary:hover:not.disabled {
    background-color: var(--color-ui-neutral-dark-hover);
    color: var(--color-p-light-hover);
}
.action-button.action-button-secondary:active:not.disabled {
    background-color: var(--color-ui-neutral-dark-active);
    color: var(--color-p-light-active);
}