/* 
  Declare all styles using placeholder selectors using the same old BEM syntax we all know and love.
*/

%button {
  background: #45beff;
  border: none;
  padding: 1em 2em;
  font-size: 16px;
  
  &:hover {
    opacity: 0.75;
  }
}

%button--green {
  background: #3efa95;
}

%button--red {
  background: #ff3a6a;
}


%button--large {
  font-size:20px;
}

%button--rounded {
  border-radius: 10px;
}


/* 
  Assemble our button, exposing modifiers we plan on using in our markup by extending placeholder selectors 
*/

.button {
    @extend %button;
    
    /* 
       Prefixing modifiers with '-', and only decalring them within the scope of what they are modifying ensures that they'll never cause a conflict
    */
  
    &.-green {
        @extend %button--green;
    }
  
    %button--red {
      background: #ff3a6a;
    }
   
    &.-large {
        @extend %button--large;
    }
   
    &.-rounded {
        @extend %button--rounded;
    }
}


/*
  Save even more clutter by saving commonly used modifier combinations as new modifier class
*/

.button--save {
  @extend %button;
  @extend %button--large;
  @extend %button--rounded;
  @extend %button--green;
}

.button--delete {
  @extend %button;
  @extend %button--large;
  @extend %button--rounded;
  @extend %button--red;
}



/*
  If you really need to override something, (like the changing opacity on hover), you could create override rules like so:
*/

.overrides {
  &.-disable {
    opacity: 0.25;
  }
}






// DEMO STYLES
body {
  font-family: sans-serif;
}