Buttons

/* Vars */
$font:           'Nunito Sans', sans-serif;
$cb:              #000000;
$dark:            #066978;
$main:            #09a5be;
$blue:            #274684;
$white:           #ffffff;
$success:         #28a745;
$success2:        #24993f;
$danger:          #dc3545;
$danger2:         #c82333;
$warning:         #ffb92e;
$warning2:        #fdae11;
$info:            #119eb5;
$info2:           #0890a7;
$disable:         #cccccc;
$disable2:        #c3bfbf;
$default:         #607487;
$default2:        #50606e;

$btnRad:          3rem;
$btn_1_color:     $white;
$btn_1_back:      $main;
$btn_1_b_color:   $main;

$btn_1_color_h:   $white;
$btn_1_back_h:    $dark;
$btn_1_b_color_h: $dark;

$btn_2_color:     $main;
$btn_2_back:      $white;
$btn_2_b_color:   $main;

$btn_2_color_h:   $white;
$btn_2_back_h:    $main;
$btn_2_b_color_h: $main;

$btn_3_color:     $dark;
$btn_3_back:      $white;
$btn_3_b_color:   $dark;

$btn_3_color_h:   $white;
$btn_3_back_h:    $dark;
$btn_3_b_color_h: $dark;

$btn_4_color:     $white;
$btn_4_back:      $dark;
$btn_4_b_color:   $dark;

$btn_4_color_h:   $white;
$btn_4_back_h:    $main;
$btn_4_b_color_h: $main;

.button {
	display: inline-block;
	font: 700 1.6rem/4rem $font;
	height: 4rem;
	min-width: 7.55em;
	padding: 0 3rem;
	color: $btn_1_color;
	background-color: $btn_1_back;
	border: .1rem solid $btn_1_b_color;
	border-radius: $btnRad;
	text-align: center;
	white-space: nowrap;
	text-transform: capitalize;
	text-decoration: none;
	transition: 0.3s ease-out;
	cursor: pointer;
	user-select: none;
	appearance: none;
	
	&.button_2 {
		// for another height styles
		padding: 0.55em 1em 0.45em;
		line-height: normal;
		height: auto;
	}
	
	&.small {
		font-size: 1.3rem;
		height: 3.5rem;
		line-height: 3.7rem;
	}
	
	&.large{
		font-size: 2rem;
		height: 5.5rem;
		line-height: 5.5rem;
	}
	
	&.light {
		color: $btn_2_color;
		background-color: $btn_2_back;
		border-color: $btn_2_b_color;
	}
	
	&.light_2 {
		color: $btn_3_color;
		background-color: $btn_3_back;
		border-color: $btn_3_b_color;
	}
	
	&.dark {
		color: $btn_4_color;
		background-color: $btn_4_back;
		border-color: $btn_4_b_color;
	}
	
	&.button_success {
		color: $white;
		background-color: $success;
		border-color: $success;
	}
	
	&.button_danger {
		color: $white;
		background-color: $danger;
		border-color: $danger;
	}
	
	&.button_warning {
		color: $cb;
		background-color: $warning;
		border-color: $warning;
	}
	
	&.button_info {
		color: $white;
		background-color: $info;
		border-color: $info;
	}
	
	&.button_disable {
		color: $cb;
		background-color: $disable;
		border-color: $disable;
	}
	
	&.button_default {
		color: $white;
		background-color: $default;
		border-color: $default;
	}
	
	span {
		display: inline-block;
		vertical-align: middle;
		position: relative;
		z-index: 3;
	}
	
	svg {
		display: inline-block;
		vertical-align: middle;
		fill: $white;
		width: 1.25em;
		height: 1.25em;
		margin-right: 0.25em;
	}
	
	&.btn_icon {
		position: relative;
		overflow: hidden;
		
		svg {
			width: 1.8rem;
			height: 1.8rem;
			fill: $white;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -3rem);
			transition: .2s linear;
			margin-right: 0;
			
		}
		
		span {
			color: $white;
			display: block;
			transition: .2s linear;
		}
	}
	
	&.button_wide {
		padding: .9rem 3rem .7rem;
		line-height: normal;
		white-space: normal;
		height: auto;
	}
	
	&.button_block {
		display: block;
		width: 100%;
	}
}

.btn_gradient{
	display: inline-block;
	font: 700 1.6rem/4.2rem $font;
	height: 4rem;
	color: $white;
	background-color: $blue;
	background-image: linear-gradient(315deg, $blue 0%, $main 74%);
	background-size: 100%;
	border: none;
	padding: 0 1.6rem;
	min-width: 7.55em;
	border-radius: $btnRad;
	white-space: nowrap;
	text-align: center;
	text-transform: capitalize;
	transition: all 0.3s;
	user-select: none;
	appearance: none;
	cursor: pointer;
	position: relative;
	z-index: 100;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background-color: $main;
		background-image: linear-gradient(315deg, $main 0%, $blue 74%);
		border-radius: inherit;
		opacity: 0;
		z-index: -100;
		transition: opacity 0.45s;
	}

}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.button {
		&:hover {
			color: $btn_1_color_h;
			background-color: $btn_1_back_h;
			border-color: $btn_1_b_color_h;
			
			svg {
				fill: $btn_1_color_h;
			}
			
		}
		
		&.light {
			&:hover {
				color: $btn_2_color_h;
				background-color: $btn_2_back_h;
				border-color: $btn_2_b_color_h;
			}
		}
		
		&.light_2 {
			&:hover {
				color: $btn_3_color_h;
				background-color: $btn_3_back_h;
				border-color: $btn_3_b_color_h;
			}
		}
		
		&.dark {
			&:hover {
				color: $btn_4_color_h;
				background-color: $btn_4_back_h;
				border-color: $btn_4_b_color_h;
			}
		}
		
		&.button_success {
			&:hover {
				color: $white;
				background-color: $success2;
				border-color: $success2;
			}
		}
		
		&.button_danger {
			&:hover {
				color: $white;
				background-color: $danger2;
				border-color: $danger2;
			}
		}
		
		&.button_warning {
			&:hover {
				color: $cb;
				background-color: $warning2;
				border-color: $warning2;
			}
		}
		
		&.button_info {
			&:hover {
				color: $white;
				background-color: $info2;
				border-color: $info2;
			}
		}
		
		&.button_disable {
			&:hover {
				color: $cb;
				background-color: $disable2;
				border-color: $disable2;
			}
		}
		
		&.button_default {
			&:hover {
				color: $white;
				background-color: $default2;
				border-color: $default2;
			}
		}
		
		&.btn_icon {
			&:hover {
				svg {
					transform: translate(-50%, .9rem);
				}
				
				span {
					transform: translateY(3rem);
				}
			}
		}
	}
	
	.btn_gradient:hover::before {
		opacity: 1;
	}
}