fixup! chore(checkbox): get rid of imported MDC's styles

Author: Kiarokh

src/components/checkbox/checkbox.scss

@@ -6,6 +6,12 @@
 $box-size: 1.25rem;
 $gap-size: 0.5rem;
 
+:host(limel-checkbox) {
+    min-height: var(--limel-checkbox-min-height, 2.5rem); // prevents flickering
+    // when switching between `readonly` and normal states in `limel-checkbox`,
+    // but not where `CheckboxTemplate` is imported & used.
+}
+
 *,
 *:before,
 *:after {
@@ -64,7 +70,9 @@ label {
 }
 
 .box {
-    position: absolute;
+    position: absolute; // since `label` is the clickable part,
+    // and thus needs to
+    // stretch below the checkbox
     pointer-events: none;
 
     transition:
@@ -91,7 +99,8 @@ label {
         rgb(var(--contrast-300))
     );
 
-    .checked & {
+    .checked &,
+    .checkbox:has(input[type='checkbox']:checked) & {
         background-color: var(
             --lime-primary-color,
             var(--limel-theme-primary-color)
@@ -130,12 +139,35 @@ label {
             box-shadow: var(--shadow-depth-8-focused);
         }
     }
+
+    &:after {
+        // For indicating the indeterminate state
+        transition:
+            opacity 0.2s ease,
+            width 0.4s ease;
+        content: '';
+        position: absolute;
+        inset: 0;
+        margin: auto;
+
+        height: 0.125rem;
+        width: 0.25rem;
+
+        border-radius: 1rem;
+        opacity: 0;
+
+        background-color: rgb(var(--color-white));
+
+        .indeterminate & {
+            opacity: 1;
+            width: calc($box-size - 0.5rem);
+        }
+    }
 }
 
 svg {
     position: absolute;
     z-index: 1;
-    pointer-events: none;
     inset: 0;
 
     transform: translate3d(-0.125rem, -0.125rem, 0);
@@ -159,7 +191,7 @@ svg {
         transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);
     }
 
-    .checked:not(.indeterminate) & {
+    .checkbox:not(.indeterminate):has(input[type='checkbox']:checked) & {
         opacity: 1;
 
         path {
@@ -170,6 +202,7 @@ svg {
 
 limel-dynamic-label {
     margin-top: 0.375rem;
+    margin-left: -0.25rem;
 }
 
 @include mixins.hide-helper-line-when-not-needed(limel-checkbox);

src/components/dynamic-label/dynamic-label.scss

@@ -6,7 +6,7 @@
 :host(limel-dynamic-label) {
     --limel-dynamic-label-min-height: 1.75rem;
     display: flex;
-    gap: 0.5rem;
+    gap: 0.25rem;
     align-items: flex-start;
     border-radius: 0.5rem;
     min-width: 0;