/* Button Primary */
.u-btn-primary {
  @include u-button-flat ($g-color-primary, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-primary);
  @include u-button-flat-hover (1, 2, $g-color-primary);
  @include u-button-flat-hover (1, 3, $g-color-primary);
  @include u-button-flat-hover (1, 4, $g-color-primary);
  @include u-button-flat-hover (2, 1, $g-color-primary);
  @include u-button-flat-hover (2, 2, $g-color-primary);
}

/* Button White */
.u-btn-white {
  @include u-button-flat ($g-color-white, $g-color-gray-dark-v3, $g-color-gray-dark-v3);
  @include u-button-flat-hover (1, 1, $g-color-white);
  @include u-button-flat-hover (1, 2, $g-color-white);
  @include u-button-flat-hover (1, 3, $g-color-white);
  @include u-button-flat-hover (1, 4, $g-color-white);
  @include u-button-outline-hover (2, 1, $g-color-white);
  @include u-button-outline-hover (2, 2, $g-color-white);
}

/* Button Black */
.u-btn-black {
  @include u-button-flat ($g-color-black, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-black);
  @include u-button-flat-hover (1, 2, $g-color-black);
  @include u-button-flat-hover (1, 3, $g-color-black);
  @include u-button-flat-hover (1, 4, $g-color-black);
  @include u-button-outline-hover (2, 1, $g-color-black);
  @include u-button-outline-hover (2, 2, $g-color-black);
}

/* Button Dark Gray */
.u-btn-darkgray {
  @include u-button-flat ($g-color-gray-dark-v2, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-gray-dark-v2);
  @include u-button-flat-hover (1, 2, $g-color-gray-dark-v2);
  @include u-button-flat-hover (1, 3, $g-color-gray-dark-v2);
  @include u-button-flat-hover (1, 4, $g-color-gray-dark-v2);
  @include u-button-flat-hover (2, 1, $g-color-gray-dark-v2);
  @include u-button-flat-hover (2, 2, $g-color-gray-dark-v2);
}

/* Button Red */
.u-btn-red {
  @include u-button-flat ($g-color-red, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-red);
  @include u-button-flat-hover (1, 2, $g-color-red);
  @include u-button-flat-hover (1, 3, $g-color-red);
  @include u-button-flat-hover (1, 4, $g-color-red);
  @include u-button-flat-hover (2, 1, $g-color-red);
  @include u-button-flat-hover (2, 2, $g-color-red);
}

/* Button Red Tomato */
.u-btn-lightred {
  @include u-button-flat ($g-color-lightred, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-lightred);
  @include u-button-flat-hover (1, 2, $g-color-lightred);
  @include u-button-flat-hover (1, 3, $g-color-lightred);
  @include u-button-flat-hover (1, 4, $g-color-lightred);
  @include u-button-flat-hover (2, 1, $g-color-lightred);
  @include u-button-flat-hover (2, 2, $g-color-lightred);
}

/* Button Dark Red */
.u-btn-darkred {
  @include u-button-flat ($g-color-darkred, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-darkred);
  @include u-button-flat-hover (1, 2, $g-color-darkred);
  @include u-button-flat-hover (1, 3, $g-color-darkred);
  @include u-button-flat-hover (1, 4, $g-color-darkred);
  @include u-button-flat-hover (2, 1, $g-color-darkred);
  @include u-button-flat-hover (2, 2, $g-color-darkred);
}

/* Button Blue */
.u-btn-blue {
  @include u-button-flat ($g-color-blue, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-blue);
  @include u-button-flat-hover (1, 2, $g-color-blue);
  @include u-button-flat-hover (1, 3, $g-color-blue);
  @include u-button-flat-hover (1, 4, $g-color-blue);
  @include u-button-flat-hover (2, 1, $g-color-blue);
  @include u-button-flat-hover (2, 2, $g-color-blue);
}

/* Button Indigo */
.u-btn-indigo {
  @include u-button-flat ($g-color-indigo, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-indigo);
  @include u-button-flat-hover (1, 2, $g-color-indigo);
  @include u-button-flat-hover (1, 3, $g-color-indigo);
  @include u-button-flat-hover (1, 4, $g-color-indigo);
  @include u-button-flat-hover (2, 1, $g-color-indigo);
  @include u-button-flat-hover (2, 2, $g-color-indigo);
}

/* Button Purple */
.u-btn-purple {
  @include u-button-flat ($g-color-purple, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-purple);
  @include u-button-flat-hover (1, 2, $g-color-purple);
  @include u-button-flat-hover (1, 3, $g-color-purple);
  @include u-button-flat-hover (1, 4, $g-color-purple);
  @include u-button-flat-hover (2, 1, $g-color-purple);
  @include u-button-flat-hover (2, 2, $g-color-purple);
}

