/* 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);

}