/* ========================================================================== Paperclip AI - RTL Override for Hebrew (dir="rtl") Generated from analysis of index-CYurTMty.css (Tailwind v4.1.18 + MDXEditor) Scoped under html[dir="rtl"] to apply only in RTL mode. ========================================================================== */ /* -------------------------------------------------------------------------- 1. GLOBAL DIRECTION -------------------------------------------------------------------------- */ html[dir="rtl"] { direction: rtl; } html[dir="rtl"] body { text-align: right; } /* -------------------------------------------------------------------------- 2. TAILWIND UTILITY CLASSES - Padding Left/Right Swap .pl-* -> padding-right, .pr-* -> padding-left -------------------------------------------------------------------------- */ html[dir="rtl"] .pl-1 { padding-left: 0; padding-right: calc(var(--spacing) * 1); } html[dir="rtl"] .pl-2 { padding-left: 0; padding-right: calc(var(--spacing) * 2); } html[dir="rtl"] .pl-3 { padding-left: 0; padding-right: calc(var(--spacing) * 3); } html[dir="rtl"] .pl-4 { padding-left: 0; padding-right: calc(var(--spacing) * 4); } html[dir="rtl"] .pl-5 { padding-left: 0; padding-right: calc(var(--spacing) * 5); } html[dir="rtl"] .pl-5\.5 { padding-left: 0; padding-right: calc(var(--spacing) * 5.5); } html[dir="rtl"] .pl-6 { padding-left: 0; padding-right: calc(var(--spacing) * 6); } html[dir="rtl"] .pl-7 { padding-left: 0; padding-right: calc(var(--spacing) * 7); } html[dir="rtl"] .pl-8 { padding-left: 0; padding-right: calc(var(--spacing) * 8); } html[dir="rtl"] .pr-1 { padding-right: 0; padding-left: calc(var(--spacing) * 1); } html[dir="rtl"] .pr-2 { padding-right: 0; padding-left: calc(var(--spacing) * 2); } html[dir="rtl"] .pr-3 { padding-right: 0; padding-left: calc(var(--spacing) * 3); } html[dir="rtl"] .pr-6 { padding-right: 0; padding-left: calc(var(--spacing) * 6); } html[dir="rtl"] .pr-8 { padding-right: 0; padding-left: calc(var(--spacing) * 8); } html[dir="rtl"] .pr-10 { padding-right: 0; padding-left: calc(var(--spacing) * 10); } /* data-inset padding override */ html[dir="rtl"] .data-\[inset\]\:pl-8[data-inset] { padding-left: 0; padding-right: calc(var(--spacing) * 8); } /* Responsive padding overrides */ html[dir="rtl"] .sm\:pl-1 { padding-left: 0; padding-right: calc(var(--spacing) * 1); } html[dir="rtl"] .sm\:pr-3 { padding-right: 0; padding-left: calc(var(--spacing) * 3); } /* -------------------------------------------------------------------------- 3. TAILWIND UTILITY CLASSES - Margin Left/Right Swap .ml-* -> margin-right, .mr-* -> margin-left -------------------------------------------------------------------------- */ html[dir="rtl"] .-ml-1\.5 { margin-left: 0; margin-right: calc(var(--spacing) * -1.5); } html[dir="rtl"] .ml-0\.5 { margin-left: 0; margin-right: calc(var(--spacing) * 0.5); } html[dir="rtl"] .ml-1 { margin-left: 0; margin-right: calc(var(--spacing) * 1); } html[dir="rtl"] .ml-1\.5 { margin-left: 0; margin-right: calc(var(--spacing) * 1.5); } html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: calc(var(--spacing) * 2); } html[dir="rtl"] .ml-3 { margin-left: 0; margin-right: calc(var(--spacing) * 3); } html[dir="rtl"] .ml-4 { margin-left: 0; margin-right: calc(var(--spacing) * 4); } html[dir="rtl"] .ml-5 { margin-left: 0; margin-right: calc(var(--spacing) * 5); } html[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; } html[dir="rtl"] .mr-1 { margin-right: 0; margin-left: calc(var(--spacing) * 1); } html[dir="rtl"] .mr-1\.5 { margin-right: 0; margin-left: calc(var(--spacing) * 1.5); } html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: calc(var(--spacing) * 2); } html[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; } /* file selector button margin */ html[dir="rtl"] .file\:mr-4::file-selector-button { margin-right: 0; margin-left: calc(var(--spacing) * 4); } /* Responsive margin overrides */ html[dir="rtl"] .sm\:mr-1 { margin-right: 0; margin-left: calc(var(--spacing) * 1); } html[dir="rtl"] .md\:ml-auto { margin-left: 0; margin-right: auto; } /* -------------------------------------------------------------------------- 4. TAILWIND UTILITY CLASSES - Left/Right Position Swap -------------------------------------------------------------------------- */ html[dir="rtl"] .left-0 { left: auto; right: calc(var(--spacing) * 0); } html[dir="rtl"] .left-1\/2 { left: auto; right: 50%; } html[dir="rtl"] .left-2 { left: auto; right: calc(var(--spacing) * 2); } html[dir="rtl"] .left-2\.5 { left: auto; right: calc(var(--spacing) * 2.5); } html[dir="rtl"] .left-3 { left: auto; right: calc(var(--spacing) * 3); } html[dir="rtl"] .left-4 { left: auto; right: calc(var(--spacing) * 4); } html[dir="rtl"] .left-\[-14px\] { left: auto; right: -14px; } html[dir="rtl"] .left-\[50\%\] { left: auto; right: 50%; } html[dir="rtl"] .-right-0\.5 { right: auto; left: calc(var(--spacing) * -0.5); } html[dir="rtl"] .-right-2 { right: auto; left: calc(var(--spacing) * -2); } html[dir="rtl"] .right-0 { right: auto; left: calc(var(--spacing) * 0); } html[dir="rtl"] .right-1\.5 { right: auto; left: calc(var(--spacing) * 1.5); } html[dir="rtl"] .right-2 { right: auto; left: calc(var(--spacing) * 2); } html[dir="rtl"] .right-3 { right: auto; left: calc(var(--spacing) * 3); } html[dir="rtl"] .right-4 { right: auto; left: calc(var(--spacing) * 4); } html[dir="rtl"] .right-6 { right: auto; left: calc(var(--spacing) * 6); } /* Responsive left positioning */ html[dir="rtl"] .sm\:left-3 { left: auto; right: calc(var(--spacing) * 3); } /* -------------------------------------------------------------------------- 5. TAILWIND UTILITY CLASSES - Text Align Swap -------------------------------------------------------------------------- */ html[dir="rtl"] .text-left { text-align: right; } html[dir="rtl"] .text-right { text-align: left; } html[dir="rtl"] .sm\:text-left { text-align: right; } html[dir="rtl"] .sm\:text-right { text-align: left; } /* -------------------------------------------------------------------------- 6. TAILWIND UTILITY CLASSES - Float Swap -------------------------------------------------------------------------- */ html[dir="rtl"] .float-right { float: left; } /* -------------------------------------------------------------------------- 7. TAILWIND UTILITY CLASSES - Border Left/Right Swap -------------------------------------------------------------------------- */ html[dir="rtl"] .border-l { border-left-style: none; border-left-width: 0; border-right-style: var(--tw-border-style); border-right-width: 1px; } html[dir="rtl"] .border-l-2 { border-left-style: none; border-left-width: 0; border-right-style: var(--tw-border-style); border-right-width: 2px; } html[dir="rtl"] .border-l-transparent { border-left-color: initial; border-right-color: #0000; } html[dir="rtl"] .border-r { border-right-style: none; border-right-width: 0; border-left-style: var(--tw-border-style); border-left-width: 1px; } /* Responsive border overrides */ html[dir="rtl"] .sm\:border-l { border-left-style: none; border-left-width: 0; border-right-style: var(--tw-border-style); border-right-width: 1px; } html[dir="rtl"] .lg\:border-r { border-right-style: none; border-right-width: 0; border-left-style: var(--tw-border-style); border-left-width: 1px; } /* -------------------------------------------------------------------------- 8. TAILWIND UTILITY CLASSES - Rounded Left/Right Swap -------------------------------------------------------------------------- */ html[dir="rtl"] .rounded-l-md { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; } html[dir="rtl"] .rounded-r-md { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; } html[dir="rtl"] .rounded-r-full { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 3.40282e38px; border-bottom-left-radius: 3.40282e38px; } /* -------------------------------------------------------------------------- 9. TAILWIND UTILITY CLASSES - TranslateX Flip -------------------------------------------------------------------------- */ html[dir="rtl"] .-translate-x-1\/2 { --tw-translate-x: 50%; } html[dir="rtl"] .-translate-x-4 { --tw-translate-x: calc(var(--spacing) * 4); } html[dir="rtl"] .-translate-x-full { --tw-translate-x: 100%; } html[dir="rtl"] .translate-x-0 { --tw-translate-x: calc(var(--spacing) * 0); } html[dir="rtl"] .translate-x-0\.5 { --tw-translate-x: calc(var(--spacing) * -0.5); } html[dir="rtl"] .translate-x-4\.5 { --tw-translate-x: calc(var(--spacing) * -4.5); } html[dir="rtl"] .translate-x-5 { --tw-translate-x: calc(var(--spacing) * -5); } html[dir="rtl"] .translate-x-\[-50\%\] { --tw-translate-x: 50%; } /* -------------------------------------------------------------------------- 10. RADIX UI - data-side tooltip/popover offset swap -------------------------------------------------------------------------- */ html[dir="rtl"] .data-\[side\=left\]\:-translate-x-1[data-side=left] { --tw-translate-x: calc(var(--spacing) * 1); } html[dir="rtl"] .data-\[side\=right\]\:translate-x-1[data-side=right] { --tw-translate-x: calc(var(--spacing) * -1); } /* -------------------------------------------------------------------------- 11. MDXEditor - Toolbar Components -------------------------------------------------------------------------- */ /* Toolbar root - sticky, scrollable row */ html[dir="rtl"] [class*="_toolbarRoot_"] { flex-direction: row-reverse; } /* Toolbar mode switch - push to left in RTL (was margin-left:auto) */ html[dir="rtl"] [class*="_toolbarModeSwitch_"] { margin-left: 0; margin-right: auto; } /* Toolbar separator - swap border sides */ html[dir="rtl"] [class*="_toolbarRoot_"] div[role="separator"] { border-left: 1px solid var(--baseBase); border-right: 1px solid var(--baseBorder); } /* Toolbar button adjacency spacing */ html[dir="rtl"] [class*="_toolbarButton_"] + [class*="_toolbarButton_"] { margin-left: 0; margin-right: var(--spacing-1); } /* Toolbar toggle first/last child border-radius swap */ html[dir="rtl"] [class*="_toolbarToggleSingleGroup_"]:first-of-type [class*="_toolbarToggleItem_"]:only-child, html[dir="rtl"] [class*="_toolbarToggleSingleGroup_"]:only-child [class*="_toolbarToggleItem_"]:first-child, html[dir="rtl"] [class*="_toolbarModeSwitch_"] [class*="_toolbarToggleItem_"]:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--radius-base); border-bottom-right-radius: var(--radius-base); } html[dir="rtl"] [class*="_toolbarToggleSingleGroup_"]:last-of-type [class*="_toolbarToggleItem_"]:only-child, html[dir="rtl"] [class*="_toolbarToggleSingleGroup_"]:only-child [class*="_toolbarToggleItem_"]:last-child, html[dir="rtl"] [class*="_toolbarModeSwitch_"] [class*="_toolbarToggleItem_"]:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--radius-base); border-bottom-left-radius: var(--radius-base); } /* Dropdown arrow - push to right in RTL (was margin-left:auto) */ html[dir="rtl"] [class*="_toolbarNodeKindSelectDropdownArrow_"], html[dir="rtl"] [class*="_selectDropdownArrow_"] { margin-left: 0; margin-right: auto; } /* Dropdown container - border radius swap */ html[dir="rtl"] [class*="_toolbarNodeKindSelectContainer_"], html[dir="rtl"] [class*="_toolbarButtonDropdownContainer_"], html[dir="rtl"] [class*="_toolbarCodeBlockLanguageSelectContent_"], html[dir="rtl"] [class*="_selectContainer_"] { border-bottom-left-radius: 0; border-bottom-right-radius: var(--radius-base); } html[dir="rtl"] [class*="_toolbarButtonDropdownContainer_"], html[dir="rtl"] [class*="_toolbarButtonDropdownContainer_"] [class*="_selectItem_"]:first-child { border-top-right-radius: 0; border-top-left-radius: var(--radius-base); } /* Select trigger open state - radius swap */ html[dir="rtl"] [class*="_toolbarNodeKindSelectTrigger_"][data-state="open"], html[dir="rtl"] [class*="_toolbarButtonSelectTrigger_"][data-state="open"], html[dir="rtl"] [class*="_selectTrigger_"][data-state="open"] { border-bottom-right-radius: var(--radius-none); border-bottom-left-radius: var(--radius-none); } /* Select item last child - radius swap */ html[dir="rtl"] [class*="_toolbarNodeKindSelectItem_"]:last-child, html[dir="rtl"] [class*="_selectItem_"]:last-child { border-bottom-left-radius: 0; border-bottom-right-radius: var(--radius-base); } /* -------------------------------------------------------------------------- 12. MDXEditor - CodeMirror & Image Edit Toolbars Position: was right:0 -> left:0, border-bottom-left -> border-bottom-right -------------------------------------------------------------------------- */ html[dir="rtl"] [class*="_codeMirrorToolbar_"] { right: auto; left: 0; border-bottom-left-radius: 0; border-bottom-right-radius: var(--radius-base); } html[dir="rtl"] [class*="_editImageToolbar_"] { right: auto; left: 0; border-bottom-left-radius: 0; border-bottom-right-radius: var(--radius-base); } /* -------------------------------------------------------------------------- 13. MDXEditor - Property Panel -------------------------------------------------------------------------- */ html[dir="rtl"] [class*="_propertyPanelTitle_"] { padding-left: 0; padding-right: var(--spacing-2); } html[dir="rtl"] [class*="_propertyEditorTable_"] th { text-align: right; } html[dir="rtl"] [class*="_propertyEditorTable_"] [class*="_readOnlyColumnCell_"] { padding-left: initial; padding-right: 0; } html[dir="rtl"] [class*="_readOnlyColumnCell_"] { padding-left: initial; padding-right: 0; } html[dir="rtl"] [class*="_propertyEditorTable_"] td:last-child [class*="_iconButton_"] { margin-left: 0; margin-right: var(--spacing-4); } /* -------------------------------------------------------------------------- 14. MDXEditor - Dialog -------------------------------------------------------------------------- */ /* Dialog centered positioning - no swap needed (translate-50% centers) */ html[dir="rtl"] [class*="_dialogTitle_"] { padding-left: 0; padding-right: var(--spacing-2); } /* Link dialog input button */ html[dir="rtl"] [class*="_linkDialogInputWrapper_"] > button { padding-right: 0; padding-left: var(--spacing-2); } /* Link dialog input dropdown open state */ html[dir="rtl"] [class*="_linkDialogInputWrapper_"][data-visible-dropdown="true"] { border-bottom-left-radius: var(--radius-none); border-bottom-right-radius: var(--radius-none); } /* Link dialog preview anchor */ html[dir="rtl"] [class*="_linkDialogPreviewAnchor_"] { margin-right: 0; margin-left: var(--spacing-1); } /* -------------------------------------------------------------------------- 15. MDXEditor - Generic Component Name -------------------------------------------------------------------------- */ html[dir="rtl"] [class*="_genericComponentName_"] { padding-right: 0; padding-left: var(--spacing-2); } /* -------------------------------------------------------------------------- 16. MDXEditor - Table Editor -------------------------------------------------------------------------- */ html[dir="rtl"] [class*="_tableEditor_"] thead > tr > th { text-align: left; /* was right, swap */ } html[dir="rtl"] [class*="_toolCell_"] { text-align: left; /* was right, swap */ } html[dir="rtl"] [class*="_leftAlignedCell_"] { text-align: right; /* was left, swap */ } html[dir="rtl"] [class*="_rightAlignedCell_"] { text-align: left; /* was right, swap */ } /* Table column editor toolbar separators */ html[dir="rtl"] [class*="_tableColumnEditorToolbar_"] [role="separator"] { margin-left: 0; margin-right: var(--spacing-1); } /* Add column button - was on right side */ html[dir="rtl"] [class*="_addColumnButton_"] { margin-left: 0; margin-right: var(--spacing-px); border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--radius-medium); border-bottom-left-radius: var(--radius-medium); } /* Toggle group first/last child radius swap */ html[dir="rtl"] [class*="_toggleGroupRoot_"] button:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--radius-base); border-bottom-right-radius: var(--radius-base); } html[dir="rtl"] [class*="_toggleGroupRoot_"] button:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--radius-base); border-bottom-left-radius: var(--radius-base); } /* -------------------------------------------------------------------------- 17. MDXEditor - Diff Source Toggle -------------------------------------------------------------------------- */ html[dir="rtl"] [class*="_diffSourceToggleWrapper_"] { margin-left: 0; margin-right: auto; right: auto; left: 0; } /* -------------------------------------------------------------------------- 18. MDXEditor - Select with Label -------------------------------------------------------------------------- */ html[dir="rtl"] [class*="_selectWithLabel_"] { margin-left: 0; margin-right: var(--spacing-2); } html[dir="rtl"] [class*="_toolbarTitleMode_"] { margin-left: 0; margin-right: var(--spacing-2); } /* -------------------------------------------------------------------------- 19. MDXEditor - Downshift Autocomplete -------------------------------------------------------------------------- */ html[dir="rtl"] [class*="_downshiftInputWrapper_"] > button { padding-right: 0; padding-left: var(--spacing-2); } html[dir="rtl"] [class*="_downshiftInputWrapper_"][data-visible-dropdown="true"] { border-bottom-left-radius: var(--radius-none); border-bottom-right-radius: var(--radius-none); } html[dir="rtl"] [class*="_downshiftAutocompleteContainer_"] ul { border-bottom-left-radius: 0; border-bottom-right-radius: var(--radius-medium); } html[dir="rtl"] [class*="_downshiftAutocompleteContainer_"] ul li:last-of-type { border-bottom-left-radius: 0; border-bottom-right-radius: var(--radius-medium); } /* -------------------------------------------------------------------------- 20. MDXEditor - List Items (Checkbox) -------------------------------------------------------------------------- */ html[dir="rtl"] [class*="_listItemChecked_"], html[dir="rtl"] [class*="_listItemUnchecked_"] { padding-left: 0; padding-right: var(--spacing-6); } html[dir="rtl"] [class*="_listItemChecked_"]:before, html[dir="rtl"] [class*="_listItemUnchecked_"]:before { left: auto; right: 0; } html[dir="rtl"] [class*="_listItemChecked_"]:after { left: auto; right: var(--spacing-1_5); } /* -------------------------------------------------------------------------- 21. MDXEditor - Admonitions (Info/Warning/Danger blocks) -------------------------------------------------------------------------- */ html[dir="rtl"] [class*="_admonitionDanger_"], html[dir="rtl"] [class*="_admonitionInfo_"], html[dir="rtl"] [class*="_admonitionNote_"], html[dir="rtl"] [class*="_admonitionTip_"], html[dir="rtl"] [class*="_admonitionCaution_"] { border-left: none; border-right: 3px solid var(--admonitionBorder); } /* -------------------------------------------------------------------------- 22. Paperclip Markdown Rendered Content -------------------------------------------------------------------------- */ html[dir="rtl"] .paperclip-mdxeditor-content ul, html[dir="rtl"] .paperclip-mdxeditor-content ol { padding-left: 0; padding-right: 1.6em; } html[dir="rtl"] .paperclip-mdxeditor-content blockquote { border-left: none; border-right: 3px solid var(--border); padding-left: 0; padding-right: 1em; } html[dir="rtl"] .paperclip-markdown :where(ul, ol) { padding-left: 0; padding-right: 1.15rem; } html[dir="rtl"] .paperclip-markdown li { padding-left: 0; padding-right: .2rem; } html[dir="rtl"] .paperclip-markdown blockquote { border-left: none; border-right: .24rem solid var(--border); margin-left: initial; margin-right: 0; padding-left: 0; padding-right: .95rem; } @supports (color: color-mix(in lab, red, red)) { html[dir="rtl"] .paperclip-markdown blockquote { border-right: .24rem solid color-mix(in oklab, var(--border) 84%, var(--muted-foreground) 16%); } } html[dir="rtl"] .paperclip-markdown th { text-align: right; } /* Nested list/ol padding overrides from Tailwind arbitrary selectors */ html[dir="rtl"] .\[\&_ol\]\:pl-5 ol { padding-left: 0; padding-right: calc(var(--spacing) * 5); } html[dir="rtl"] .\[\&_ul\]\:pl-5 ul { padding-left: 0; padding-right: calc(var(--spacing) * 5); } /* -------------------------------------------------------------------------- 23. CodeMirror (inside MDXEditor) - Cursor & Gutters -------------------------------------------------------------------------- */ html[dir="rtl"] .paperclip-mdxeditor .cm-cursor, html[dir="rtl"] .paperclip-mdxeditor .cm-dropCursor { border-left-color: transparent !important; border-right-color: #cdd6f4 !important; } html[dir="rtl"] .paperclip-mdxeditor .cm-gutters { border-right: none !important; border-left: 1px solid #313244 !important; } /* -------------------------------------------------------------------------- 24. Sidebar Layout (shadcn/ui sidebar pattern) The sidebar CSS variables are defined but the layout depends on the app's component structure. These overrides handle common patterns. -------------------------------------------------------------------------- */ /* If sidebar is positioned with left:0, move to right:0 */ html[dir="rtl"] [data-sidebar="sidebar"] { left: auto; right: 0; } /* Sidebar rail/resize handle */ html[dir="rtl"] [data-sidebar="rail"] { left: auto; right: 0; } /* Main content margin adjustment when sidebar present */ html[dir="rtl"] [data-sidebar="content"] { margin-left: 0; } /* -------------------------------------------------------------------------- 25. Dialog Overlay - full screen, no directional change needed But ensure overlay covers correctly -------------------------------------------------------------------------- */ html[dir="rtl"] [class*="_dialogOverlay_"] { left: 0; right: 0; } /* -------------------------------------------------------------------------- 26. Radix UI Popover/Dropdown Transform Origins These use CSS variables, so they auto-adapt. No override needed. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 27. Group rotation for collapsible triggers (chevron icons) In RTL, a right-pointing chevron should point left by default and rotate when open -------------------------------------------------------------------------- */ html[dir="rtl"] .group-data-\[state\=open\]\:rotate-90:is(:where(.group)[data-state=open] *) { rotate: -90deg; } /* -------------------------------------------------------------------------- 28. General Hebrew typography adjustments -------------------------------------------------------------------------- */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="number"] { text-align: left; direction: ltr; } /* Placeholder text alignment */ html[dir="rtl"] input::placeholder, html[dir="rtl"] textarea::placeholder { text-align: right; } /* -------------------------------------------------------------------------- 29. Scrollbar position (WebKit) - move to left side in RTL -------------------------------------------------------------------------- */ html[dir="rtl"] ::-webkit-scrollbar { /* Scrollbars auto-flip in RTL for most browsers */ } /* -------------------------------------------------------------------------- 30. Active SVG translate (press feedback) - flip X direction -------------------------------------------------------------------------- */ html[dir="rtl"] [class*="_toolbarToggleItem_"]:active svg, html[dir="rtl"] [class*="_toolbarButton_"]:active svg, html[dir="rtl"] [class*="_actionButton_"]:active svg, html[dir="rtl"] [class*="_tableColumnEditorTrigger_"]:active svg, html[dir="rtl"] [class*="_tableColumnEditorToolbar_"] > button:active svg, html[dir="rtl"] [class*="_toggleGroupRoot_"] button:active svg, html[dir="rtl"] [class*="_addColumnButton_"]:active svg, html[dir="rtl"] [class*="_addRowButton_"]:active svg { transform: translate(-1px, 1px); } /* -------------------------------------------------------------------------- 31. Responsive breakpoint overrides -------------------------------------------------------------------------- */ @media (min-width: 640px) { html[dir="rtl"] .sm\:flex-row { flex-direction: row-reverse; } } @media (min-width: 768px) { html[dir="rtl"] .md\:flex-row { flex-direction: row-reverse; } } @media (min-width: 1024px) { html[dir="rtl"] .lg\:flex-row { flex-direction: row-reverse; } } @media (min-width: 1280px) { html[dir="rtl"] .xl\:flex-row { flex-direction: row-reverse; } } /* -------------------------------------------------------------------------- 32. Fix for centered dialogs using left:50% + translate(-50%, -50%) These should remain centered, so override left->right and flip translate -------------------------------------------------------------------------- */ html[dir="rtl"] [class*="_dialogContent_"], html[dir="rtl"] [class*="_largeDialogContent_"] { left: auto; right: 50%; transform: translate(50%, -50%); } @keyframes rtl-contentShow { 0% { opacity: 0; transform: translate(50%, -48%) scale(.96); } to { opacity: 1; transform: translate(50%, -50%) scale(1); } } html[dir="rtl"] [class*="_dialogContent_"], html[dir="rtl"] [class*="_largeDialogContent_"] { animation: rtl-contentShow .15s cubic-bezier(.16, 1, .3, 1); } /* -------------------------------------------------------------------------- 33. Fix Tailwind space-x utilities These already use margin-inline-start/end, so they should auto-adapt. No override needed for space-x-* classes (they use logical properties). -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 34. Override for the bottom-positioned elements with safe-area-inset These are vertical-only, no RTL swap needed. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 35. Miscellaneous icon and decorative element adjustments -------------------------------------------------------------------------- */ /* Ensure icons in buttons don't get mirrored unintentionally */ html[dir="rtl"] svg { /* Most icons should NOT be mirrored. Only directional icons need it. */ } /* Mirror directional icons (arrows, chevrons) */ html[dir="rtl"] [class*="chevron-left"] svg, html[dir="rtl"] [class*="chevron-right"] svg, html[dir="rtl"] [class*="arrow-left"] svg, html[dir="rtl"] [class*="arrow-right"] svg { transform: scaleX(-1); }