/* Dimensional treatment is opt-in: only controls explicitly marked as filled CTAs. */
a.button-depth,
button.button-depth {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 2px 0 rgba(0, 0, 0, 0.3),
        0 5px 12px rgba(0, 0, 0, 0.24) !important;
    transition:
        background-color 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

a.button-depth:hover,
button.button-depth:hover:not(:disabled) {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -2px 0 rgba(0, 0, 0, 0.22),
        0 3px 0 rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.28) !important;
}

a.button-depth:active,
button.button-depth:active:not(:disabled) {
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 1px 2px rgba(0, 0, 0, 0.22) !important;
}

a.button-depth:focus-visible,
button.button-depth:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    a.button-depth,
    button.button-depth {
        transition: none;
    }
}