fix(#2451): fixed close button layout in choose sport popup

src/features/SportsFilter/components/SelectSportPopup/styled.tsx

@@ -6,7 +6,7 @@ import { client } from 'config/clients'
 import { isMobileDevice } from 'config/userAgent'
 
 import { Logo } from 'features/Logo'
-import { ModalWindow } from 'features/Modal/styled'
+import { ModalWindow, ModalCloseButton } from 'features/Modal/styled'
 import { Modal as BaseModal } from 'features/Modal'
 import { customScrollbar } from 'features/Common'
 
@@ -148,8 +148,6 @@ export const ScSportsWrapper = styled.div`
 `
 
 export const ScModal = styled(BaseModal)`
-  background-color: rgba(0, 0, 0, 0.7);
-
   ${ModalWindow} {
     position: absolute;
     top: 200px;
@@ -161,18 +159,38 @@ export const ScModal = styled(BaseModal)`
     padding: 0;
     overflow-y: auto;
 
+    ${ModalCloseButton} {
+      font-size: 0;
+      padding: 17px 19px;
+
+      :hover {
+        background-color: rgba(255, 255, 255, 0.22);
+      }
+    }
+
     ${customScrollbar}
 
     ${isMobileDevice
     ? css`
-        position: static;
+        position: relative;
+        left: auto;
+        top: auto;
         min-width: 280px;
         max-height: 250px;
         height: auto;
-        top: -140px;
+
+        ${ModalCloseButton} {
+          padding: 16px 14px 15px 15px;
+        }   
     `
     : ''};
   }
+  
+  ${isMobileDevice
+    ? css`
+        background-color: rgba(0, 0, 0, 0.7);
+    `
+    : ''};  
 `
 export const ScHeaderTitle = styled.span`
   font-weight: 700;
@@ -253,4 +271,9 @@ export const ScSport = styled.div<SportProps>`
 
 export const ScSportName = styled.span`
   padding-left: 30px;
+
+  ${isMobileDevice
+    ? css`
+      padding: 0;
+    ` : ''};
 `