- var styles = ['default', 'primary', 'success', 'warning', 'danger'];
- var icons  = {
- 	'default': 'home',
-   'primary': 'exclamation-circle',
-   'success': 'check-circle',
-   'warning': 'exclamation-triangle',
-   'danger': 'times-circle'
- };

div
	h1 Default Size
	- for (var i = 0; i < styles.length; i++)
		button(class="btn-outline " + styles[i])
			i(class="fas fa-" + icons[styles[i]])
			span #{styles[i]}
	h1 Small Size
	- for (var i = 0; i < styles.length; i++)
		button(class="btn-outline btn-outline-small " + styles[i])
			i(class="fas fa-" + icons[styles[i]])
			span #{styles[i]}
	h1 Large Size
	- for (var i = 0; i < styles.length; i++)
		button(class="btn-outline btn-outline-large " + styles[i])
			i(class="fas fa-" + icons[styles[i]])
			span #{styles[i]}

$class-name: btn-outline;
$small-class-name: btn-outline-small;
$large-class-name: btn-outline-large;

$font-family: Montserrat, sans-serif;
$transition-time: 300ms;
$transition-style: ease-in-out;

$color-white: #ffffff;
$color-dark-grey: #303030;
$color-default: #404040;
$color-primary: #1489ff;
$color-success: #00ce0d;
$color-warning: #f1da19;
$color-danger: #ff2323;

$colors: (
	"default": $color-default,
	"primary": $color-primary,
	"success": $color-success,
	"warning": $color-warning,
	"danger": $color-danger
);

$btn-outline-border-width: 3px;
$btn-outline-padding: 0.7rem;
$btn-outline-focus-box-shadow: 0 0 0 0.3rem;

$btn-outline-small-font-size: 0.8rem;
$btn-outline-small-border-width: 2px;
$btn-outline-small-padding: 0.5rem;
$btn-outline-small-focus-box-shadow: 0 0 0 0.2rem;

$btn-outline-large-font-size: 1.5rem;
$btn-outline-large-border-width: 4px;
$btn-outline-large-padding: 0.9rem;
$btn-outline-large-focus-box-shadow: 0 0 0 0.4rem;

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

.#{$class-name} {
	font-weight: bold;
	background-color: $color-white;
	border-style: solid;
	border-width: $btn-outline-border-width;
	padding: 0;
	outline: 0;
	display: inline-flex;
	overflow: hidden;
	cursor: pointer;
	transition: all $transition-time $transition-style;
	i, span {
		width: 100%;
		display: block;
		padding: $btn-outline-padding;
		margin: 0;
		box-sizing: border-box;
		flex-shrink: 0;
	}
	i {
		margin-left: -100%;
		transition: margin-left $transition-time $transition-style;
	}
	&:hover {
		color: $color-white;
		background-color: $color-default;
		i {
			margin-left: 0;
		}
	}
	@each $class-name, $color in $colors {
		&.#{$class-name} {
			color: $color;
			border-color: $color;
			&:hover {
				color: $color-white;
				background-color: $color;
			}
			&:focus {
				box-shadow: #{$btn-outline-focus-box-shadow} #{rgba($color, 0.7)};
			}
			&.#{$small-class-name}:focus {
				box-shadow: #{$btn-outline-small-focus-box-shadow} #{rgba($color, 0.7)};
			}
			&.#{$large-class-name}:focus {
				box-shadow: #{$btn-outline-large-focus-box-shadow} #{rgba($color, 0.7)};
			}
		}
	}
	&.#{$small-class-name} {
		font-size: $btn-outline-small-font-size;
		border-width: $btn-outline-small-border-width;
		i, span {
			padding: $btn-outline-small-padding;
		}
	}
	&.#{$large-class-name} {
		font-size: $btn-outline-large-font-size;
		border-width: $btn-outline-large-border-width;
		i, span {
			padding: $btn-outline-large-padding;
		}
	}
}

// -----

body {
	padding: 20px;
}