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

@nav_color_hex: #FFFFFF;
@nav_size: 25;
@nav_align: right;

// Layout.
@vertically_align: false;
// Layout Desktop.
@slide_height: default;
@slide_padding: 50px;
@slide_padding_extra_top: 0px;
@slide_padding_sides: 10px;
@slide_width: 1280px;

// Layout Mobile.
@responsive_breakpoint: 780px;
@slide_height_responsive: default;
@slide_padding_responsive: 0px;
@slide_padding_top_responsive: 0px;
@slide_padding_sides_responsive: default;

// Design.
@text_size: default;
@text_color: default;
@heading_shadow: default;
@heading_color: default;

// "Pre-fill" Layout Slider widget area if height is set
& when ( isnumber( @slide_height ) ) {
	@media (min-width: @responsive_breakpoint) {
		min-height: @slide_height;
	}
}

& when ( isnumber( @slide_height_responsive ) ) {
	@media (max-width: @responsive_breakpoint) {
		min-height: @slide_height_responsive;
	}
}

.sow-slider-base {

	ul.sow-slider-images {
		min-height: 0 !important;

		.sow-slider-image-wrapper {
			padding: ~"calc( @{slide_padding} + @{slide_padding_extra_top} )" @slide_padding_sides @slide_padding @slide_padding_sides;
			max-width: @slide_width;
			height: @slide_height;

			& when (@vertically_align = true) {
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			@media (max-width: @responsive_breakpoint) {
				// If no responsive height is set, remove slider height
				& when not ( isnumber( @slide_height_responsive ) ) {
					height: auto;
				}

				& when ( isnumber( @slide_height_responsive ) ) {
					height: @slide_height_responsive;
				}

				padding-top: @slide_padding_responsive;
				padding-top: calc(~"@{slide_padding_responsive} + @{slide_padding_top_responsive}");

				& when ( isnumber( @slide_padding_sides_responsive ) ) {
					padding-right: @slide_padding_sides_responsive;
					padding-left: @slide_padding_sides_responsive;
				}
				& when ( isnumber( @slide_padding_responsive ) ) {
					padding-bottom: @slide_padding_responsive;
				}
			}

			// These heading tag styles and the paragraph tag styles below are only be used for old version of the
			// layout slider widget which still allowed setting heading and text color and size.
			& when ( iscolor( @heading_color ) ) {
				h1, h2, h3, h4, h5, h6 {
					line-height: 1.375em;
					color: @heading_color;
					margin: 0.1em 0;

					& when ( isnumber( @heading_shadow ) ) {
						text-shadow: 0 2px 2px rgba(0, 0, 0, @heading_shadow/100);
					}

				}
			}

			& when ( iscolor( @text_color ) ) {
				p {
					color: @text_color;
					text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
					margin: 1em 0;
					font-size: @text_size;
				}
			}
		}
	}

	.sow-slider-pagination {
		text-align: @nav_align;

		li a {
			background: @nav_color_hex;
		}
	}

	.sow-slide-nav {

		font-size: ~"@{nav_size}px";

		a {
			color: @nav_color_hex;
		}
	}

}