Use a mixin rather than @extend for style composition

Using @extend with a class declared in a different source file
prevents local reasoning about the final set of rules
that will apply for a class because that depends on
what order the components are included.

See http://csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/
for additional reasons to avoid @extend in most cases.

h/static/styles/dropdown-menu-btn.scss

+@import './primary-action-btn';
+
 // the primary action button for a form
 .dropdown-menu-btn {
   $text-color: $color-seashell;
@@ -12,7 +14,7 @@
   position: relative;
 
   &__btn {
-    @extend .primary-action-btn;
+    @include primary-action-btn;
 
     // the label occupies the entire space of the button and
     // shows a darker state on hover

h/static/styles/primary-action-btn.scss

-// A dark grey button used for the primary action
-// in a form
-.primary-action-btn {
+@mixin primary-action-btn {
   // note that there is currently some duplication here between
   // the styling for this element and <dropdown-menu-btn>
   color: $color-seashell;
@@ -24,6 +22,12 @@
   }
 }
 
+// A dark grey button used for the primary action
+// in a form
+.primary-action-btn {
+  @include primary-action-btn;
+}
+
 .primary-action-btn--short {
   height: 30px;
 }