1 files changed, 126 insertions, 1 deletions

diff --git a/styles/widgets.css b/styles/widgets.css
index 53f3568..1ca4ce2 100644
--- a/styles/widgets.css
+++ b/styles/widgets.css
@@ -630,7 +630,6 @@
     border-radius: 5px;
     background-color: var(--w-scr-nub);
     text-align: center;
-    vertical-align: middle;
 
     position: absolute;
 
@@ -723,4 +722,130 @@
     background-color: rgba(0, 132, 255, 1);
     color: rgba(255, 255, 255, 1);
     transition-duration: 0s;
+}
+
+/**
+    Radio widget
+*/
+
+.radio {
+    --w-bg: rgba(0, 0, 0, 0);
+    --w-bg-hover: rgba(0, 0, 0, 0);
+    --w-bg-active: rgba(0, 0, 0, 0);
+
+    width: var(--base-unit);
+    height: var(--base-unit);
+
+    border: 7px solid var(--w-radio-inactive);
+    border-radius: 50%;
+    box-shadow: 5px 5px inset var(--w-shadow), 1px 1px var(--w-shadow), 3px 3px var(--w-shadow), 5px 5px var(--w-shadow);
+    padding: 0;
+
+    overflow: hidden;
+}
+
+.radio:hover {
+    border-color: var(--w-radio-inactive-hover);
+}
+
+.radio:active, .radio.touch {
+    border: 7px solid var(--w-radio-inactive-active);
+}
+
+.radio.inactive, .radio:disabled {
+    box-shadow: 5px 5px inset var(--w-shadow-inactive), 1px 1px var(--w-shadow-inactive), 3px 3px var(--w-shadow-inactive), 5px 5px var(--w-shadow-inactive);
+}
+
+.radio.inactive::before, .radio:disabled::before {
+    width: calc(100% + 14px);
+    height: calc(100% + 14px);
+    top: -7px;
+    left: -7px;
+}
+
+.radio.inactive:hover, .radio:disabled:hover {
+    border-color: var(--w-radio-inactive);
+}
+
+.radio.inactive:active, .radio:disabled:active, .radio.inactive.touch, .radio.touch:disabled {
+    border: 7px solid var(--w-radio-inactive);
+    box-shadow: 5px 5px inset var(--w-shadow-inactive), 1px 1px var(--w-shadow-inactive), 3px 3px var(--w-shadow-inactive), 5px 5px var(--w-shadow-inactive) !important;
+}
+
+.radio::after
+{
+    height: calc(var(--base-unit) * 0.4);
+    width: calc(var(--base-unit) * 0.4);
+
+    box-sizing: border-box;
+
+    position: absolute;
+
+    display: block;
+
+    background-color: rgba(0, 0, 0, 0);
+    border-radius: 50%;
+    box-shadow: none;
+    padding: 0;
+
+    top: calc(50% - var(--base-unit) * 0.4 / 2);
+    left: calc(50% - var(--base-unit) * 0.4 / 2);
+
+    transition-duration: 0.35s;
+
+    content: '';
+}
+
+.radio:checked, .radio.active {
+    border-color: var(--w-radio-active);
+}
+
+.radio:checked:hover, .radio.active:hover {
+    border-color: var(--w-radio-active-hover);
+}
+
+.radio:checked:hover::after, .radio.active:hover::after {
+    background-color: var(--w-radio-active-hover);
+}
+
+.radio:checked::after, .radio.active::after
+{
+    background-color: var(--w-radio-active);
+    box-shadow: 1px 1px var(--w-shadow), 3px 3px var(--w-shadow), 5px 5px var(--w-shadow);
+}
+
+.radio:checked:active,
+.radio:checked.touch,
+.radio.active:active,
+.radio.active.touch {
+    border-color: var(--w-radio-active-active);
+}
+
+.radio:checked:active::after,
+.radio:checked.touch::after,
+.radio.active:active::after,
+.radio.active.touch::after {
+    background-color: var(--w-radio-active-active);
+    box-shadow: none;
+}
+
+
+.radio.inactive:checked, .radio.active.inactive, .radio:disabled:checked {
+    box-shadow: 1px 1px var(--w-shadow-inactive), 3px 3px var(--w-shadow-inactive), 5px 5px var(--w-shadow-inactive);
+}
+
+.radio.inactive:checked:active,
+.radio.active.inactive:active,
+.radio:disabled:checked:active,
+.radio.inactive.touch:checked,
+.radio.active.inactive.touch,
+.radio:disabled.touch:checked {
+    box-shadow: 1px 1px var(--w-shadow-inactive), 3px 3px var(--w-shadow-inactive), 5px 5px var(--w-shadow-inactive) !important;
+}
+
+.radio.inactive:checked::before, .radio.active.inactive::before, .radio:disabled:checked::before {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
 }
\ No newline at end of file