Radio buttons also exist!

assets/less/classes/input/checkbox.less

@@ -3,6 +3,11 @@
     margin: 1px 0;
     cursor: pointer;
 
+    &--radio &__display,
+    &--radio &__display__icon {
+        border-radius: 100%;
+    }
+
     &__input {
         display: inline-block;
         position: absolute;

assets/less/classes/permissions.less

@@ -6,13 +6,14 @@
     &__line {
         display: flex;
         font-size: .9em;
-        line-height: 1.2em;
+        line-height: 1.7em;
 
         &--header {
             font-size: 1.2em;
             line-height: 1.4em;
             border-bottom: 1px solid var(--accent-colour);
             padding-bottom: 1px;
+            font-weight: 700;
 
             &:not(:first-child) {
                 margin-top: 4px;
@@ -22,7 +23,7 @@
         @media (max-width: @site-mobile-width) {
             flex-wrap: wrap;
             justify-content: right;
-            border-bottom: 1px solid #ded5e7;
+            border-bottom: 1px solid var(--accent-colour);
         }
     }
 
@@ -32,7 +33,7 @@
     }
 
     &__line:not(&__line--header) &__title {
-        border-bottom: 1px solid #ded5e7;
+        border-bottom: 1px solid var(--accent-colour);
 
         @media (max-width: @site-mobile-width) {
             width: 100%;
@@ -40,10 +41,6 @@
         }
     }
 
-    &__input {
-        cursor: pointer;
-    }
-
     &__choice {
         width: 100px;
         text-align: center;
@@ -55,27 +52,27 @@
         }
 
         &--radio {
-            cursor: pointer;
+            justify-content: center;
-            border-left: 1px solid var(--accent-colour);
         }
 
         &--yes {
-
+            --accent-colour: #0a0;
-            &:hover {
-                background-color: #0a0;
-            }
 
             @media (max-width: @site-mobile-width) {
                 border-left-width: 0;
             }
         }
 
-        &--no:hover {
+        &--no {
-            background-color: #a00;
+            --accent-colour: #a00;
         }
 
-        &--never:hover {
+        &--never {
-            background-color: #400;
+            --accent-colour: #400;
+        }
+
+        &__wrapper {
+            border-left: 1px solid var(--accent-colour);
         }
     }
 }

templates/_layout/input.twig

@@ -23,12 +23,13 @@
 {% endspaceless %}
 {% endmacro %}
 
-{% macro input_checkbox(name, text, value, class) %}
+{% macro input_checkbox(name, text, checked, class, value, radio) %}
 {% spaceless %}
-    <label class="input__checkbox{{ class|length > 0 ? ' ' ~ class : '' }}">
+    <label class="input__checkbox{% if radio %} input__checkbox--radio{% endif %}{{ class|length > 0 ? ' ' ~ class : '' }}">
-        <input type="checkbox" class="input__checkbox__input"
+        <input type="{{ radio ? 'radio' : 'checkbox' }}" class="input__checkbox__input"
             {% if name|length > 0 %}name="{{ name }}"{% endif %}
-            {% if value %}checked{% endif %}>
+            {% if checked %}checked{% endif %}
+            {% if value|length > 0 %}value="{{ value }}"{% endif %}>
         <div class="input__checkbox__display">
             <div class="input__checkbox__display__icon"></div>
         </div>

templates/manage/macros.twig

@@ -15,6 +15,8 @@
 {% endmacro %}
 
 {% macro permissions_table(permissions) %}
+    {% from '_layout/input.twig' import input_checkbox %}
+
     <div class="permissions">
         {% for perms in permissions %}
             <div class="permissions__line permissions__line--header">
@@ -37,27 +39,15 @@
                     <div class="permissions__title">
                         {{ perm.title }}
                     </div>
-                    <label class="permissions__choice permissions__choice--radio permissions__choice--yes">
+                    <div class="permissions__choice__wrapper">
-                        <input {% if perm.value == 'yes' %}checked{% endif %}
+                        {{ input_checkbox('perms[' ~ perms.section ~ '][' ~ perm.section ~ ']', '', perm.value == 'yes', 'permissions__choice permissions__choice--radio permissions__choice--yes', 'yes', true) }}
-                            class="permissions__input"
+                    </div>
-                            type="radio"
+                    <div class="permissions__choice__wrapper">
-                            name="perms[{{ perms.section }}][{{ perm.section }}]"
+                        {{ input_checkbox('perms[' ~ perms.section ~ '][' ~ perm.section ~ ']', '', perm.value == 'no', 'permissions__choice permissions__choice--radio permissions__choice--no', 'no', true) }}
-                            value="yes">
+                    </div>
-                    </label>
+                    <div class="permissions__choice__wrapper">
-                    <label class="permissions__choice permissions__choice--radio permissions__choice--no">
+                        {{ input_checkbox('perms[' ~ perms.section ~ '][' ~ perm.section ~ ']', '', perm.value == 'never', 'permissions__choice permissions__choice--radio permissions__choice--never', 'never', true) }}
-                        <input {% if perm.value == 'no' %}checked{% endif %}
+                    </div>
-                            class="permissions__input"
-                            type="radio"
-                            name="perms[{{ perms.section }}][{{ perm.section }}]"
-                            value="no">
-                    </label>
-                    <label class="permissions__choice permissions__choice--radio permissions__choice--never">
-                        <input {% if perm.value == 'never' %}checked{% endif %}
-                            class="permissions__input"
-                            type="radio"
-                            name="perms[{{ perms.section }}][{{ perm.section }}]"
-                            value="never">
-                    </label>
                 </div>
             {% endfor %}
         {% endfor %}