%button {
	display: inline-block;
	padding: 0.3rem 1.5rem;
    font-weight: 300;
    -webkit-font-smoothing: auto;
    cursor: pointer;
    vertical-align: middle;

    font-family: $font-family-default;

    &:active {
        margin: 1px 0 -1px 0;
    }

    i {
        margin-right: 5px;
    }

    &.button-small {
        padding: 2px 10px;
        font-size: 1rem;
    }

    &.button-x-small {
        padding: 2px 8px 2px 5px;
        font-size: 0.9rem;
    }

}

@mixin button-color($color) {
	background: $color;
	color: rgba($white, 0.85);
	border-radius: $border-radius;
	&:hover {
		background: lighten($color,5%);
		color: $white;
	}
    &.dropdown-toggle {
        background: lighten($color, 5%);
        border-left: 1px solid darken($color, 5%);
    }
//	&:active {
//		box-shadow: 0 1px 0 darken($color, 12%);
//	}
}
