$_protipDefaultSkinColors: (
	'pro': #da2e2b,
	'blue': #336699,
	'red': #802731,
	'aqua': #339996,
	'dark': #333,
	'dark-transparent': rgba(20,20,20,.8),
	'black': #000,
	'leaf': #339959,
	'purple': #613399,
	'pink': #D457AA,
	'orange': #E64426,
	'white': #FFF
) !default;

$_protipDefaultSkinSizes: (

		'tiny': (
				arrow-size: 4px,
				css: (
						padding: 8px,
						font-size: 10px,
						border-radius: 3px
				)
		),

		'small': (
				arrow-size: 6px,
				css: (
						padding: 13px,
						font-size: 12px,
						border-radius: 4px
				)
		),

		'normal': (
				arrow-size: 8px,
				css: (
						padding: 16px,
						font-size: 15px,
						border-radius: 6px
				)
		),

		'big': (
				arrow-size: 10px,
				css: (
						padding: 20px,
						font-size: 18px,
						border-radius: 8px
				)
		),

		'large': (
				arrow-size: 12px,
				css: (
						padding: 20px,
						font-size: 18px,
						border-radius: 8px
				)
		)
) !default;

@mixin protipDefaultSkinArrowGenerator($skin, $arrow-size, $offset, $cornerRadiusFix) {

	///////////// TOP
	.#{$skin}[data-pt-position="top-left"],
	.#{$skin}[data-pt-position="top"],
	.#{$skin}[data-pt-position="top-right"] {
		.protip-arrow {
			top: 100%;
			left: auto;
			margin: 0 0 0 $arrow-size*-1;
			border-width: $arrow-size $arrow-size 0 $arrow-size;
		}
	}

	.#{$skin}[data-pt-position="top-left"]	.protip-arrow	{left: $offset}
	.#{$skin}[data-pt-position="top"] 		.protip-arrow	{left: 50%}
	.#{$skin}[data-pt-position="top-right"]	.protip-arrow	{left: auto; right: $offset; margin-right: $arrow-size*-1}

	///////////// BOTTOM
	.#{$skin}[data-pt-position="bottom-left"],
	.#{$skin}[data-pt-position="bottom"],
	.#{$skin}[data-pt-position="bottom-right"] {
		.protip-arrow {
			top: $arrow-size*-1;
			left: auto;
			margin: 0 0 0 $arrow-size*-1;
			border-width: 0 $arrow-size $arrow-size $arrow-size;
		}
	}

	.#{$skin}[data-pt-position="bottom-left"]		.protip-arrow	{left: $offset}
	.#{$skin}[data-pt-position="bottom"]			.protip-arrow	{left: 50%}
	.#{$skin}[data-pt-position="bottom-right"]	.protip-arrow	{left: auto; right: $offset; margin-right: $arrow-size*-1}

	///////////// LEFT
	.#{$skin}[data-pt-position="left-top"],
	.#{$skin}[data-pt-position="left"],
	.#{$skin}[data-pt-position="left-bottom"] {
		.protip-arrow {
			top: auto;
			left: 100%;
			margin: $arrow-size*-1 0 0 0;
			border-width: $arrow-size 0 $arrow-size $arrow-size;
		}
	}

	.#{$skin}[data-pt-position="left-top"]	.protip-arrow 	{top: $offset}
	.#{$skin}[data-pt-position="left"]		.protip-arrow 	{top: 50%}
	.#{$skin}[data-pt-position="left-bottom"]	.protip-arrow 	{top: auto; bottom: $offset; margin-bottom: $arrow-size*-1}

	///////////// RIGHT
	.#{$skin}[data-pt-position="right-top"],
	.#{$skin}[data-pt-position="right"],
	.#{$skin}[data-pt-position="right-bottom"] {
		.protip-arrow {
			top: auto;
			right: 100%;
			margin: $arrow-size*-1 0 0 0;
			border-width: $arrow-size $arrow-size $arrow-size 0;
		}
	}

	.#{$skin}[data-pt-position="right-top"]		.protip-arrow 	{top: $offset}
	.#{$skin}[data-pt-position="right"]			.protip-arrow 	{top: 50%}
	.#{$skin}[data-pt-position="right-bottom"]	.protip-arrow 	{top: auto; bottom: $offset; margin-bottom: $arrow-size*-1}
	/////////////

	///////////// CORNERS
	.#{$skin}[data-pt-position="top-left-corner"] {
		@if $cornerRadiusFix {
			border-bottom-right-radius: 0;
		}

		.protip-arrow {
			top: 100%;
			left: 100%;
			margin: 0 0 0 $arrow-size*-1;
			border-width: 0 $arrow-size $arrow-size 0;
		}
	}

	.#{$skin}[data-pt-position="top-right-corner"] {
		@if $cornerRadiusFix {
			border-bottom-left-radius: 0;
		}

		.protip-arrow {
			top: 100%;
			left: $arrow-size*-1;
			margin: 0 0 0 $arrow-size;
			border-width: $arrow-size $arrow-size 0 0;
		}
	}

	.#{$skin}[data-pt-position="bottom-left-corner"] {
		@if $cornerRadiusFix {
			border-top-right-radius: 0;
		}

		.protip-arrow {
			top: $arrow-size*-1;
			left: 100%;
			margin: 0 0 0 $arrow-size*-1;
			border-width: 0 0 $arrow-size $arrow-size;
		}
	}

	.#{$skin}[data-pt-position="bottom-right-corner"] {
		@if $cornerRadiusFix {
			border-top-left-radius: 0;
		}

		.protip-arrow {
			top: 0;
			left: $arrow-size*-1;
			margin: $arrow-size*-1 0 0 $arrow-size;
			border-width: $arrow-size 0 0 $arrow-size;
		}
	}

}

