From ae3d4d2bef9d368aa6ba2baa77232f4d689f4b26 Mon Sep 17 00:00:00 2001
From: Lungan Catalin <98550729+Cata1989@users.noreply.github.com>
Date: Mon, 24 Jun 2024 13:05:24 +0300
Subject: [PATCH] refactor(Radio Group): use CSS logical properties instead of
 physical values (#1126)

---
 .../components/radio-group/scss/bq-radio-group.scss    |  4 ++--
 packages/beeq/src/components/radio/scss/bq-radio.scss  | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/beeq/src/components/radio-group/scss/bq-radio-group.scss b/packages/beeq/src/components/radio-group/scss/bq-radio-group.scss
index 55d3aa4e3..25ab08917 100644
--- a/packages/beeq/src/components/radio-group/scss/bq-radio-group.scss
+++ b/packages/beeq/src/components/radio-group/scss/bq-radio-group.scss
@@ -7,10 +7,10 @@
 }
 
 .bq-radio-group {
-  @apply m-0;
+  @apply m-b-0 m-i-0;
 
   &:not(.has-fieldset) {
-    @apply m-0 border-0 p-0;
+    @apply border-0 m-b-0 m-i-0 p-b-0 p-i-0;
   }
 
   &--horizontal {
diff --git a/packages/beeq/src/components/radio/scss/bq-radio.scss b/packages/beeq/src/components/radio/scss/bq-radio.scss
index 6fcc537a9..396deb7b7 100644
--- a/packages/beeq/src/components/radio/scss/bq-radio.scss
+++ b/packages/beeq/src/components/radio/scss/bq-radio.scss
@@ -10,7 +10,7 @@
 
 .bq-radio {
   @apply box-border inline-flex cursor-pointer items-center justify-center gap-2 transition-[background-color] duration-300;
-  @apply rounded-s p-xs;
+  @apply rounded-s p-b-xs p-i-xs;
 
   &.is-disabled {
     .bq-radio__circle {
@@ -53,7 +53,7 @@
 }
 
 .bq-radio__input {
-  @apply pointer-events-none absolute m-0 p-0 opacity-0;
+  @apply pointer-events-none absolute opacity-0 m-b-0 m-i-0 p-b-0 p-i-0;
 
   &:focus-visible {
     ~ .bq-radio__circle {
@@ -63,15 +63,15 @@
 }
 
 .bq-radio__control {
-  @apply box-border flex h-[var(--bq-radio--size)] w-[var(--bq-radio--size)] items-center justify-center rounded-full p-[2px];
+  @apply box-border flex items-center justify-center rounded-full bs-[--bq-radio--size] is-[--bq-radio--size] p-b-[2px] p-i-[2px];
 }
 
 .bq-radio__circle {
-  @apply relative box-border flex h-full w-full items-center justify-center rounded-full border-[length:var(--bq-radio--border-width)] border-solid p-[3px] border-hover-icon-primary;
+  @apply relative box-border flex items-center justify-center rounded-full border-[length:--bq-radio--border-width] border-solid border-hover-icon-primary bs-full is-full p-b-[3px] p-i-[3px];
 }
 
 .bq-radio__checked {
-  @apply h-full w-full rounded-full;
+  @apply rounded-full bs-full is-full;
 }
 
 .bq-radio__label {