Modifications to block list and modal styles to accomodate selectable block list in modal

styles/components/_modal.scss

@@ -1,3 +1,5 @@
+$fixed-footer-height: 5rem + ($gap * 4);
+
 .modal {
   position: fixed;
   z-index: 3;
@@ -7,13 +9,20 @@
   bottom: 0;
   background-color: $color-overlay;
 
+  .modal__container {
+    height: 100vh;
+  }
+
   .modal__dialog {
     padding: $gap;
-    height: 100vh;
+    margin: 0 auto;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    max-width: 80rem;
+    max-height: 100%;
+    position: relative;
 
     @include media($medium-screen) {
       padding: $gap * 2;
@@ -26,14 +35,11 @@
     .modal__body {
       background-color: $color-white;
       padding: $gap * 2;
-      flex-grow: 1;
+      width: 100%;
       overflow-y: auto;
-      max-width: 80rem;
-      position: relative;
 
       @include media($medium-screen) {
         padding: $gap * 4;
-        flex-grow: 0;
       }
 
       h1, h2 {
@@ -53,20 +59,50 @@
 
       .block-list {
         margin: -$gap * 2;
+        padding-bottom: $fixed-footer-height;
 
         @include media($medium-screen) {
           margin: -$gap * 4;
         }
 
         .block-list__header {
-          display: block;
+          border-top: 0;
+        }
+
+        .block-list__item {
+          &:last-child {
+            border: 0;
+          }
+        }
+
+        .block-list__footer {
+          height: $fixed-footer-height;
+          margin: 0;
+          padding: 0 ($gap * 2);
+          display: flex;
+          justify-content: space-between;
+          position: absolute;
+          bottom: $gap;
+          left: $gap;
+          right: $gap;
+          background: $color-white;
+          border-top: 1px solid $color-gray-light;
+
+          @include media($medium-screen) {
+            bottom: $gap * 2;
+            left: $gap * 2;
+            right: $gap * 2;
+          }
+
+          @include media($large-screen) {
+            bottom: $gap * 4;
+            left: $gap * 4;
+            right: $gap * 4;
           }
 
           .action-group {
-          margin-right: $gap*4;
-          margin-left: $gap*3;
-          display: flex;
-          justify-content: space-between;
+            margin: 0;
+          }
         }
       }
 

styles/elements/_block_lists.scss

@@ -1,7 +1,7 @@
 @mixin block-list {
   @include panel-margin;
 
-  > ul {
+  ul, dl {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -72,26 +72,6 @@
     margin: -$gap 0;
   }
 
-  label {
-    margin: 0;
-    max-width: 100%;
-
-    &:hover {
-      color: $color-blue;
-    }
-
-    dd {
-      width: 94%;
-    }
-
-    &:before {
-      float: right;
-      position: relative;
-      top: $gap*4;
-      margin-right: $gap*4;
-    }
-  }
-
   .icon-link,
   .label {
     &:first-child {
@@ -115,6 +95,30 @@
 
 .block-list__item {
   @include block-list-item;
+
+  &.block-list__item--selectable {
+    > label {
+      margin: 0;
+      max-width: none;
+      display: flex;
+      flex-direction: row-reverse;
+      align-items: center;
+      justify-content: space-between;
+      &::before {
+        flex-shrink: 0;
+      }
+
+      &:hover {
+        color: $color-primary;
+      }
+    }
+
+    input:checked {
+      + label {
+        color: $color-primary;
+      }
+    }
+  }
 }
 
 .block-list__footer {

styles/elements/_typography.scss

@@ -18,11 +18,15 @@ h1, h2, h3, h4, h5, h6 {
   font-family: $font-sans;
   margin: ($gap * 2) 0;
 
-  + .subtitle * {
-    margin-top: 0;
+  .subtitle,
+  + .subtitle {
     color: $color-gray;
   }
 
+  + .subtitle, * {
+    margin-top: 0;
+  }
+
 }
 
 .h1 { @include h1; }