/* Button Dark Purple */
.u-btn-darkpurple {
  @include u-button-flat ($g-color-darkpurple, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-darkpurple);
  @include u-button-flat-hover (1, 2, $g-color-darkpurple);
  @include u-button-flat-hover (1, 3, $g-color-darkpurple);
  @include u-button-flat-hover (1, 4, $g-color-darkpurple);
  @include u-button-flat-hover (2, 1, $g-color-darkpurple);
  @include u-button-flat-hover (2, 2, $g-color-darkpurple);
}

/* Button Pink */
.u-btn-pink {
  @include u-button-flat ($g-color-pink, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-pink);
  @include u-button-flat-hover (1, 2, $g-color-pink);
  @include u-button-flat-hover (1, 3, $g-color-pink);
  @include u-button-flat-hover (1, 4, $g-color-pink);
  @include u-button-flat-hover (2, 1, $g-color-pink);
  @include u-button-flat-hover (2, 2, $g-color-pink);
}

/* Button Orange */
.u-btn-orange {
  @include u-button-flat ($g-color-orange, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-orange);
  @include u-button-flat-hover (1, 2, $g-color-orange);
  @include u-button-flat-hover (1, 3, $g-color-orange);
  @include u-button-flat-hover (1, 4, $g-color-orange);
  @include u-button-flat-hover (2, 1, $g-color-orange);
  @include u-button-flat-hover (2, 2, $g-color-orange);
}

/* Button Deep Orange */
.u-btn-deeporange {
  @include u-button-flat ($g-color-deeporange, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-deeporange);
  @include u-button-flat-hover (1, 2, $g-color-deeporange);
  @include u-button-flat-hover (1, 3, $g-color-deeporange);
  @include u-button-flat-hover (1, 4, $g-color-deeporange);
  @include u-button-flat-hover (2, 1, $g-color-deeporange);
  @include u-button-flat-hover (2, 2, $g-color-deeporange);
}

/* Button Yellow */
.u-btn-yellow {
  @include u-button-flat ($g-color-yellow, $g-color-gray-dark-v3, $g-color-gray-dark-v3);
  @include u-button-flat-hover (1, 1, $g-color-yellow);
  @include u-button-flat-hover (1, 2, $g-color-yellow);
  @include u-button-flat-hover (1, 3, $g-color-yellow);
  @include u-button-flat-hover (1, 4, $g-color-yellow);
  @include u-button-flat-hover (2, 1, $g-color-yellow);
  @include u-button-flat-hover (2, 2, $g-color-yellow);
}

/* Button Aqua */
.u-btn-aqua {
  @include u-button-flat ($g-color-aqua, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-aqua);
  @include u-button-flat-hover (1, 2, $g-color-aqua);
  @include u-button-flat-hover (1, 3, $g-color-aqua);
  @include u-button-flat-hover (1, 4, $g-color-aqua);
  @include u-button-flat-hover (2, 1, $g-color-aqua);
  @include u-button-flat-hover (2, 2, $g-color-aqua);
}

/* Button Cyan */
.u-btn-cyan {
  @include u-button-flat ($g-color-cyan, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-cyan);
  @include u-button-flat-hover (1, 2, $g-color-cyan);
  @include u-button-flat-hover (1, 3, $g-color-cyan);
  @include u-button-flat-hover (1, 4, $g-color-cyan);
  @include u-button-flat-hover (2, 1, $g-color-cyan);
  @include u-button-flat-hover (2, 2, $g-color-cyan);
}

/* Button Teal */
.u-btn-teal {
  @include u-button-flat ($g-color-teal, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-teal);
  @include u-button-flat-hover (1, 2, $g-color-teal);
  @include u-button-flat-hover (1, 3, $g-color-teal);
  @include u-button-flat-hover (1, 4, $g-color-teal);
  @include u-button-flat-hover (2, 1, $g-color-teal);
  @include u-button-flat-hover (2, 2, $g-color-teal);
}

/* Button Brown */
.u-btn-brown {
  @include u-button-flat ($g-color-brown, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-brown);
  @include u-button-flat-hover (1, 2, $g-color-brown);
  @include u-button-flat-hover (1, 3, $g-color-brown);
  @include u-button-flat-hover (1, 4, $g-color-brown);
  @include u-button-flat-hover (2, 1, $g-color-brown);
  @include u-button-flat-hover (2, 2, $g-color-brown);
}

/* Button Bluegrey */
.u-btn-bluegray {
  @include u-button-flat ($g-color-bluegray, $g-color-white, $g-color-white);
  @include u-button-flat-hover (1, 1, $g-color-bluegray);
  @include u-button-flat-hover (1, 2, $g-color-bluegray);
  @include u-button-flat-hover (1, 3, $g-color-bluegray);
  @include u-button-flat-hover (1, 4, $g-color-bluegray);
  @include u-button-flat-hover (2, 1, $g-color-bluegray);
  @include u-button-flat-hover (2, 2, $g-color-bluegray);
}

/* Button Facebook */
.u-btn-facebook {
  @include u-button-flat ($g-color-facebook, $g-color-white, $g-color-white);
}

/* Button Twitter */
.u-btn-twitter {
  @include u-button-flat ($g-color-twitter, $g-color-white, $g-color-white);
}