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

@border_color: default;
@background_color: default;
@title_color: default;
@title_font_family: default;
@title_font_weight: default;
@title_font_size: default;
@subtitle_color: default;
@subtitle_font_family: default;
@subtitle_font_weight: default;
@subtitle_font_size: default;
@button_align: right;
@mobile_button_align: default;
@responsive_breakpoint: default;
@padding: 2em 2.5em;

.sow-cta-base {
	padding: @padding;

	& when ( iscolor( @border_color ) ) {
		border: 1px solid @border_color;
	}
	& when ( iscolor( @background_color ) ) {
		background-color: @background_color;
	}

	.sow-cta-text {
		.sow-cta- {
			&title {
				color: @title_color;
				font-family: @title_font_family;
				font-weight: @title_font_weight;
				font-size: @title_font_size;
			}

			&subtitle {
				color: @subtitle_color;
				font-family: @subtitle_font_family;
				font-weight: @subtitle_font_weight;
				font-size: @subtitle_font_size;
			}
		}
	}
}

.sow-cta-base {
	& when ( @button_align = top ) {
		.sow-cta-wrapper {
			display: flex;
			flex-direction: column-reverse;
			justify-content: center;

			.sow-cta-text {
				text-align: center;
			}
		}

		.so-widget-sow-button {
			margin-bottom: 1.5em;
		}
	}

	& when ( @button_align = left ) {
		.sow-cta-text {
			float: right;
		}

		.so-widget-sow-button {
			float: left;
			margin-right: 1em;
		}
	}

	& when ( @button_align = bottom ) {
		flex-direction: column;

		.sow-cta-text {
			text-align: center;
		}

		.so-widget-sow-button {
			margin-top: 1.5em;
		}
	}

	& when ( @button_align = right ) {
		.sow-cta-text {
			float: left;
		}

		.so-widget-sow-button {
			float: right;
			margin-left: 1em;
		}
	}


	@media (max-width: @responsive_breakpoint) {
		.sow-cta-wrapper {
			.so-widget-sow-button {
				margin-right: 0;
				margin-left: 0;
			}

			& when ( @mobile_button_align = above ), ( @mobile_button_align = below ) {
				display: flex;

				.so-widget-sow-button {
					float: none;
				}

				.sow-cta-text {
					text-align: center;
				}

				& when ( @mobile_button_align = above ) {
					flex-direction: column-reverse;
					justify-content: center;

					.so-widget-sow-button {
						margin-top: 0 !important;
						margin-bottom: 1em;
					}
				}

				& when ( @mobile_button_align = below ) {
					flex-direction: column;
					.so-widget-sow-button {
						margin-top: 1em !important;
						margin-bottom: 0;
					}
				}
			}
		}
	}

	.sow-cta-wrapper::after {
		clear: both;
		content: "";
		display: table;
	}
}