/* Reading-direction icons under an LTR locale.
 *
 * The whole interface is authored RTL-first — Hebrew is the default UI — so in
 * the markup "forward / next / drill in" points LEFT (bi-arrow-left,
 * bi-chevron-left) and "back" points RIGHT. LocaleService serves
 * dir="ltr" for en / ru / fr, and every one of those glyphs then points at the
 * page the reader just came from: the dashboard's "how to start" banner aimed
 * its chevron backwards, pagination's next button pointed at prev, and the
 * "back to list" arrow pointed forward.
 *
 * Mirroring the glyph beats maintaining two sets of icon class names across the
 * markup AND the strings JS rebuilds — the same trade-off public/register/*.php
 * already made for the signup wizard, generalised here so every screen shares
 * one rule.
 *
 * The transform sits on ::before, which Bootstrap Icons already declares
 * `display: inline-block`. Flipping the <i> itself would need a display change
 * on the element and would collide with the translateX hover animations that
 * .dash-action-arrow and .settings-link-chev put there.
 *
 * PHYSICAL icons are deliberately absent — they mean a compass direction, not a
 * reading direction, and mirroring them would be a bug:
 *   bi-arrow-up-right / bi-arrow-down-left  money out / money in
 *   bi-box-arrow-up-right                   opens in a new tab
 *   bi-arrow-left-right                     two-way sync
 *   bi-chat-left-*                          speech bubbles
 * For a one-off exception inside the list below, add `bi-no-flip` to the <i>.
 */

[dir="ltr"] .bi-arrow-left::before,
[dir="ltr"] .bi-arrow-right::before,
[dir="ltr"] .bi-arrow-left-short::before,
[dir="ltr"] .bi-arrow-right-short::before,
[dir="ltr"] .bi-arrow-left-circle::before,
[dir="ltr"] .bi-arrow-right-circle::before,
[dir="ltr"] .bi-arrow-left-circle-fill::before,
[dir="ltr"] .bi-arrow-right-circle-fill::before,
[dir="ltr"] .bi-arrow-left-square::before,
[dir="ltr"] .bi-arrow-right-square::before,
[dir="ltr"] .bi-arrow-left-square-fill::before,
[dir="ltr"] .bi-arrow-right-square-fill::before,
[dir="ltr"] .bi-arrow-bar-left::before,
[dir="ltr"] .bi-arrow-bar-right::before,
[dir="ltr"] .bi-arrow-return-left::before,
[dir="ltr"] .bi-arrow-return-right::before,
[dir="ltr"] .bi-arrow-90deg-left::before,
[dir="ltr"] .bi-arrow-90deg-right::before,
[dir="ltr"] .bi-chevron-left::before,
[dir="ltr"] .bi-chevron-right::before,
[dir="ltr"] .bi-chevron-double-left::before,
[dir="ltr"] .bi-chevron-double-right::before,
[dir="ltr"] .bi-chevron-compact-left::before,
[dir="ltr"] .bi-chevron-compact-right::before,
[dir="ltr"] .bi-chevron-bar-left::before,
[dir="ltr"] .bi-chevron-bar-right::before,
[dir="ltr"] .bi-caret-left::before,
[dir="ltr"] .bi-caret-right::before,
[dir="ltr"] .bi-caret-left-fill::before,
[dir="ltr"] .bi-caret-right-fill::before,
[dir="ltr"] .bi-caret-left-square::before,
[dir="ltr"] .bi-caret-right-square::before,
[dir="ltr"] .bi-caret-left-square-fill::before,
[dir="ltr"] .bi-caret-right-square-fill::before,
[dir="ltr"] .bi-box-arrow-left::before,
[dir="ltr"] .bi-box-arrow-right::before,
[dir="ltr"] .bi-box-arrow-in-left::before,
[dir="ltr"] .bi-box-arrow-in-right::before {
    transform: scaleX(-1);
}

/* Opt-out. Same specificity as the block above, so it has to come after it. */
[dir="ltr"] .bi-no-flip::before {
    transform: none;
}