@property --press-feedback-enabled {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

:root {
    --press-feedback-shadow: 0 8px 18px var(--shadow-card);
    --press-feedback-curve: cubic-bezier(0.2, 0, 0, 1);
    --press-feedback-shape-ease: cubic-bezier(0.05, 0.7, 0.1, 1);
    --press-feedback-spatial-spring: linear(
        0, 0.19 4%, 0.62 9%, 1.02 14%, 1.25 19%, 1.3 24%, 1.24 29%,
        1.09 36%, 0.98 43%, 0.94 50%, 0.97 60%, 1.01 72%, 1.005 84%, 1 100%
    );
    --press-feedback-active-scale: 0.96;
    --press-feedback-release-transition:
        border-radius 300ms var(--press-feedback-shape-ease),
        transform 350ms var(--press-feedback-spatial-spring),
        box-shadow 200ms var(--press-feedback-curve),
        background-color 150ms ease-out,
        border-color 150ms ease-out;
    --press-feedback-press-transition:
        border-radius 120ms var(--press-feedback-curve),
        transform 120ms var(--press-feedback-curve),
        box-shadow 120ms var(--press-feedback-curve),
        background-color 120ms ease-out,
        border-color 120ms ease-out;

    --press-feedback-active-transform: scale(var(--press-feedback-active-scale));
    --press-feedback-transition: var(--press-feedback-release-transition);
    --press-feedback-focus-shadow:
        0 0 0 2px var(--color-light, var(--field-bg)),
        0 0 0 4px var(--accent);
}

:is(
    .btn,
    .dropdown-item,
    .pill-btn,
    .settings-nav-link,
    .pill-action-btn,
    .pill-toggle-btn,
    .floating-toggle-btn,
    .mobile-control-btn,
    .mobile-control-btn-back,
    .mobile-pledge-action-button,
    .mobile-pledge-actions-btn,
    .stack-btn,
    .data-grid-mobile-pill-actions-btn,
    .pill-save-btn,
    .pledges-clear-filters-btn,
    .pledges-search-advanced-toggle,
    .tx-detail-action-btn,
    .app-modal-btn-primary,
    .app-modal-btn-secondary,
    .app-modal-btn-danger,
    .app-modal-btn-danger-outline,
    .settings-btn-primary,
    .settings-btn-secondary,
    .settings-comm-history-btn,
    .settings-upload-btn,
    .settings-media-panel__dropzone,
    .settings-remove-btn,
    .toolbar-btn,
    .toolbar-btn-icon,
    .dark_button,
    .dark_button_hundred,
    .dark_button_not_hundred,
    .white_button_not_hundred,
    .red_button,
    .recent-pledges-view-all,
    .help-button,
    .help-prev-step-btn,
    .zoom-btn,
    .zoom-toggle-btn,
    .action-btn,
    .data-grid-paginate-btn,
    .sliding-filter-btn,
    .sidebar-action-btn,
    .sidebar-toggle-btn-inline,
    .column-layout-save-btn,
    .campaign-icon-picker-btn,
    .bottom-bar-reload-btn,
    .compact-btn,
    .seating_buttons,
    .seating_buttons_small,
    .seating_buttons_danger,
    .seating_group_button,
    .log_button_manager,
    .button_flip_mgr_mbr,
    .payment_button,
    .main_page_button,
    .mass_comm_active,
    .send_invoice_active,
    .pay_save_button,
    .process_cc_button
):not(:disabled):not(.disabled),
.press-feedback {
    --press-feedback-enabled: 1;
    transition: var(--press-feedback-transition);
    -moz-user-select: none;
         user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    &:is(:focus, :focus-visible) {
        outline: none !important;
    }

    &:focus-visible:is(.no-press-feedback, :not(.is-pressed, :focus-visible:active)) {
        box-shadow: var(--press-feedback-focus-shadow) !important;
    }

    &:not(.no-press-feedback):is(.is-pressed, :focus-visible:active) {
        transition: var(--press-feedback-press-transition);
        box-shadow: var(--press-feedback-active-shadow, var(--press-feedback-shadow));
        border-radius: var(--press-feedback-active-radius, var(--press-feedback-radius-pressed, 10px));
        transform: var(--press-feedback-active-transform);
    }
}

:is(
    .data-grid-row,
    .data-grid-mobile-pill-actions-btn,
    .data-grid-mobile-pill
).press-feedback {
    --press-feedback-active-transform: none;
}

.press-feedback-square {
    --press-feedback-radius-rest: 16px;
    --press-feedback-radius-pressed: 30px;
    border-radius: var(--press-feedback-radius-rest);
}

.press-feedback-round {
    --press-feedback-radius-rest: 28px;
    --press-feedback-radius-pressed: 10px;
    border-radius: var(--press-feedback-radius-rest);
}

:is(
    .table-grid-page-host,
    .pledges-content-container,
    .members-manager-page,
    .page-header-card,
    .page-header-card-mobile,
    .topBar
) .btn-group .pill-btn.press-feedback.dropdown-toggle:not(.dropdown-toggle-split):is(.is-pressed, :focus-visible:active) {
    border-radius: var(--press-feedback-active-radius, var(--press-feedback-radius-pressed, 10px));
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --press-feedback-release-transition: none;
        --press-feedback-press-transition: none;
        --press-feedback-transition: none;
    }
}