# rtlAwareGradientDirection

> The custom-property declarations behind a linear-gradient direction that a rangeable gradient track shares with its own `&:dir(rtl)` mirror: the property lands at `"right"` by default and flips to `"left"` once the surrounding writing direction reads right-to-left, so the same gradient string paints correctly in either direction from one shared declaration.

```ts
import { rtlAwareGradientDirection } from "@sdxc/ui/styles";
```

Composes the custom property pairing a gradient direction's `"right"`
default with its `"left"` mirror under `&:dir(rtl)`, ready to compose
alongside a host's own remaining, genuinely local declarations.

## Signature

```ts
rtlAwareGradientDirection<Node extends Element = Element>(propertyName: string): MixinDescriptor<Node, [styles: CSSStyles], ElementProps>
```

Returns: A `css()` mixin ready for a host element's `mix` prop.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `propertyName` | `string` | The custom property the gradient direction reads from. |

## Examples

```tsx
<div
	mix={[
		rtlAwareGradientDirection("--ui-color-slider-track-direction"),
		css({ ...ownStyles }),
	]}
/>;
```