@mixin clef-button($color) {
    text-align: center;
    display: inline-block;
    margin: 40px auto;
    background: $color;
    border: none;
    box-shadow: 3px 3px darken($color, 20%);
    border-radius: 0;
    font-weight: bold;
    font-size: 18px;
    &:hover {
        background: darken($color, 5%);
    }
}

@mixin highlight($color, $trans:0.4) {
    color: white;
    font-weight: bold;
    background: transparentize($color, $trans);
    &:hover {
        background: $color;
    }
}

@mixin widget-border() {
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    border: 1px solid #e5e5e5;
}

@mixin widget() {
    @include widget-border();
    background: white;
    padding: 20px 25px;
}