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

@tabs_container_background_color: default;
@tabs_container_border_color: default;
@tabs_container_border_width: default;
@has_tabs_container_border_width: default;
@tabs_container_border_radius: default;
@tabs_container_padding: 12px 10px 0px 10px;
@tabs_container_tabs_align: default;
@tabs_container_tabs_position: top;

@tabs_background_color: default;
@tabs_background_hover_color: default;
@tabs_title_color: default;
@tabs_title_hover_color: default;
@tabs_font_family: default;
@tabs_font_weight: default;
@tabs_font_size: 18px;
@tabs_border_color: default;
@tabs_border_hover_color: default;
@tabs_border_width: default;
@has_tabs_border_width: default;
@tabs_border_hover_width: default;
@has_tabs_border_hover_width: default;
@tabs_border_radius: default;
@tabs_padding: 16px 15px 16px 15px;
@tabs_margin: 0px 5px 0px 5px;

@panels_background_color: default;
@panels_font_family: default;
@panels_font_weight: default;
@panels_font_size: 16px;
@panels_font_color: default;
@panels_border_width: default;
@has_panels_border_width: default;
@panels_border_color: default;
@panels_border_radius: default;
@panels_padding: 30px 30px 30px 35px;

@responsive_breakpoint: default;
@tabs_position_mobile: default;

.sow-tabs {

	.sow-tabs-tab-container {
		background-color: @tabs_container_background_color;
		border-radius: @tabs_container_border_radius;
		display: flex;
		padding: @tabs_container_padding;

		& when ( @tabs_container_tabs_position = top ), ( @tabs_container_tabs_position = bottom ) {
			flex-wrap: wrap;
		}

		& when ( @tabs_container_tabs_position = left ), ( @tabs_container_tabs_position = right ) {
			flex-direction: column;
		}

		& when ( @tabs_container_tabs_align = middle ), ( @tabs_container_tabs_align = center )  {
			justify-content: center;
		}

		& when ( @tabs_container_tabs_align = top ), ( @tabs_container_tabs_align = left ) {
			align-items: flex-start;
		}

		& when ( @tabs_container_tabs_align = bottom ), ( @tabs_container_tabs_align = right ) {
			justify-content: flex-end;
		}

		//noinspection CssOptimizeSimilarProperties
		& when ( @has_tabs_container_border_width = true ) {
			border-color: @tabs_container_border_color;
			border-style: solid;
			border-width: @tabs_container_border_width;
		}

		.sow-tabs-tab {
			background-color: @tabs_background_color;
			border-radius: @tabs_border_radius;
			color: @tabs_title_color;
			cursor: pointer;
			display: inline-block;
			font-family: @tabs_font_family;
			font-size: @tabs_font_size;
			font-weight: @tabs_font_weight;
			margin: @tabs_margin;
			padding: @tabs_padding;
			transition: all 0.3s;

			//noinspection CssOptimizeSimilarProperties
			& when ( @has_tabs_border_width = true ) {
				border-color: @tabs_border_color;
				border-style: solid;
				border-width: @tabs_border_width;
			}

			&.sow-tabs-tab-selected, &:hover {
				background-color: @tabs_background_hover_color;
				border-radius: @tabs_border_radius;
				color: @tabs_title_hover_color;

				//noinspection CssOptimizeSimilarProperties
				& when ( @has_tabs_border_hover_width = true ) {
					border-color: @tabs_border_hover_color;
					border-style: solid;
					border-width: @tabs_border_hover_width;
				}
			}

			.sow-tabs-title {
				line-height: 1;
				display: flex;
				align-items: center;
			}

			.sow-tab-icon-image {
				width: auto;
				height: @tabs_font_size;
			}

			.sow-tabs-title-icon-left > .sow-tab-icon-image,
			.sow-tabs-title-icon-left > span[data-sow-icon] {
				margin-right: 5px;
			}

			.sow-tabs-title-icon-right > .sow-tab-icon-image,
			.sow-tabs-title-icon-right > span[data-sow-icon] {
				margin-left: 5px;
			}
		}
	}

	.sow-tabs-panel-container {
		border-radius: @panels_border_radius;
		background-color: @panels_background_color;
		color: @panels_font_color;
		position: relative;

		//noinspection CssOptimizeSimilarProperties
		& when( @has_panels_border_width = true ) {
			border-color: @panels_border_color;
			border-style: solid;
			border-width: @panels_border_width;
		}

		.sow-tabs-panel {
			padding: @panels_padding;

			.sow-tabs-panel-content {
				font-family: @panels_font_family;
				font-weight: @panels_font_weight;
				font-size: @panels_font_size;
			}
		}
	}

	& when not ( @tabs_container_tabs_position = top ) {
		display: flex;
	}

	& when ( @tabs_container_tabs_position = bottom ) {
		flex-direction: column-reverse;
	}

	
	& when ( @tabs_container_tabs_position = left ), ( @tabs_container_tabs_position = right ) {
		& when ( @tabs_container_tabs_position = right ) {
			flex-direction: row-reverse;
		}

		.sow-tabs-panel-container {
			flex: 1;
		}

		.sow-tabs-tab {
			display: block !important;
		}
	}

	& when not ( @tabs_position_mobile = default ) {
		@media (max-width: @responsive_breakpoint) {
			& when ( @tabs_position_mobile = left ) {
				flex-direction: column;
			}

			& when ( @tabs_position_mobile = right ) {
				flex-direction: column-reverse;
			}

			.sow-tabs-tab-container {
				padding-bottom: 12px;

				.sow-tabs-tab {
					box-sizing: border-box;
					margin: 0;
					width: 100%;
				}
			}
		}
	}
}