diff --git a/src/components/question/question.css b/src/components/question/question.css index fb8d7869bfbbfe90a7a021e93c01bf1fd0a40d39..4550df75cdbe1b3ad51b2e5c45e54f47d1de7627 100644 --- a/src/components/question/question.css +++ b/src/components/question/question.css @@ -33,7 +33,6 @@ .question-submit-button { position: absolute; top: calc($space / 2); - right: calc($space / 2); width: calc(2rem - $space); height: calc(2rem - $space); @@ -45,13 +44,28 @@ background: $motion-primary; } +[dir="ltr"] .question-submit-button { + right: calc($space / 2); +} + +[dir="rtl"] .question-submit-button { + left: calc($space / 2); +} + /* Input overrides: width, font-weight, focus outline and padding */ .question-input > input { width: 100%; - padding: 0 2rem 0 0.75rem; /* To make room for the submit button */ font-weight: normal; } +[dir="ltr"] .question-input > input { + padding: 0 2rem 0 .75rem; /* To make room for the submit button */ +} + +[dir="rtl"] .question-input > input { + padding: 0 .75rem 0 2rem; /* To make room for the submit button */ +} + .question-input > input:focus { box-shadow: 0px 0px 0px 3px $motion-transparent; } @@ -60,5 +74,6 @@ width: calc(2rem - $space); height: calc(2rem - $space); position: relative; + right: -7px; left: -7px; }