// Button
//
// Buttons are action items.
//
// Markup:
// <a href="#" class="button {$modifiers}">Link Button</a>
// <button class="button {$modifiers}">Button Element</button>
// <input type="button" class="button {$modifiers}" value="Input Element"/>
//
// :hover                - Highlight the button
// :active               - "Press" the button down when clicked.
// .info                 - Indicate information
//
// Styleguide 1
.button {
  background-color: #bbb;
  text-decoration: none;
  padding: 10px;
  cursor: pointer;

  &:hover {
    background-color: red;
  }

  &:active {
    background-color: black;
  }

  &.info {
    background-color: lightblue;
  }
}
// Button corners
//
// Buttons can be as rounded as desired.
//
// Markup:
// <a href="#" class="button {$modifiers}">Link Button</a>
// <button class="button {$modifiers}">Button Element</button>
// <input type="button" class="button {$modifiers}" value="Input Element"/>
//
// .curved                - Indicate slightly rounded buttons
// .rounded               - Indicated circular buttons
//
// Styleguide 1.1
.button {
  &.curved {
    border-radius: 10px;
  }

  &.rounded {
    border-radius: 50%;
    }
  }