:focus-visible {
    --outline-size: max(2px, 0.1em);

    outline:
        var(--outline-width, var(--outline-size))
        var(--outline-style, solid)
        var(--outline-color, currentColor);

    outline-offset: var(--outline-offset, var(--outline-size));

    border-radius: 0.25em;
}

:where(:not(:active):focus-visible) {
    outline-offset: 5px;
}

@media (prefers-reduced-motion: no-preference) {
    :where(:focus-visible) {
        transition: outline-offset .2s ease;
    }
    :where(:not(:active):focus-visible) {
        transition-duration: .25s;
    }
}

/* Scroll margin allowance below focused elements
  to ensure they are clearly in view */
:focus {
    scroll-padding-block-end: 8vh;
}