@import "../bootstrap/scss/functions";
@import "../base/functions";
@import "../base/variables";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";


// Base
.feature-box {
	position: relative;
	overflow: hidden;
	width: 100%;
	display: flex;
	align-items: center;
	padding: px-to-rem( 50px, 15px );
	text-align: center;
	background-color: $primary;
	border-radius: $border-radius;
}

.feature-box-body {
	width: 100%;
}

.feature-box-icon {
	position: absolute;
	top: -.15em;
	right: -.15em;
	font-size: px-to-rem( 90px * $xs-multiplier );
	color: $dark;
}

.feature-box-icon-center {
	top: -.4em;
	right: 50%;
	transform: translateX( 50% );
}

.feature-box-icon-bottom {
	top: auto;
	bottom: -.2em;
	right: -.2em;
}

.feature-box-icon-1 {
	top: auto;
	right: 15%;
	bottom: -.2em;
}

.feature-box-divider,
.feature-box-divider-top {
	position: relative;

	&::before {
		position: absolute;
		left: 50%;
		bottom: -.9em;
		width: px-to-rem( 73px );
		content: '';
		border-bottom: 2px dashed;
		transform: translateX( -50% );
	}
}

.feature-box-divider-top {
	&::before {
		bottom: auto;
		top: -.9em;
	}
}

// Modifying
.feature-box-p-0 {
	padding-bottom: 0 !important;
}

.feature-box-primary-1 {
	background-color: #5eb9af;
}

.feature-box-primary-2 {
	background-color: #98d1d8;
}

// Media
@include media-breakpoint-up( lg ) {
	.feature-box {
		padding: px-to-rem( 86px * $lg-multiplier, 15px );
	}

	.feature-box-icon {
		font-size: px-to-rem( 90px * $lg-multiplier );
	}

	.feature-box-sm {
		padding: px-to-rem( 105px * $lg-multiplier, 15px );
	}

	.feature-box-md {
		padding: px-to-rem( 100px * $lg-multiplier, 15px );
	}
}

@include media-breakpoint-up( xxl ) {
	.feature-box {
		padding: px-to-rem( 86px, 15px );
	}

	.feature-box-icon {
		font-size: px-to-rem( 90px );
	}

	.feature-box-sm {
		padding: px-to-rem( 105px, 15px );
	}

	.feature-box-md {
		padding: px-to-rem( 100px, 15px );
	}
}