CHANGED: style and components directories, removed redundant imports from styles

ADDED: container and card component, card-subcomponents WIP

src/styles/input-styles/radio.sass

@@ -0,0 +1,91 @@
+div.m3.m3-radio
+    width: 20px
+    height: 20px
+    align-items: center
+    display: inline-flex
+    justify-content: center
+
+    & > span.m3-checkbox-ripple-layer, span.m3.m3-radio-state-layer
+        z-index: 5
+
+    & > span.m3.m3-radio-state-layer
+        width: 40px
+        aspect-ratio: 1
+        border-radius: 50%
+        position: absolute
+        pointer-events: none
+        transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
+
+    & > input[type="radio"].m3.m3-radio
+        margin: 0
+        width: 20px
+        height: 20px
+        aspect-ratio: 1
+        cursor: pointer
+        appearance: none
+        position: absolute
+
+        &:not(:disabled)
+            &:checked:hover + span.m3.m3-radio-state-layer
+                background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
+
+            &:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer
+                background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
+                & ~ span.m3-ripple-domain > .m3.ripple
+                    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
+
+            &:hover
+                & + span.m3.m3-radio-state-layer
+                    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
+
+            &:active + span.m3.m3-radio-state-layer
+                background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
+                & ~ span.m3-ripple-domain > .m3.ripple
+                    background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
+
+        &:disabled
+            &:is(:not(:checked), &:checked) ~ svg
+                & > circle.m3-radio-outline
+                    stroke-opacity: 38%
+                    stroke: var(--md-sys-color-on-surface)
+
+            &:checked ~ svg > circle.m3-radio-state
+                fill-opacity: 38%
+                fill: var(--md-sys-color-on-surface)
+
+        &:not(:checked) ~ svg
+            & > circle.m3-radio-outline
+                stroke: var(--md-sys-color-on-surface-variant)
+
+            & > circle.m3-radio-state
+                fill-opacity: 0
+                fill: var(--md-sys-color-primary)
+
+        &:checked ~ svg
+            & > circle.m3-radio-outline
+                stroke: var(--md-sys-color-primary)
+
+            & > circle.m3-radio-state
+                fill-opacity: 1
+                fill: var(--md-sys-color-primary)
+
+    svg
+        margin: 0
+        width: 20px
+        z-index: 10
+        border-radius: 50%
+        pointer-events: none
+        aspect-ratio: inherit
+
+        & > circle
+            transition: fill, stroke, .2s cubic-bezier(0.2, 0, 0, 1)
+
+            &.m3-radio-outline
+                r: 9px
+                fill: black
+                fill-opacity: 0
+                stroke-width: 2px
+                stroke: var(--md-sys-color-on-surface-variant)
+
+            &.m3-radio-state
+                r: 5px