/* ==========================================================================
   BIDI — the residue.

   The theme is bidirectional in one build: `ar` renders RTL and `en` renders
   LTR from the same stylesheet, because direction comes from the `dir`
   attribute the UI sets per request, never from a second CSS file.

   Almost all of that is carried by logical properties, applied in the file
   each rule already lived in — `padding-inline-start` rather than
   `padding-left`, `inset-inline-end` rather than `right`. Those need no help
   from this file and are not listed here.

   What is left is the short list of things CSS gives no logical form for:
   a clipped shape, a background position, an icon that points somewhere.

   Before adding a rule here, check that a logical property would not do the
   job in the component file instead. This file staying short is the measure
   of whether the retrofit held.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Select chevron
   `background-position` has no logical form, so the custom chevron on a native
   select has to be placed by hand on each side.
   -------------------------------------------------------------------------- */
[dir="rtl"] .select,
[dir="rtl"] select {
  background-position: left var(--space-4) center;
}

/* --------------------------------------------------------------------------
   2. The notched sale flag
   `clip-path` coordinates are physical. The notch bites into the start edge,
   so RTL needs the polygon mirrored across the vertical axis.
   -------------------------------------------------------------------------- */
[dir="rtl"] .badge--flag {
  clip-path: polygon(85% 0%, 0% 0%, 0% 100%, 85% 100%, 100% 50%);
}

/* --------------------------------------------------------------------------
   3. Icons that point
   An arrow meaning "next" must point along the reading direction, so the
   navigational icons mirror automatically. Icons that depict a real-world
   object — a shopping cart, a truck — are left alone: mirroring those makes
   them look wrong rather than translated.

   Mask-mode icons carry their name as a class and are matched directly.
   Sprite-mode icons (`<use href="…#i-chevron-right">`) cannot be matched on
   the reference, so mark those with `.icon--dir`.
   Add `.icon--nodir` to opt a single icon out — e.g. an arrow that genuinely
   means "the right-hand column" rather than "forward".
   -------------------------------------------------------------------------- */
[dir="rtl"] .icon--right-arrow:not(.icon--nodir),
[dir="rtl"] .icon--left-arrow:not(.icon--nodir),
[dir="rtl"] .icon--long-right-arrow:not(.icon--nodir),
[dir="rtl"] .icon--chevron-right:not(.icon--nodir),
[dir="rtl"] .icon--dir:not(.icon--nodir) {
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   4. Skeleton shimmer
   The gradient sweeps along the reading direction. Reversing the animation is
   cheaper than declaring a second keyframe set.
   -------------------------------------------------------------------------- */
[dir="rtl"] .skeleton {
  animation-direction: reverse;
}