@import "compass/css3";


input {
  display: none;
}

label {
  cursor: pointer;
  font-size: 40px;
  color: yellow;
  width: 50px;
  height: 50px;
  text-align: center;
  float: left;
  @include transition(all .2s);
  @include text-shadow(0 3px 3px darken(#34495e, 5%));

  &:hover {
    font-size: 60px;
    color: rgb(255, 255, 0);
    @include text-shadow(0 0 5px lighten(#34495e, 50%));
  }

  &:before {
    display: inline;
    width: auto;
    height: auto;
    line-height: normal;
    vertical-align: baseline;
    margin-top: 0;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    content: "\f005";
  }
}

input:checked+label~label {
  &:before {
    content: "\f006";
  }
}

#wrapper {
  display: inline-block;

  &:hover {
    label {
      &:before {
        content: "\f005";
      }

      &:hover {
        &~label:before {
          content: "\f006";
        }
      }
    }
  }
}