/* Shared action buttons. Change these tokens to update every page and dialog.
   Container styles control placement and responsive widths only. */
:root {
    --action-button-font-size: .72rem;
    --action-button-line-height: 1.25;
    --action-button-min-height: 38px;
    --action-button-padding-block: 10px;
    --action-button-padding-inline: 12px;
    --action-button-radius: 10px;
    --action-button-gap: 6px;
    --action-button-primary-background: var(--green);
    --action-button-primary-hover: var(--green-2);
    --action-button-primary-text: #fff;
    --action-button-primary-weight: 800;
    --action-button-secondary-background: #fff;
    --action-button-secondary-text: var(--ink);
    --action-button-secondary-border: var(--border);
    --action-button-secondary-hover: #f4f8f6;
    --action-button-secondary-hover-border: #aac4ba;
    --action-button-secondary-weight: 750;
    --action-button-focus-color: var(--green-2);
    --action-button-disabled-opacity: .55;
}

.primary-action,
.secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--action-button-gap);
    min-height: var(--action-button-min-height);
    padding: var(--action-button-padding-block) var(--action-button-padding-inline);
    border: 1px solid transparent;
    border-radius: var(--action-button-radius);
    font-family: inherit;
    font-size: var(--action-button-font-size);
    line-height: var(--action-button-line-height);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s, border-color .16s, color .16s, transform .16s;
}

.primary-action {
    border-color: var(--action-button-primary-background);
    background: var(--action-button-primary-background);
    color: var(--action-button-primary-text);
    font-weight: var(--action-button-primary-weight);
}

.secondary-action {
    border-color: var(--action-button-secondary-border);
    background: var(--action-button-secondary-background);
    color: var(--action-button-secondary-text);
    font-weight: var(--action-button-secondary-weight);
}

.primary-action:hover:not(:disabled) {
    background: var(--action-button-primary-hover);
}

.secondary-action:hover:not(:disabled):not(.active):not([aria-current="page"]) {
    border-color: var(--action-button-secondary-hover-border);
    background: var(--action-button-secondary-hover);
}

.primary-action:focus-visible,
.secondary-action:focus-visible {
    outline: 2px solid var(--action-button-focus-color);
    outline-offset: 2px;
}

.primary-action:active:not(:disabled),
.secondary-action:active:not(:disabled) {
    transform: translateY(1px);
}

.primary-action:disabled,
.secondary-action:disabled {
    opacity: var(--action-button-disabled-opacity);
    cursor: not-allowed;
}