/*
Your standard form button.

:hover    - Highlights when hovering.
:disabled - Dims the button when disabled.
.primary  - Indicates button is the primary action.
.smaller  - A little bit smaller now.
 
Styleguide 2.1.1.
*/
button, .button {
  padding:5px 15px;

  &.primary, &.primary:hover{
    color:#fff;
  }

  &.smaller{
    font-size:9px;
  }

  &:hover{
    color:#337797;
  }

  &:disabled{
    opacity:0.5;
  }
}

/*
A button suitable for giving stars to someone.
 
.star-given - A highlight indicating you've already given a star.
.disabled   - Dims the button to indicate it cannot be used.

Styleguide 2.2.1.
*/
a.button.star{
  display:inline-block;

  .star{ font-size:10px; }

  &.star-given{
    color:#ae7e00;
  }

  &.disabled{
    opacity:0.5;
  }
}