@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;
@center_items: 3;
@feature_spacing: 25px;
@feature_spacing_mobile: default;

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

@responsive_breakpoint: 520px;

.sow-features-list {
	display: flex;
	flex-wrap: wrap;
	gap: @feature_spacing;
	list-style: none;
	margin: 0;
	padding: 0;

	& when ( @more_text_bottom_align = true ) {
		align-items: stretch;
	}
	& when ( @center_items = 1 ) {
		justify-content: center;
	}

	.sow-features-feature {
		.box-sizing(border-box);
		margin: 0;
		position: relative;
		& when ( @more_text_bottom_align = true ) {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

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

			&:nth-of-type(@{per_row}n) {
				padding-right: 0;
			}
		}
		&.sow-icon-container-position-top {
			text-align: center;

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

				& when not ( @per_row = 1 ) and not ( @more_text_bottom_align = true ) {
					margin: 0 auto 10px;
				}
			}
		}

		&.sow-icon-container-position-right {
			align-items: center;

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

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

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

		& when ( @more_text_bottom_align = true ) {
			&.sow-icon-container-position-right,
			&.sow-icon-container-position-left {

				& > div {
					height: 100%;

					.sow-icon-container {
						margin: 0 auto;
					}
				}

				.textwidget {
					height: 100%;
				}
			}
		}

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

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

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

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

			& when ( @more_text_bottom_align = true ) {
				margin: auto;
			}

			&:not(.sow-container-none) [class^="sow-icon-"],
			.sow-icon-image {
				align-items: center;
				color: #fff;
				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;
		}

		.sow-features-feature-text,
		.sow-features-feature-text p {
			.font(@text_font, @text_font_weight);
			color: @text_color;
			font-size: @text_size;
			font-style: @text_font_style;
			& when ( @more_text_bottom_align = true ) {
				@media (min-width: @responsive_breakpoint) {
					height: 100%;
				}
			}
		}

		.sow-features-feature-title {
			.font(@title_font, @title_font_weight);
			color: @title_color;
			font-size: @title_size;
			font-style: @title_font_style;
		}

		& when ( @more_text_bottom_align = true ) {
			.sow-features-feature-right-left-container {
				display: flex;
				flex-direction: inherit;
			}

			&.sow-icon-container-position-right,
			&.sow-icon-container-position-left {
				align-items: baseline;
				.textwidget {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}
			}

			&.sow-icon-container-position-bottom .sow-icon-container {
				order: 3;
			}
		}

		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;

			a {
				color: inherit;
				font-weight: 500;
				text-decoration: none;

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

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

			.sow-features-feature-title,
			.sow-features-feature-text,
			.sow-icon-container {
				position: relative;
				z-index: 1;
			}
		}
	}

	@media (max-width: @responsive_breakpoint) {
		gap: @feature_spacing_mobile;

		&.sow-features-responsive {
			.sow-features-feature  {
				flex-direction: row !important;
				justify-content: center;
			}

			.sow-icon-container-position-top,
			.sow-icon-container-position-right,
			.sow-icon-container-position-left {
				flex-direction: column !important;
			}

			.sow-icon-container-position-bottom {
				flex-direction: column-reverse !important;
			}

			& when ( @more_text_bottom_align = true ) {
				.sow-icon-container-position-right > div,
				.sow-icon-container-position-left > div {
					height: auto;
					text-align: center;
				}
			}

			.sow-features-feature {
				width: 100% !important;
			}

			.sow-features-feature-content,
			.sow-features-feature-title,
			.sow-more-text {
				text-align: center;
			}

			.sow-icon-container-position-left .sow-icon-container,
			.sow-icon-container-position-right .sow-icon-container {
				display: flex;
				justify-content: center;
				width: 100%;
			}

			.sow-icon-container-position-left .sow-icon-container {
				margin-left: 0;
			}

			.sow-icon-container-position-right .sow-icon-container {
				margin-right: 0;
			}
		}
	}
}