fix separator visibility when items are hidden

src/styles/clay/_base.scss

@@ -107,9 +107,11 @@ label {
 .component {
   padding-bottom: $item-spacing-v;
 
-  &.disabled > * {
+  &.disabled {
-    opacity: 0.25;
     pointer-events: none;
+    > * {
+      opacity: 0.25;
+    }
   }
 }
 
@@ -119,7 +121,7 @@ label {
   margin-bottom: 1rem;
   box-shadow: $color-gray-1 0 0.15rem 0.25rem;
 
-  .component {
+  > .component {
     padding-top: $item-spacing-v;
     padding-right: $item-spacing-h;
     padding-left: $item-spacing-h;
@@ -147,14 +149,28 @@ label {
     }
   }
 
-  .component-heading:first-child {
+  // don't show the separator for the first non-hidden item
+  > .component:not(.hide):after {
+    display: none;
+  }
+
+  > .component:not(.hide) ~ .component:not(.hide):after {
+    display: block;
+  }
+
+  > .component-heading:first-child {
     background: $color-gray-3;
     border-radius: $border-radius $border-radius 0 0;
 
+    // don't show the separator for the first non-hidden item after the heading
     &:after,
-    & + .component:after {
+    ~ .component:not(.hide):after {
       display: none;
     }
+
+    ~ .component:not(.hide) ~ .component:not(.hide):after {
+      display: block;
+    }
   }
 
 }

src/styles/clay/_vars.scss

@@ -34,14 +34,7 @@ $color-gray-9: #a4a4a4 ;
 $color-gray-10: #ececec;
 $color-gray-11: #f2f2f2;
 
-
-
-
-$global-margin: 55px;
-$form-margin: 25px;
 $button-padding: 0.7rem;
 $button-padding-ios: 0.6rem;
-$button-line-height: 13px;
-$footer-height-large: 90px;
 
 $box-shadow-small-components: $color-gray-1 0 0.1rem 0.1rem;