/*
	Mixin for breadcrumbs style.
	Parameters:
	- $breadcrumbs-name   :	The class name for the breadcrumbs style.
	- $breadcrumbs-style :	The style of the breadcrumbs separator character. [1][2][3]
	Notes:
	- [1] : $breadcrumbs-style accepts the values 1, 2 or 3. If an invalid value is
		supplied, it will be treated as 3.
	- [2] : The three provided styles are as follows:
	  - $breadcrumbs-style == 1 : forward slash.
	  - $breadcrumbs-style == 2 : greater than symbol.
	  - $breadcrumbs-style == 3 : right angle symbol (default).
	- [3] : The value of $breadcrumbs-style can be omitted and will default to 3.
*/
@mixin make-breadcrumbs($breadcrumbs-name, $breadcrumbs-style: 3){
	.#{$breadcrumbs-name}{
		list-style: none;
		& > li{
			display: inline-block;
			& + li:before{
				@if $breadcrumbs-style == 1{
					content: '\002f\00a0';
				}
				@else if $breadcrumbs-style == 2{
					content: '\003e\00a0';
				}
				@else{
					content: '\27e9\00a0';
				}
			}
		}
	}
}
/*
	Mixin for generic container style.
	Parameters:
	- $container-name          : The class name for the generic container.
	- $container-color         : The text color of the generic container.
	- $container-bg-color      : The background color of the generic container.
	- $container-border        : The border style of the generic container.
	- $container-border-radius : The border-radius of the generic container.
	- $container-padding       : The content badding of the generic container.
	Notes:
	- [1] : This mixin is also used for making alerts and panels.
*/
@mixin make-generic-container($container-name, $container-color, $container-bg-color, $container-border, $container-border-radius, $container-padding){
	.#{$container-name}{
		border: $container-border;
		border-radius: $container-border-radius;
		background-color: $container-bg-color;
		color: $container-color;
		padding: $container-padding;
	}
}
/*
	Mixin for generic alert style.
	Parameters:
	- $alert-name          : The class name for the alert.
	- $alert-color         : The text color of the alert.
	- $alert-bg-color      : The background color of the alert.
	- $alert-border        : The border style of the alert.
	- $alert-border-radius : The border-radius of the alert.
	- $alert-padding       : The content badding of the alert.
	- $close-name          : The class name for the close utility. [1]
	Notes:
	- [1] : The value of $close-name must match that of the class specified
		for close elements for the alert to work correctly.
	- [2] : This mixin uses `make-generic-container` to partially generate its
		CSS.
*/
@mixin make-alert(	$alert-name, $alert-color, $alert-bg-color, $alert-border, 
					$alert-border-radius, $alert-padding, $close-name			){
	@include make-generic-container($alert-name+' + div', $alert-color, $alert-bg-color, $alert-border, $alert-border-radius, $alert-padding);
	input[type="checkbox"].#{$alert-name}{
		display: none;
		& + div{
			display: none;
			position: relative;
			& a{
				font-weight: 700;
				text-decoration: none;
				color: darken($alert-color, 10%);
				&:hover, &:active, &:focus{
					text-decoration: underline;
				}
			}
			& .#{$close-name}{
				position: absolute;
				top: $alert-padding;
				right: $alert-padding;
				color: $alert-color;
				&:hover, &:active, &:focus{
					color: darken($alert-color, 10%);
				}
			}
		}
	}
	input[type="checkbox"]:checked.#{$alert-name} + div{
		display: block;
	}
}
/*
	Mixin for generic panel style.
	Parameters:
	- $panel-name            : The class name for the panel.
	- $panel-color           : The text color of the panel.
	- $panel-bg-color        : The background color of the panel.
	- $panel-border          : The border style of the panel.
	- $panel-border-radius   : The border-radius of the panel.
	- $panel-padding         : The content badding of the panel.
	- $panel-header-name     : The class name for the panel's header.
	- $panel-header-color    : The text color of the panel's header.
	- $panel-header-bg-color : The background color of the panel's header.
	- $panel-header-padding  : The padding of the panel's header.
	Notes:
	- [1] : This mixin uses `make-generic-container` to partially generate its
		CSS.
*/
@mixin make-panel(	$panel-name, $panel-color, $panel-bg-color, $panel-border, 
					$panel-border-radius, $panel-padding, $panel-header-name, 
					$panel-header-color, $panel-header-bg-color, $panel-header-padding	){
	@include make-generic-container($panel-name, $panel-color, $panel-bg-color, $panel-border, $panel-border-radius, 0);
	.#{$panel-name}{
		& > *{
			padding: $panel-padding;
		}
		& .#{$panel-header-name}{
			border: 0;
			border-bottom: $panel-border;
			color: $panel-header-color;
			background-color: $panel-header-bg-color;
			padding: $panel-header-padding;
			margin: 0;
		}
	}
}
/*
	Mixin for generic popover style.
	Parameters:
	- $popover-name          : The name for the popover style
	- $popover-direction     : The direction of the popover. [1]
	- $popover-border-radius : The border radius for the popover style.
	- $popover-distance      : The distance for the popover style's placement. [2]
	- $popover-color         : The text color of the popover style.
	- $popover-bg-color      : The background color of the popover style.
	- $popover-padding       : The padding of the popover.
	Notes:
	- [1] : The values that $popover-direction accepts are 'top' and 'bottom'. If an invalid value
		is provided, it will be treated as 'bottom'.
	- [2] : The value of $popover-distance should be treated as a general guideline for the popover
		distance and is supposed to be tweaked with inline styles or helper classes for better use.
*/
@mixin make-popover(	$popover-name, $popover-direction, $popover-border-radius, 
						$popover-distance, $popover-color, $popover-bg-color, $popover-padding	){
	input[type="checkbox"]{
		&.#{$popover-name}{
			display:none;
			+ label{
				position: relative;
			}
			+ label > .#{$popover-name}{
				position: absolute;
				display: none;
				background-color: $popover-bg-color;
				color: $popover-color;
				border-radius: $popover-border-radius;
				padding: $popover-padding;
				z-index: 998;
				width: auto;
				@if $popover-direction == 'top'
				{
					bottom: 49px;
				}
				@else{
					top: 49px;
				}				
				&:before{
					position: absolute;
					display: block;
					@if $popover-direction == 'top'
					{
						border-top: 7px solid $popover-bg-color;
						border-right: 7px solid transparent;
						border-left: 7px solid transparent;
						bottom: -7px;
					}
					@else{
						border-bottom: 7px solid $popover-bg-color;
						border-right: 7px solid transparent;
						border-left: 7px solid transparent;
						top: -7px;
					}	
					content: '';				
					left: 50%;
    				margin-left: -7px;			
				}
			}
		}
		&:checked.#{$popover-name}{
			+ label > .#{$popover-name}{
				display: block;
			}
		}
	}
}
//====================================================================
//	THE MIXINS SPECIFIED BELOW ARE EXPERIMENTAL AND MIGHT NOT BEHAVE
//	AS DOCUMENTED. EXERCISE CAUTION IF YOU USE THEM!
//====================================================================
/*
	Mixin for generic button states.
	Parameters:
	- $button-states-name :	The class name of the stateful button.
	Notes:
	- [1] : This mixin is experimental, it might be buggy.
*/
@mixin make-button-states($button-states-name){
	input[type="checkbox"]{
		&.#{$button-states-name}{
			display: none;
			& + label{
				display: block;
				& + label{
					display: none;
				}
			}
		}
		&:checked{
			& + label{
				display: none;
				& + label{
					display: block;
				}
			}
		}
	}
}
/*
	Mixin for generic button groups.
	Parameters:
	- $btn-group-name          :	The class name of the button group.
	- $btn-name                :	The name of the button class. [1][2]
	- $btn-group-border        :	The border style of the button group.
	- $btn-group-border-radius :	The border radius at the edges of the button group.
	Notes:
	- [1] :	The value of $btn-name must match that of the generic button class.
	- [2] : The value of $btn-name can be hacked to allow for button variants to be styled
		in custom manners (e.g. if you button class is `btn` and your button variant's class
		is `blue`, you can style it, using `btn +'.blue'`).
	- [3] : This mixin is experimental, although it is marked stable for most cases.
	- [4] : The results of this mixin are purely stylistic and do not provide any grouping
		functionality.
*/
@mixin make-btn-group($btn-group-name, $btn-name, $btn-group-border, $btn-group-border-radius){
	.#{$btn-group-name}{
		& .#{$btn-name}{
			border: $btn-group-border;
			margin: 0;
			&:not(:first-child):not(:last-child){
				border-radius: 0;
				border-right: 0;
			}
			&:first-child{
				border-radius: $btn-group-border-radius 0 0 $btn-group-border-radius;
				border-right: 0;
			}
			&:last-child{
				border-radius: 0 $btn-group-border-radius $btn-group-border-radius 0;
			}
		}
	}
}