/*
 * Right-to-left (Arabic). Loaded last, only when the page is right-to-left.
 *
 * Layout already mirrors through CSS logical properties in the component
 * stylesheets; this file covers what logical properties cannot express:
 * Arabic typography, drawer slide directions, directional icons and the
 * few drawn shapes.
 */

/* Arabic script: system Arabic fonts (none are bundled), no letter-spacing
   (tracking breaks joined letters) and no capitalisation. */
[dir="rtl"] {
	--qilaada-font-heading: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", system-ui, sans-serif;
	--qilaada-font-body: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", system-ui, sans-serif;
}

[dir="rtl"] body,
[dir="rtl"] body * {
	letter-spacing: 0 !important; /* Every tracked style in the theme; Arabic must never be tracked. */
}

/* Latin text kept as such (email addresses, the "English" choice). */
[dir="rtl"] [lang="en"],
[dir="rtl"] [dir="ltr"] {
	font-family: "Figtree", system-ui, sans-serif;
}

/* Drawers enter from the mirrored side. */
[dir="rtl"] .drawer--left {
	transform: translateX(100%);
}

[dir="rtl"] .drawer--right {
	transform: translateX(-100%);
}

[dir="rtl"] .drawer[open] {
	transform: none;
}

@starting-style {
	[dir="rtl"] .drawer--left[open] {
		transform: translateX(100%);
	}

	[dir="rtl"] .drawer--right[open] {
		transform: translateX(-100%);
	}
}

/* Directional icons point the other way. */
[dir="rtl"] .icon--chevron-left,
[dir="rtl"] .icon--chevron-right {
	transform: scaleX(-1);
}

/* Sort select: chevron and its space on the left. */
[dir="rtl"] .woocommerce-ordering select.orderby {
	padding-inline: var(--qilaada-space-2) var(--qilaada-space-6);
	background-position: left 0.125rem center, left 0.5rem center, 0 0;
}

/* Magnifier handle mirrored. */
[dir="rtl"] .woocommerce-product-gallery__trigger::after {
	transform: rotate(-45deg);
	transform-origin: right center;
}

/* Account welcome tiles fan the other way. */
[dir="rtl"] .account-welcome__strip {
	transform: scaleX(-1);
}