// http://codepen.io/quickstep25/pen/BNOJXK
// OPTIONAL WELL STYLES
// VARS
@state-primary-bg: darken(#428bca, 6.5%);
@state-success-bg: #dff0d8;
@state-info-bg: #d9edf7;
@state-warning-bg: #fcf8e3;
@state-danger-bg: #f2dede;
// MIXINS - SHADOWS
.box-shadow(@arguments: none) {
    -webkit-box-shadow: @arguments;
       -moz-box-shadow: @arguments;
            box-shadow: @arguments;
}
// MIXINS - GRADIENT BACKGROUND
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
	background: @start-color;
	background-image:    -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); 
	background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);
	background-image:     -ms-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);
	background-image:      -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@start-percent, @start-color), color-stop(@end-percent, @end-color)); 
	background-image:         linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent);
}
// MIXINS - BOOTSTRAP - WELL VARIANT OVERRIDE
.well-variant(@state; @bg) {
    .well.bg-@{state} {
        color: darken(@bg, 65%);
        background-color: @bg;
				.vertical(@start-color: darken(@bg, 5%); @end-color: @bg);
  			border-color: darken(@bg, 10%);
  			@shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
  			.box-shadow(@shadow);
    }
}
//  WELLS - CONTEXTUAL BACKGROUNDS
.well-variant(primary;  @state-primary-bg);
.well-variant(success;  @state-success-bg);
.well-variant(info;  @state-info-bg);
.well-variant(warning;  @state-warning-bg);
.well-variant(danger;  @state-danger-bg);