$success-color: #00a28b;
$warning-color: #e09f1f;
$danger-color: #de623b;

$brand-color: #008ede;

$body-text-color: #111;

// $light-color: #faf9fa;
// $dark-color: #3f4a3c;

$light-color: #fafafa;
$dark-color: #111;

$light-accent-color: #98bc92;
$dark-accent-color: #087e04;

$success-dark-color: shade( $success-color, 10 );
$warning-dark-color: shade( $warning-color, 10 );
$danger-dark-color: shade( $danger-color, 10 );
$brand-dark-color: shade( $brand-color, 10 );
$light-dark-color: shade( $light-color, 10 );
$dark-dark-color: shade( $dark-color, 10 );
$light-accent-dark-color: shade( $light-accent-color, 10 );
$dark-accent-dark-color: shade( $dark-accent-color, 10 );


$success-darker-color: shade( $success-dark-color, 10 );
$warning-darker-color: shade( $warning-dark-color, 10 );
$danger-darker-color: shade( $danger-dark-color, 10 );
$brand-darker-color: shade( $brand-dark-color, 10 );
$light-darker-color: shade( $light-dark-color, 10 );
$dark-darker-color: shade( $dark-dark-color, 10 );
$light-accent-darker-color: shade( $light-accent-dark-color, 10 );
$dark-accent-darker-color: shade( $dark-accent-dark-color, 10 );


$dark-light-color: tint( $dark-color, 10 );
$dark-lighter-color: tint( $dark-light-color, 10 );

$brand-light-color: tint( $brand-color, 20 );
$brand-lighter-color: tint( $brand-light-color, 20 );

$success-light-color: tint( $success-color, 36 );
$success-lighter-color: tint( $success-light-color, 36 );

$warning-light-color: tint( $warning-color, 36 );
$warning-lighter-color: tint( $warning-light-color, 36 );

$danger-light-color: tint( $danger-color, 36 );
$danger-lighter-color: tint( $danger-light-color, 36 );

@mixin outline_button_colors( $color ){
	color: $color;
	border-color: $color;
}

