32 lines
711 B
CSS
32 lines
711 B
CSS
: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;
|
|
}
|