@import "../../../base/less/mixins";

@title_font: default;
@title_font_weight: 400;
@title_font_style: default;
@title_size: default;
@title_color: default;
@title_tag: h5;

@text_font: default;
@text_font_weight: 400;
@text_font_style: default;
@text_size: default;
@text_color: default;

@more_text_font: default;
@more_text_font_weight: 400;
@more_text_font_style: default;
@more_text_size: default;
@more_text_color: default;
@per_row: 3;

@container_size: 84px;
@icon_size: 24px;
@use_icon_size: false;
@link_feature: default;

@responsive_breakpoint: 520px;

.sow-features-list {
	.clearfix();

	.sow-features-feature {
		.box-sizing(border-box);
		padding: 0 25px;
		position: relative;

		@media (min-width: @responsive_breakpoint) {
			&:nth-of-type(@{per_row}n+1) {
				padding-left: 0;
				clear: left;
			}

			&:nth-of-type(@{per_row}n) {
				padding-right: 0;
			}
		}

		&.sow-icon-container-position-top {
			text-align: center;

			.sow-icon-container {
				margin-bottom: 10px;
			}
		}

		&.sow-icon-container-position-right {
			text-align: left;

			.sow-icon-container {
				margin-right: 10px;
			}
		}

		&.sow-icon-container-position-left {
			text-align: left;

			.sow-icon-container {
				margin-left: 10px;
			}
		}

		&.sow-icon-container-position-bottom {
			text-align: center;

			.sow-icon-container {
				margin-top: 10px;
			}
		}

		& when ( @per_row = 1 ) {
			&.sow-icon-container-position-top, &.sow-icon-container-position-bottom {
				.sow-icon-container {
					margin: auto;
				}
			}
		}

		.sow-icon-container {
			font-size: @container_size;
			height: @container_size;
			text-decoration: none;
			width: @container_size;

			& when not ( @per_row = 1 ) {
				margin: auto;
			}

			[class^="sow-icon-"],
			.sow-icon-image {
				align-items: center;
				color: #FFFFFF;
				display: flex;
				height: @container_size;
				justify-content: center;
				position: absolute;
				text-decoration: none;
				top: 0;
				width: @container_size;

				.icon_size() when ( @use_icon_size = true) {
					background-size: @icon_size @icon_size;
				}
				.icon_size() when not ( @use_icon_size = true) {
					background-size: contain;
				}
				.icon_size();
				background-position: center;
				background-repeat: no-repeat;
			}
		}

		@{title_tag} {
			margin: 1em 0;

			a{
				color: inherit;
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}
		}

		p.sow-more-text {
			a {
				color: inherit;
				font-weight: 500;
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}
		}

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

		margin-bottom: 40px;

		&.sow-features-feature-last-row {
			margin-bottom: 0;
		}

		.textwidget {
			.font(@text_font, @text_font_weight);
			color: @text_color;
			font-size: @text_size;
			font-style: @text_font_style;
			margin: auto;

			> @{title_tag} {
				.font(@title_font, @title_font_weight);
				color: @title_color;
				font-size: @title_size;
				font-style: @title_font_style;
			}

			> p.sow-more-text {
				.font(@more_text_font, @more_text_font_weight);
				color: @more_text_color;
				font-size: @more_text_size;
				font-style: @more_text_font_style;
			}
		}

		& when ( @link_feature = 1 ) {
			.sow-features-feature-linked-column {
				bottom: 0;
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 101;
			}
		}
	}

	.sow-features-clear {
		clear: both;
	}

	@media (max-width: @responsive_breakpoint) {
		&.sow-features-responsive {
			margin: 0;

			.sow-features-feature {
				display: block !important;
				float: none !important;
				margin-bottom: 40px;
				width: 100% !important;

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

			.sow-features-clear {
				clear: none;
			}

		}
	}
}