/* BulkGauge — right-to-left, for Arabic.
 *
 * The design already uses logical properties almost everywhere, so the browser
 * mirrors the layout on its own once `dir="rtl"` is set. Six declarations in
 * brand.css use physical ones; those are the six overridden here, plus the
 * handful of places where a mirrored result would be wrong rather than merely
 * different.
 *
 * Loaded on every page, and does nothing until `.rtl` is on the root — which
 * assets/i18n.js sets alongside the `dir` attribute.
 *
 * Nothing here reverses text. The text is stored logically and the browser
 * reverses it; anything reversed by hand would come out backwards twice.
 */

.rtl .matrix th,
.rtl .matrix td,
.rtl .prose th,
.rtl .prose td {
  text-align: right;
}

.rtl .prose ul,
.rtl .prose ol {
  padding-left: 0;
  padding-right: 22px;
}

.rtl .prose li {
  padding-left: 0;
  padding-right: 2px;
}

.rtl .callout {
  border-left: 0;
  border-right: 2px solid var(--needle);
  /* The rounded corners follow the border to the other side. */
  border-radius: var(--r-s) 0 0 var(--r-s);
}

.rtl .toc {
  border-left: 0;
  border-right: 1px solid var(--line);
  padding-left: 0;
  padding-right: 16px;
}

/*
 * Things that must NOT mirror.
 *
 * A brand mark, a logo and a screenshot are pictures of themselves. Flipping
 * them produces a mirror image of the product, which is worse than leaving
 * them alone — and `dir` alone does not flip images, so this only guards
 * against a future transform being added carelessly.
 */
.rtl .brand-mark,
.rtl .shot img {
  transform: none;
}

/*
 * A left-to-right island inside right-to-left text.
 *
 * A shop domain, an email address or a code sample is Latin script and reads
 * left to right whatever surrounds it. Without this the punctuation at either
 * end jumps to the wrong side — `.myshopify.com` renders as `myshopify.com.`
 * and looks like a typo rather than a rendering artefact.
 */
.rtl code,
.rtl .mono,
.rtl [data-ltr] {
  direction: ltr;
  unicode-bidi: isolate;
  /* Still aligned with the surrounding paragraph; only the run is isolated. */
  text-align: right;
}

/*
 * The language picker.
 *
 * It sits in the footer's legal row, which is a flex line. Nothing needs
 * mirroring — the row already uses logical spacing — but the select itself
 * carries a native dropdown arrow that browsers place by direction, and the
 * option text is in each language's own script, so it must not inherit the
 * page's direction.
 */
.lang-picker {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.rtl .lang-picker {
  direction: rtl;
}

.lang-picker option {
  /* Each option is in its own script; the list must not be forced either way. */
  direction: ltr;
}