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

/* Outline Button White */
.u-btn-outline-white {
  @include u-button-outline ($g-color-white, $g-color-white, $g-color-gray-dark-v3);
  @include u-button-outline-hover (1, 1, $g-color-white);
  @include u-button-outline-hover (1, 2, $g-color-white);
  @include u-button-outline-hover (1, 3, $g-color-white);
  @include u-button-outline-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);
}

/* Outline Button Black */
.u-btn-outline-black {
  @include u-button-outline ($g-color-black, $g-color-black, $g-color-white);
  @include u-button-outline-hover (1, 1, $g-color-black);
  @include u-button-outline-hover (1, 2, $g-color-black);
  @include u-button-outline-hover (1, 3, $g-color-black);
  @include u-button-outline-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);
}

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

/* Outline Button Light Gray */
.u-btn-outline-lightgray {
  @include u-button-outline ($g-color-gray-light-v4, $g-color-main, $g-color-main);
  @include u-button-outline-hover (1, 1, $g-color-gray-light-v4);
  @include u-button-outline-hover (1, 2, $g-color-gray-light-v4);
  @include u-button-outline-hover (1, 3, $g-color-gray-light-v4);
  @include u-button-outline-hover (1, 4, $g-color-gray-light-v4);
  @include u-button-outline-hover (2, 1, $g-color-gray-light-v4);
  @include u-button-outline-hover (2, 2, $g-color-gray-light-v4);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Button Dribbble */
.u-btn-outline-dribbble {
  @include u-button-outline ($g-color-dribbble, $g-color-dribbble, $g-color-white);
}