@mixin protipColorArrowGenerator($skin, $color) {

	///////////// TOP
	.#{$skin}[data-pt-position="top-left"],
	.#{$skin}[data-pt-position="top"],
	.#{$skin}[data-pt-position="top-right"] {
		.protip-arrow {
			border-top-color: $color;
		}
	}

	///////////// BOTTOM
	.#{$skin}[data-pt-position="bottom-left"],
	.#{$skin}[data-pt-position="bottom"],
	.#{$skin}[data-pt-position="bottom-right"] {
		.protip-arrow {
			border-bottom-color: $color;
		}
	}

	///////////// LEFT
	.#{$skin}[data-pt-position="left-top"],
	.#{$skin}[data-pt-position="left"],
	.#{$skin}[data-pt-position="left-bottom"] {
		.protip-arrow {
			border-left-color: $color;
		}
	}

	///////////// RIGHT
	.#{$skin}[data-pt-position="right-top"],
	.#{$skin}[data-pt-position="right"],
	.#{$skin}[data-pt-position="right-bottom"] {
		.protip-arrow {
			border-right-color: $color;
		}
	}
	
	///////////// CORNERS
	.#{$skin}[data-pt-position="top-left-corner"] {
		.protip-arrow {
			border-right-color: $color;
		}
	}

	.#{$skin}[data-pt-position="top-right-corner"] {
		.protip-arrow {
			border-top-color: $color;
		}
	}

	.#{$skin}[data-pt-position="bottom-left-corner"] {
		.protip-arrow {
			border-bottom-color: $color;
		}
	}

	.#{$skin}[data-pt-position="bottom-right-corner"] {
		.protip-arrow {
			border-left-color: $color;
		}
	}

}

// Sizes
@each $sizeName, $sizeMap in $_protipDefaultSkinSizes {
	$sizeSel: protip-skin-default--size-#{$sizeName};

	.#{$sizeSel} {
		@each $prop, $val in map-get($sizeMap, css) {
			#{$prop}: #{$val};
		}
	}

	@include protipDefaultSkinArrowGenerator (
		$skin: $sizeSel,
		$arrow-size: map-get($sizeMap, arrow-size),
		$offset: 20px,
		$cornerRadiusFix: 0
	);
}
// Schemes
@each $colorName, $color in $_protipDefaultSkinColors {

	$skinSel: protip-skin-default--scheme-#{$colorName};

	.#{$skinSel} {
		&.protip {
			&-container {
			    @if (lightness($color) > 40) {
				    color: #000;
				} @else {
				    color: #fff;
				}
				background: $color;
				font-family: sans-serif;
				transition: opacity 0.2s ease-out;
			}
		}
	}

	@include protipColorArrowGenerator(
		$skin: $skinSel,
		$color: $color,
	);
}