@mixin button_colors(){

	color: $light-color;
	background-color: $default-gray-color;
	
	&.brand-btn{
    	background-color: $brand-color;	
    }

    &.light-btn{
    	color: $dark-color;
    	background-color: $light-color;
    }

    &.dark-btn{
    	background-color: $dark-color;
    }

    &.light-accent-btn{
    	background-color: $light-accent-color;
    }

    &.dark-accent-btn{
    	background-color: $dark-accent-color;
    }

    &.success-btn{
    	background-color: $success-color;
    }

    &.warning-btn{
    	background-color: $warning-color;
    }

    &.danger-btn{
    	background-color: $danger-color;
    }

    &:hover,
    &:focus{

    	background-color: $default-gray-dark-color;

    	&.brand-btn{
	    	background-color: $brand-dark-color;
	    }

	    &.light-btn{
	    	background-color: $light-dark-color;
	    }

	    &.dark-btn{
	    	background-color: $dark-dark-color;
	    }

	    &.light-accent-btn{
	    	background-color: $light-accent-dark-color;
	    }

	    &.dark-accent-btn{
	    	background-color: $dark-accent-dark-color;
	    }

	    &.success-btn{
	    	background-color: $success-dark-color;
	    }

	    &.warning-btn{
	    	background-color: $warning-dark-color;
	    }

	    &.danger-btn{
	    	background-color: $danger-dark-color;
	    }
    }

    &:active{

    	background-color: $default-gray-darker-color;

	    &.brand-btn{
	    	background-color: $brand-darker-color;
	    }

	    &.light-btn{
	    	background-color: $light-darker-color;
	    }

	    &.dark-btn{
	    	background-color: $dark-darker-color;
	    }

	    &.light-accent-btn{
	    	background-color: $light-accent-darker-color;
	    }

	    &.dark-accent-btn{
	    	background-color: $dark-accent-darker-color;
	    }

	    &.success-btn{
	    	background-color: $success-darker-color;
	    }

	    &.warning-btn{
	    	background-color: $warning-darker-color;
	    }

	    &.danger-btn{
	    	background-color: $danger-darker-color;
	    }
    }

    &:disabled{
    	color: $light-color;
    	background-color: $border-gray-color;
    }

    &.outline-btn{

    	background-color: transparent;

    	// box-shadow: inset 0 0 0 $default-gray-color;
    	box-shadow: inset 0 0 0 $brand-color;    	

    	@include outline_button_colors( $default-gray-color );
	
    	&.brand-btn{
    		@include outline_button_colors( $brand-color );
	    }

	    &.light-btn{
	    	@include outline_button_colors( $light-color );
	    }

	    &.dark-btn{
	    	@include outline_button_colors( $dark-color );
	    }

	    &.light-accent-btn{
	    	@include outline_button_colors( $light-accent-color );
	    }

	    &.dark-accent-btn{
	    	@include outline_button_colors( $dark-accent-color );
	    }

	    &.success-btn{
	    	@include outline_button_colors( $success-color );
	    }

	    &.warning-btn{
	    	@include outline_button_colors( $warning-color );
	    }

	    &.danger-btn{
	    	@include outline_button_colors( $danger-color );	    	
	    }

    	&:hover,
    	&:focus{

    		background-color:transparent;
    		
	    	@include outline_button_colors( $default-gray-dark-color );

	    	box-shadow: inset 0 0 0 $brand-dark-color;
	    	// box-shadow: inset 0 0 0 $default-gray-dark-color;

	    	&.brand-btn{
		    	@include outline_button_colors( $brand-dark-color );
		    	// box-shadow: inset 0 0 0 $brand-dark-color;
		    }

		    &.light-btn{
		    	@include outline_button_colors( $light-dark-color );
		    	// box-shadow: inset 0 0 0 $light-dark-color;
		    }

		    &.dark-btn{
		    	@include outline_button_colors( $dark-dark-color );
		    	// box-shadow: inset 0 0 0 $dark-dark-color;
		    }

		    &.light-accent-btn{
		    	@include outline_button_colors( $light-accent-dark-color );
		    	// box-shadow: inset 0 0 0 $light-accent-dark-color;
		    }

		    &.dark-accent-btn{
		    	@include outline_button_colors( $dark-accent-dark-color );
		    	// box-shadow: inset 0 0 0 $dark-accent-dark-color;
		    }

		    &.success-btn{
		    	@include outline_button_colors( $success-dark-color );
		    	// box-shadow: inset 0 0 0 $success-dark-color;		    	
		    }

		    &.warning-btn{
		    	@include outline_button_colors( $warning-dark-color );
		    	// box-shadow: inset 0 0 0 $warning-dark-color;		    	
		    }

		    &.danger-btn{
		    	@include outline_button_colors( $danger-dark-color );
		    	// box-shadow: inset 0 0 0 $danger-dark-color;		    	
		    }
    	}

    	&:active{

    		background-color:transparent;

		    @include outline_button_colors( $default-gray-darker-color );

		    box-shadow: inset 0 0 0 $brand-darker-color;
    		// box-shadow: inset 0 0 0 $default-gray-darker-color;

		    &.brand-btn{
		    	@include outline_button_colors( $brand-darker-color );
		    	// box-shadow: inset 0 0 0 $brand-darker-color;
		    }

		    &.light-btn{
		    	@include outline_button_colors( $light-darker-color );
		    	// box-shadow: inset 0 0 0 $light-darker-color;
		    }

		    &.dark-btn{
		    	@include outline_button_colors( $dark-darker-color );
		    	// box-shadow: inset 0 0 0 $dark-darker-color;
		    }

		    &.light-accent-btn{
		    	@include outline_button_colors( $light-accent-darker-color );
		    	// box-shadow: inset 0 0 0 $light-accent-darker-color;
		    }

		    &.dark-accent-btn{
		    	@include outline_button_colors( $dark-accent-darker-color );
		    	// box-shadow: inset 0 0 0 $dark-accent-color;
		    } 

		    &.success-btn{
		    	@include outline_button_colors( $success-darker-color );
		    	// box-shadow: inset 0 0 0 $success-darker-color;
		    }

		    &.warning-btn{
		    	@include outline_button_colors( $warning-darker-color );
		    	// box-shadow: inset 0 0 0 $warning-darker-color;
		    }

		    &.danger-btn{
		    	@include outline_button_colors( $danger-darker-color );
		    	// box-shadow: inset 0 0 0 $danger-darker-color;
		    }
    	}

	    &:disabled{
	    	@include outline_button_colors( $border-gray-color );
	    }
    }

    &.unstyled-btn,
    &.unstyled-btn:hover,
    &.unstyled-btn:active,
    &.unstyled-btn:focus {
    	color: $brand-color;
    	background-color: transparent;
    	box-shadow:unset;
    }
}

@mixin buttons(){

	.btn,
	a.btn,
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"] {
		display: inline-block;
		width: auto;
		padding: .75rem 1.25rem;
		margin-right: 0.5rem;
	    line-height: 0.9;
	    // font-size:1rem;
	    font-size:1em;
	    font-weight: 700;
	    font-weight: 600;
	    font-weight: 500;
	    cursor: pointer;
	    text-decoration: none;
	    border: 0;
	    // border-radius:2px;
	    border-radius:0.125rem;

	    &.small-btn{
	    	padding: .5rem 1rem;
	    	// font-size:0.75rem;
	    	font-size:0.75em;
	    }

	    &.large-btn{
	    	padding: 1rem 1.5rem;
	    	// font-size:1.25rem;
	    	font-size:1.25em;
	    }

	    &:disabled{
	    	cursor: default;
	    }

	    &:focus{
	    	outline-color: $brand-color;
	    	// outline-style: solid;
	    	// outline-width: .25rem;
	    	// outline-offset: .25rem;
	    }

	    &.outline-btn{
	    	border-style:solid;
	    	// border-width:1px;
	    	border-width:2px;
	    }

	    &.unstyled-btn,
	    &.unstyled-btn:hover,
	    &.unstyled-btn:active,
	    &.unstyled-btn:focus {
	    	padding: 0;
	    	font-weight:400;
	    	text-decoration: underline;
	    	outline-offset:0;
	    	border-width:0;
	    	border-radius:0;
	    }

	    @include button_colors;
	}
	
}