MOBILE-3693 style: Make links clickable inside radio or checkbox items

src/addons/mod/quiz/pages/player/player.scss

@@ -4,7 +4,7 @@
         margin-bottom: 2px;
     }
 
-    ion-toolbar {
+    ion-content ion-toolbar {
         border-bottom: 1px solid var(--gray);
     }
 }

src/core/components/loading/loading.scss

@@ -3,7 +3,7 @@
 :host {
     position: static;
     @include core-transition(height, 200ms);
-    --loading-background: rgba(255, 255, 255, 0.26);
+    --loading-background: var(--ion-background-color);
 
     > .core-loading-container {
         position: absolute;
@@ -49,7 +49,3 @@
         }
     }
 }
-
-:host-context(body.dark) {
-    --loading-background: rgba(0, 0, 0, 0.26);
-}

src/theme/theme.base.scss

@@ -519,6 +519,45 @@ audio.core-media-adapt-width {
     width: 100%;
 }
 
+// Make links clickable when inside radio or checkbox items. Style part.
+@media (any-hover: hover) {
+    ion-item.item-multiple-inputs:hover::part(native) {
+        color: var(--color-hover);
+
+        &::after {
+            background: var(--background-hover);
+            opacity: var(--background-hover-opacity);
+        }
+    }
+
+    ion-item.ion-color.item-multiple-inputs:hover::part(native) {
+        color: #{current-color(contrast)};
+
+        &::after {
+            background: #{current-color(contrast)};
+        }
+    }
+}
+
+// Make links clickable when inside radio or checkbox items. Pointer and cursor part.
+ion-item.item-multiple-inputs {
+    cursor: pointer;
+    ion-label {
+        z-index: 3;
+        pointer-events: none;
+
+        ion-anchor, a,
+        ion-button, button,
+        audio, video {
+            pointer-events: visible;
+        }
+    }
+
+    ion-checkbox, ion-datetime, ion-radio, ion-select{
+        position: static;
+    }
+}
+
 // Focus highlight for accessibility.
 ion-item.item-input.ion-focused:not(:focus),
 .ion-focused,

src/theme/theme.light.scss

@@ -69,6 +69,9 @@
 
     --module-icon-size: 24px;
 
+    --ion-background-color: #{$background-color};
+    --ion-background-color-rgb: color-to-rgb-list(var(--ion-background-color));
+
     --ion-text-color: #{$text-color};
     --ion-text-color-rgb: 58,58,58;
     --ion-card-color: var(--ion-text-color);
@@ -76,7 +79,7 @@
     --text-hightlight-background-color: #{$core-text-hightlight-background-color};
 
     ion-content {
-        --background: #{$background-color};
+        --background: var(--ion-background-color);
         --background-lighter: var(--gray-lighter);
         --contrast-background: var(--white);
     }