//
// Buttons
//

// default bootstrap
.btn{
	border-radius: $btn-border-radius-large;
	padding: 7px;
}

.btn-brand {
  @include button-variant($btn-brand-color, $btn-brand-bg, $btn-brand-border);
}
.btn-default {
  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
.btn-primary {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
// Success appears as green
.btn-success {
  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
// Info appears as blue-green
.btn-info {
  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
// Warning appears as orange
.btn-warning {
  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}

// social
.btn-social {
  @include button-variant($btn-social-color, $btn-social-bg, $btn-social-border);
}
.btn-facebook {
  @include button-variant($btn-facebook-color, $btn-facebook-bg, $btn-facebook-border);
}
.btn-twitter {
  @include button-variant($btn-twitter-color, $btn-twitter-bg, $btn-twitter-border);
}
.btn-instagram {
  @include button-variant($btn-instagram-color, $btn-instagram-bg, $btn-instagram-border);
}
.btn-whatsapp {
  @include button-variant($btn-whatsapp-color, $btn-whatsapp-bg, $btn-whatsapp-border);
}
// sizes

.btn-lg {
  // line-height: ensure even-numbered height of button next to large input
  @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large);
}
.btn-md {
  // line-height: ensure proper height of button next to small input
  @include button-size($padding-medium-vertical, $padding-medium-horizontal, $font-size-medium, $line-height-medium, $btn-border-radius-medium);
}
.btn-sm {
  // line-height: ensure proper height of button next to small input
  @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small);
}
.btn-xs {
  @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small);
}

.btn-full {
	width:100%;
}

// default template
.btn-brand {

	&.inverse {
		color: white;
		border-color: lighten($brand-institucional-secondary,10%);;
		background-color: lighten($brand-institucional-secondary,10%);;

		&:hover,
		&:focus,
		&:active {
			color: $brand-primary;
			border-color: $gray-lightest;
			background-color: $gray-lightest;
		}
	}
}

.btn-brand-inline {
	font-weight: 400;
	color: $brand-institucional-primary;
	border-color: $brand-institucional-primary;
	background-color: transparent;

	&:hover,
	&:focus,
	&:active {
		color: $brand-institucional-secondary;
		border-color: $brand-institucional-secondary;
	}

	&.inverse {
		color: lighten($brand-institucional-secondary,10%);
		border-color: lighten($brand-institucional-secondary,10%);
		background-color: transparent;

		&:hover,
		&:focus,
		&:active {
			color: $gray-lightest;
			border-color: $gray-lightest;
		}
	}
}


.btn-brand-link {
	font-weight: 400;
	color: $brand-institucional-primary;
	background-color: transparent;

	&:hover,
	&:focus,
	&:active {
		color: $brand-institucional-secondary;
		text-decoration: underline;
	}

	&.inverse {
		color: lighten($brand-institucional-secondary,10%);
		&:hover,
		&:focus,
		&:active {
			color: $gray-lightest;
		}
	}
}

// page error
.btn-brand-error {
	font-weight: 500;
	background-color: $cmb-error-background-color;
	border-color: $cmb-error-border-color;
	color: $cmb-error-color;

	&:hover,
	&:focus,
	&:active {
		background-color: darken($cmb-error-background-color,10%);
		border-color: darken($cmb-error-border-color,10%);
		color: darken($cmb-error-color,10%);
	}
}

// page offline
.btn-brand-offline {
	font-weight: 500;
	background-color: $cmb-offline-background-color;
	border-color: $cmb-offline-border-color;
	color: $cmb-offline-color;

	&:hover,
	&:focus,
	&:active {
		background-color: darken($cmb-offline-background-color,10%);
		border-color: darken($cmb-offline-border-color,10%);
		color: darken($cmb-offline-color,10%);
	}
}