path: root/assets/css/scss/elements/_feature-box.scss

//
// Feature box //
//
.feature-box {
	@include display-flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	min-height: 50px;
	padding-left: 74px;
	@include breakpoint-less(md) {
		padding-left: 66px;
	}
	.feature-box-icon {
		position: absolute;
		top: 0;
		left: 0;
		background: $button-grey;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		text-align: center;
		@include transition(ease-out 0.16s);
		* {
			margin: 0;
			line-height: 50px;
			vertical-align: middle;
			color: $color-black-09;
			@include transition(ease-out 0.16s);
		}
		a {
			display: block;
		}
		//
		// Positions //
		//
		&.middle {
			top: 50%;
			@include transform(translateY(-50%));
		}
	}
	h1,h2,h3,h4,h5,h6 {
		width: 100%;
	}
	&:hover {
		.feature-box-icon {
			background: $button-grey-darker;
		}
	}
	//
	// Sizes //
	//
	&.feature-box-xl {
		min-height: 70px;
		padding-left: 94px;
		@include breakpoint-less(md) {
			padding-left: 86px;
		}
		.feature-box-icon {
			width: 70px;
			height: 70px;
			* {
				line-height: 70px;
			}
		}
	}
	&.feature-box-lg {
		min-height: 60px;
		padding-left: 84px;
		@include breakpoint-less(md) {
			padding-left: 80px;
		}
		.feature-box-icon {
			width: 60px;
			height: 60px;
			* {
				line-height: 60px;
			}
		}
	}
	&.feature-box-sm {
		min-height: 40px;
		padding-left: 64px;
		@include breakpoint-less(md) {
			padding-left: 56px;
		}
		.feature-box-icon {
			width: 40px;
			height: 40px;
			* {
				line-height: 40px;
			}
		}
	}
	&.feature-box-xs {
		min-height: 32px;
		padding-left: 54px;
		@include breakpoint-less(md) {
			padding-left: 48px;
		}
		.feature-box-icon {
			width: 32px;
			height: 32px;
			* {
				line-height: 32px;
			}
		}
	}
	//
	// Colors //
	//
	&.dark {
		.feature-box-icon {
			background: $button-dark-lighter;
			* {
				color: $color-white-09;
			}
		}
		&:hover {
			.feature-box-icon {
				background: $button-dark;
			}
		}
	}
	&.white {
		.feature-box-icon {
			background: $color-white;
		}
		&:hover {
			.feature-box-icon {
				background: $color-white-09;
			}
		}
	}
	&.outline-gray, &.outline-grey {
		.feature-box-icon {
			background: transparent;
			border: 1px solid $button-grey;
		}
		&:hover {
			.feature-box-icon {
				background: $button-grey;
			}
		}
	}
	&.outline-dark {
		.feature-box-icon {
			background: transparent;
			border: 1px solid $color-black-08;
		}
		&:hover {
			.feature-box-icon {
				background: $color-dark;
				* {
					color: $color-white;
				}
			}
		}
	}
	&.outline-white {
		.feature-box-icon {
			background: transparent;
			border: 1px solid $color-white-09;
			* {
				color: $color-white-09;
			}
		}
		&:hover {
			.feature-box-icon {
				background: $color-white;
				* {
					color: $color-dark;
				}
			}
		}
	}
}