// --------------------------------------------------------------------------------------------
// INFO BOX
// --------------------------------------------------------------------------------------------

.basel-info-box,
.basel-info-box2 {
	margin-bottom: 30px;

	.box-icon-wrapper {
		position: relative;
		z-index: 1;

		svg {
			width: inherit !important;
			height: inherit !important;
		}
	}

	.info-box-content {
		position: relative;
		// line-height: 1.7;

		p {
			// line-height: 1.7;

			&:first-child:empty {
				display: none;
			}
		}

		// h1, h2, h3, h4, h5, h6 {
		// 	line-height: 1.4;
		// }

		p, h1, h2, h3, h4, h5, h6 {
			margin-bottom: 15px;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	.info-btn-wrapper {
		position: relative;
		padding-top: 15px;
		z-index: 2;
	}

	.info-box-icon { // need for lazy load image
		display:inline-block;
		overflow:hidden;
	}

	&.icon-alignment-top {

		// .info-icon,
		// .info-svg-wrapper {
		.box-icon-wrapper {
			margin-bottom: 15px;
			display: inline-block;
		}
	}

	&.icon-alignment-left {

		// .info-icon,
		// .info-svg-wrapper {
		.box-icon-wrapper {
			margin-right: 15px;		
		}
	}

	&.icon-alignment-right {

		// .info-icon,
		// .info-svg-wrapper {
		.box-icon-wrapper {
			margin-left: 15px;		
		}
	}

	&.btn-position-hover {

		&:hover {

			.info-btn-wrapper {
				top: 100%;
				opacity: 1;
				visibility: visible;
			}
		}

		.info-btn-wrapper {
			position: absolute;
			top: 110%;
			opacity: 0;
			visibility: hidden;
			-webkit-transition:top 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
			transition:top 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
		}


		&.text-center {

			.info-btn-wrapper {
				left:50%;
				-webkit-transform: translateX(-50%);
				-ms-transform: translateX(-50%);
				transform: translateX(-50%);
			}
		}

		&.text-left {

			.info-btn-wrapper {
				left: 0;
			}
		}

		&.text-right {

			.info-btn-wrapper {
				right: 0;
			}
		}
	}

	//BOX-STYLE-BASE

	&.box-style-base:not(.btn-position-hover) {  //large space above button fix

		.info-box-content {

			p + .info-btn-wrapper {
				padding-top: 0;
			}
		}
	}

	//BOX-STYLE-BORDER

	&.box-style-border {

		.box-icon-wrapper {
			display: inline-block;
			margin-left: 0;
			margin-right: 0;
		}

		.info-box-content {
			padding: 50px 20px 20px 20px;
			border: 4px solid rgba(97, 97, 97, 0.09);

			p, h1, h2, h3, h4, h5, h6 {
	
				&:nth-last-child(2) {
					margin-bottom: 0;
				}
			}
		}
		
		.info-btn-wrapper {
			margin-bottom: -40px;

			a {
				font-size: 14px;
				padding-top: 10px;
				padding-bottom: 10px;
				padding-left: 20px;
				padding-right: 20px;
			  	line-height: 18px;
			 	border:1px solid $primary-color;
			 	text-transform: uppercase;
				letter-spacing: .3px;
				background-color: $primary-color;
				color:white;
				opacity: 1;

				&:hover,
				&:focus {
					background-color: $primary-color;
					color:white;
					border-color:$primary-color;
					opacity: 0.8;
				}
			}
		}

		&.btn-position-hover {

			.info-btn-wrapper {
				padding-top: 0;
				margin-top: -17px;
			}

			&.text-left {
	
				.info-btn-wrapper {
					left: 20px;
				}
			}
	
			&.text-right {
	
				.info-btn-wrapper {
					right: 20px;
				}
			}
		}
	}

	//BOX-STYLE-SHADOW

	&.box-style-shadow {
		padding: 20px;
		transition: box-shadow 0.3s ease;
		-webkit-transition: box-shadow 0.3s ease;
		-ms-transition: box-shadow 0.3s ease;
		background-color: white;

		backface-visibility: hidden;
		perspective: 800px;
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 800px;

		&:hover,
		&:focus {
			box-shadow: 0 1px 9px rgba(0, 0, 0, 0.09);
		}

		&.btn-position-hover {
			padding-bottom: 60px;
		}

		.info-box-content { //large space under button fix

			p {
	
				&:nth-last-child(2) {
					margin-bottom: 0;
				}
			}
		}
	}
}

// ------------------------------------
// INFO BOX FLOAT
// ------------------------------------

.basel-info-box {
	@include clear-element;

	&.icon-alignment-left,
	&.icon-alignment-right {

		// .info-icon,
		// .info-svg-wrapper {
		.box-icon-wrapper {
			margin-bottom: 15px;
		}
	}

	&.icon-alignment-left {

		// .info-icon,
		// .info-svg-wrapper {
		.box-icon-wrapper {
			float:left;
		}
	}

	&.icon-alignment-right {

		// .info-icon,
		// .info-svg-wrapper {
		.box-icon-wrapper {
			float:right;
		}
	}

	//BOX STYLE BORDER

	&.box-style-border {

		// .info-icon,
		// .info-svg-wrapper {
		.box-icon-wrapper {
			margin-bottom: 0;
		    float:none;
		}

		.info-box-icon {
			margin-bottom: -45px;
		}
	}
}

// ------------------------------------
// INFO BOX FLEX
// ------------------------------------

.basel-info-box2 {

	&.icon-alignment-left,
	&.icon-alignment-right {
		display: flexbox;
		display: flex;
		display: -webkit-flex;
		display: -ms-flex;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;

		.box-icon-wrapper {
			flex: 0 0 auto;
			-webkit-flex: 0 0 auto;
			-ms-flex: 0 0 auto;
		}

		.info-box-content {
			flex: 1 1 auto;
			-webkit-flex: 1 1 auto;
			-ms-flex: 1 1 auto;
		}
	}

	&.icon-alignment-left {
		flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
	}

	&.icon-alignment-right {
		flex-direction: row-reverse;
		-webkit-flex-direction: row-reverse;
		-ms-flex-direction: row-reverse;
	}

	&.box-style-border {

		&.icon-alignment-top {

			// .info-icon,
			// .info-svg-wrapper {
			.box-icon-wrapper {
				margin-bottom: 0;
			}

			.info-box-icon {
			    margin-bottom: -45px;
			}
		}

		&.icon-alignment-left {

			.info-box-icon {
			    margin-right: -45px;	
			}
			
			.info-box-content {
				padding: 20px 20px 20px 50px;
			}
		}

		&.icon-alignment-right {

			.info-box-icon {
			    margin-left: -45px;	
			}
			
			.info-box-content {
				padding: 20px 50px 20px 20px;
			}
		}
	}
}