/*
 * Something happens when you press.
 *
 * Measured against the loaded stylesheets on three screens: not one of the
 * twenty-seven kinds of pressable thing on the dashboard had an `:active`
 * rule that matched it. Rows, cards, tabs, table rows, contact links, pager
 * links — you can hover them on a desktop and nothing at all acknowledges a
 * press, on any device.
 *
 * On a phone that is the whole story, because there is no hover. You tap a
 * client row and the screen sits there until the next page arrives. Half a
 * second of nothing is what makes software feel slow even when it isn't —
 * the work is already happening, it just never said so.
 *
 * The rule this follows: press feedback fires on pointer-down and is
 * immediate. It is not an animation. `:active` applies for exactly as long as
 * the finger is down, so the acknowledgement is honest — it tracks the press
 * rather than playing a fixed-length clip after it.
 *
 * Two kinds of response, chosen by what the thing is:
 *
 *   Buttons and small controls scale down slightly. They read as physical
 *   objects, and a physical object gives when pressed.
 *
 *   Rows, cards and list items darken instead. Scaling a full-width row looks
 *   like the layout broke; a background shift reads as "this one, selected".
 */

/* ==========================================================================
   Buttons: they give under the finger
   ========================================================================== */

/*
 * 0.97 is small enough to read as pressure rather than as movement, and the
 * 90ms is a floor rather than a duration — the transform is applied on
 * pointer-down and released on pointer-up, so the finger controls the timing.
 */
.btn:active,
button:active,
[role="button"]:active,
.ov-act:active,
.bulk-bar__btn:active,
.bulk-bar__clear:active,
.tp-menu__btn:active,
.as-trigger:active,
.cp-trigger:active,
.notif-trigger:active,
.dash-head-link:active,
.swa-btn:active {
    transform: scale(.97);
}

/* Small square controls have less room to move before it looks broken. */
.notif-trigger:active,
.cp-trigger:active,
.dash-head-link:active,
.row-acts button:active {
    transform: scale(.93);
}

/*
 * The transition is on the *release*, not the press. Going down is instant —
 * that is the whole point — and coming back up is eased so it does not snap.
 */
.btn,
button,
[role="button"],
.ov-act,
.bulk-bar__btn,
.tp-menu__btn,
.as-trigger,
.cp-trigger,
.notif-trigger,
.dash-head-link {
    transition: transform .16s cubic-bezier(.2, 0, 0, 1),
                background-color .16s cubic-bezier(.2, 0, 0, 1);
}

.btn:active,
button:active,
[role="button"]:active,
.ov-act:active,
.bulk-bar__btn:active,
.cp-trigger:active,
.notif-trigger:active,
.dash-head-link:active {
    transition-duration: 0s;
}

/* ==========================================================================
   Rows and list items: they darken
   ========================================================================== */

/*
 * A row is not an object you push, it is a region you choose. Scaling one
 * would drag its neighbours' alignment with it; a background shift says
 * "this one" without moving anything.
 */
.ov-row:active,
.ov-action-item:active,
.notif-item:active,
.dropdown-item:active,
.cd-person-pick:active,
.cc-result:active,
.crm-pager__link:active,
.nv-tab:active,
.dash-link:active,
.client-table tbody tr:active,
table.mobile-stack tbody tr:active {
    background-color: var(--ds-raise, #EEF1F6);
}

:root[data-theme="dark"] .ov-row:active,
:root[data-theme="dark"] .ov-action-item:active,
:root[data-theme="dark"] .notif-item:active,
:root[data-theme="dark"] .client-table tbody tr:active {
    background-color: var(--ds-raise);
}

/*
 * A whole card that is a link gets the lightest possible touch — it is large,
 * and anything more on a large surface reads as the page jumping.
 */
a.ov-stat:active,
.ov-stat[data-tile]:active,
a.card:active {
    transform: scale(.995);
    transition-duration: 0s;
}

/* ==========================================================================
   Links inside content
   ========================================================================== */

/*
 * A contact link is small and sits among other small links, so the feedback
 * has to be unmistakably about the one under the finger. Colour does that
 * where a transform would be too subtle to notice at 12px.
 */
.contact-link:active,
.muted-sm a:active,
td a:active {
    color: var(--ds-accent);
    opacity: .7;
}

/* ==========================================================================
   Respect the setting
   ========================================================================== */

/*
 * Reduced motion does not mean no feedback — it means feedback without
 * movement. The transforms go; the colour changes stay, because those are
 * what tell somebody their tap registered.
 */
@media (prefers-reduced-motion: reduce) {
    .btn:active,
    button:active,
    [role="button"]:active,
    .ov-act:active,
    a.ov-stat:active,
    .ov-stat[data-tile]:active,
    a.card:active,
    .notif-trigger:active,
    .cp-trigger:active,
    .dash-head-link:active,
    .row-acts button:active {
        transform: none;
    }

    .btn, button, [role="button"], .ov-act,
    .bulk-bar__btn, .tp-menu__btn, .as-trigger,
    .cp-trigger, .notif-trigger, .dash-head-link {
        transition: none;
    }

    /* Buttons still have to answer, so they take the row treatment. */
    .btn:active,
    button:active,
    [role="button"]:active {
        background-color: var(--ds-raise, #EEF1F6);
    }
}