title: SASS Mixin not working
body: <p>one of my mixins seems to not work correctly when working with hr (horizonal rule) - I think it's just reverting to the default styling. I've passed in two variables which are simply the colors of the radial gradient. Could someone please tell me what I'm doing wrong because I can't quite see it. I have added the correct includes and imports in the file.</p>
  
  <pre><code>&lt;hr class="fancy-line"&gt;
  __________________________________________________________
  
  @mixin horizontal-line-styles ($color1, $color2) {
      hr { 
          border: 0; 
          height: 1px;
      &amp;:after {
          content:'';
          height: 0.5em;
          top: 1px;
      }
      &amp;:before, hr:after {
          content: '';
          position: absolute;
          width: 100%;
      }
      hr, hr:before {
          background: radial-gradient(ellipse at center, $color1 0%, $color2 75%);
      }
    }
  } 
  __________________________________________________________
  .fancy-line {
      @include horizontal-line-styles(#e0afaf, #e0afaf); 
  }
  </code></pre>