@import "variables";
.tooltip {
	&.tooltip-white, .tooltip-white & {
		opacity: 1;
		.tooltip-inner {
			background: $white;
			padding: 8px;
			color: $gray_dark;
			@include box-shadow(unquote("0 0 0 1px #dde4ec, 0 2px 4px rgba(0,0,0,.1)"));
		}
		&.top {
			.tooltip-arrow {border-top-color: $white;}
		}
		&.bottom {
			.tooltip-arrow {border-bottom-color: $white;}
		}
		&.left {
			.tooltip-arrow {border-left-color: $white;}
		}
		&.right {
			.tooltip-arrow {border-right-color: $white;}
		}
		&.tooltip-shadow {
			.tooltip-inner {
				@include box-shadow(unquote("0 0 0 1px #dde4ec, 0 2px 8px rgba(0,0,0,.4)") !important);
			}
		}
	}
	&.tooltip-blue, .tooltip-blue & {
		opacity: 1;
		.tooltip-inner {
			background: $blue;
			padding: 8px;
			color: $white;
		}
		&.top {
			.tooltip-arrow {border-top-color: $blue;}
		}
		&.bottom {
			.tooltip-arrow {border-bottom-color: $blue;}
		}
		&.left {
			.tooltip-arrow {border-left-color: $blue;}
		}
		&.right {
			.tooltip-arrow {border-right-color: $blue;}
		}
	}
	&.tooltip-blue-light, .tooltip-blue-light & {
		opacity: 1;
		.tooltip-inner {
			background: #d5e6f6;
			padding: 8px;
			color: $black;
		}
		&.top {
			.tooltip-arrow {border-top-color: #d5e6f6;}
		}
		&.bottom {
			.tooltip-arrow {border-bottom-color: #d5e6f6;}
		}
		&.left {
			.tooltip-arrow {border-left-color: #d5e6f6;}
		}
		&.right {
			.tooltip-arrow {border-right-color: #d5e6f6;}
		}
	}
	&.tooltip-blue-light-2, .tooltip-blue-light-2 & {
		opacity: 1;
		.tooltip-inner {
			background: #d5e6f6;
			padding: 8px;
			color: $black;
			@include box-shadow(0 2px 10px rgba(0, 0, 0, 0.25));
		}
		&.top {
			.tooltip-arrow {border-top-color: $blue;}
		}
		&.bottom {
			.tooltip-arrow {border-bottom-color: $blue;}
		}
		&.left {
			.tooltip-arrow {border-left-color: $blue;}
		}
		&.right {
			.tooltip-arrow {border-right-color: $blue;}
		}
	}
	&.tooltip-green, .tooltip-green & {
		opacity: 1;
		.tooltip-inner {
			background: $green_light;
			padding: 8px 12px;
			color: $color_dark;
		}
		&.top {
			.tooltip-arrow {border-top-color: $green_light;}
		}
		&.bottom {
			.tooltip-arrow {border-bottom-color: $green_light;}
		}
		&.left {
			.tooltip-arrow {border-left-color: $green_light;}
		}
		&.right {
			.tooltip-arrow {border-right-color: $green_light;}
		}
	}
	&.tooltip-red, .tooltip-red & {
		opacity: 1;
		.tooltip-inner {
			background: $red;
			padding: 8px 12px;
			color: $white;
		}
		&.top {
			.tooltip-arrow {border-top-color: $red;}
		}
		&.bottom {
			.tooltip-arrow {border-bottom-color: $red;}
		}
		&.left {
			.tooltip-arrow {border-left-color: $red;}
		}
		&.right {
			.tooltip-arrow {border-right-color: $red;}
		}
	}
	&.tooltip-shadow {
		.tooltip-inner {
			@include box-shadow(0 2px 4px rgba(0,0,0,0.1));
		}
	}
	&.tooltip-w-250 {
		.tooltip-inner {
			max-width: 250px;
		}
	}
	&.tooltip-w-300 {
		.tooltip-inner {
			max-width: 300px;
		}
	}
	&.tooltip-w-350 {
		.tooltip-inner {
			max-width: 350px;
		}
	}
	&.tooltip-w-400 {
		.tooltip-inner {
			max-width: 400px;
		}
	}
}

.popover {
	&.popover-success {
		background: #b8e986;
		border-color: #b8e986;
		&.top {
			.arrow {
				border-top-color: rgba(0, 0, 0, .075);
				&:after {
					border-top-color: #b8e986;
				}
			}
		}
		&.bottom {
			.arrow {
				border-bottom-color: rgba(0, 0, 0, .075);
				&:after {
					border-bottom-color: #b8e986;
				}
			}
		}
		&.left {
			.arrow {
				border-left-color: rgba(0, 0, 0, .075);
				&:after {
					border-left-color: #b8e986;
				}
			}
		}
		&.right {
			.arrow {
				border-right-color: rgba(0, 0, 0, .075);
				&:after {
					border-right-color: #b8e986;
				}
			}
		}
	}
}