fix radius and hover on Accordion

diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss
index 3d07bad01009f18a43a9d986779dafdb9c116514..e6e4da7bc65a77fdae43a081465e12ebfe2183cc 100644 (file)
--- a/scss/components/_accordion.scss
+++ b/scss/components/_accordion.scss
@@ -46,12 +46,19 @@ $accordion-content-padding: 1rem !default;
 @mixin accordion-container {
   list-style-type: none;
   background: $accordion-background;
-  border: $accordion-content-border;
-  border-bottom: 0;
-  border-radius: $global-radius;
   margin-#{$global-left}: 0;
 }
 
+/// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
+@mixin accordion-item {
+  &:first-child > :first-child {
+    border-radius: $global-radius $global-radius 0 0;
+  }
+  &:last-child > :last-child {
+    border-radius: 0 0 $global-radius $global-radius;
+  }
+}
+
 /// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
 @mixin accordion-title {
   display: block;
@@ -60,7 +67,12 @@ $accordion-content-padding: 1rem !default;
   font-size: rem-calc(12);
   color: $accordion-item-color;
   position: relative;
-  border-bottom: $accordion-content-border;
+  border: $accordion-content-border;
+  border-bottom: 0;
+  :last-child:not(.is-active) > & {
+    border-radius: 0 0 $global-radius $global-radius;
+    border-bottom: $accordion-content-border;
+  }
 
   &:hover,
   &:focus {
@@ -86,9 +98,13 @@ $accordion-content-padding: 1rem !default;
 @mixin accordion-content {
   padding: $accordion-content-padding;
   display: none;
-  border-bottom: $accordion-content-border;
+  border: $accordion-content-border;
+  border-bottom: 0;
   background-color: $accordion-content-background;
   color: $accordion-content-color;
+  :last-child > &:last-child {
+    border-bottom: $accordion-content-border;
+  }
 }
 
 @mixin foundation-accordion {
@@ -97,7 +113,7 @@ $accordion-content-padding: 1rem !default;
   }
 
   .accordion-item {
-    // This class doesn't need styles!
+    @include accordion-item;
   }
 
   .accordion-title {