/* Component rules and breakpoint overrides; legacy selectors are retained. */
.ui-icon { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; vertical-align: middle; transform-origin: center; transition: transform 240ms cubic-bezier(.2,.75,.3,1); }
.ui-icon--menu { width: 24px; height: 24px; }
.ui-icon--check { width: 13px; height: 13px; }
a:hover .ui-icon--diagonal,
a:focus-visible .ui-icon--diagonal,
button:hover .ui-icon--diagonal,
button:focus-visible .ui-icon--diagonal { transform: translate(3px, -3px); }
a:hover .ui-icon--previous,
a:focus-visible .ui-icon--previous,
button:hover .ui-icon--previous,
button:focus-visible .ui-icon--previous { transform: translateX(-3px); }
a:hover .ui-icon--next,
a:focus-visible .ui-icon--next,
button:hover .ui-icon--next,
button:focus-visible .ui-icon--next { transform: translateX(3px); }
button:active .ui-icon--menu,
button:active .ui-icon--close,
button:active .ui-icon--previous,
button:active .ui-icon--next { transform: scale(.86); }
@media (prefers-reduced-motion: reduce) {
.ui-icon { transition: none !important; }
}