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

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

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

.action-button.action-button-primary:active {
    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 {
    background-color: var(--color-ui-neutral-dark-hover);
    color: var(--color-p-light-hover);
}

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