//
// Tabs
//

.qazana-widget-tabs {

	&.qazana-tabs-view-vertical {

		.qazana-tabs-wrapper {
			width: 25%;
			flex-shrink: 0;
		}


		.qazana-tab-desktop-title {

			&.active {
				@include border-end-property(style, none);

				&:before,
				&:after {
					height: 999em;
					width: 0;
					@include end(0);
					@include border-end-property(style, solid);
				}

				&:before {
					top: 0;
					transform: translateY(-100%);
				}

				&:after {
					top: 100%;
				}
			}
		}
	}

	&.qazana-tabs-view-horizontal {

		.qazana-tab-desktop-title {
			display: table-cell;

			&.active {
				border-bottom-style: none;

				&:before,
				&:after {
					bottom: 0;
					height: 0;
					width: 999em;
					border-bottom-style: solid;
				}

				&:before {
					right: 100%;
				}

				&:after {
					left: 100%;
				}
			}
		}
	}

	.qazana-tab-title,
	.qazana-tab-title:before,
	.qazana-tab-title:after,
	.qazana-tab-content,
	.qazana-tabs-content-wrapper {
		border: 1px none $gray-light;
	}

	.qazana-tabs {
		text-align: $start;
	}

	.qazana-tabs-wrapper {
		overflow: hidden;
	}

	.qazana-tab-title {
		cursor: pointer;
	}

	.qazana-tab-desktop-title {
		position: relative;
		padding: 20px 25px;
		font-weight: bold;
		line-height: 1;
		border: solid transparent;

		&.active {
			border-color: $gray-light;

			&:before,
			&:after {
				display: block;
				content: '';
				position: absolute;
			}
		}
	}

	.qazana-tab-mobile-title {
		padding: 10px 10px;
		cursor: pointer;
	}

	.qazana-tab-content {
	    padding: 20px;
	    display: none;
	}
}

// Responsive mode
@media (max-width: $screen-sm-max) {

	.qazana-tabs {

		.qazana-tab-title,
		.qazana-tab-content {
			border-style: solid;
			border-bottom-style: none;
		}

		.qazana-tabs-wrapper {
			display: none;
		}

		.qazana-tabs-content-wrapper {
			border-bottom-style: solid;
		}

		.qazana-tab-content {
			padding: 10px;
		}
	}
}

@media (min-width: $screen-md-min) {

	.qazana-widget-tabs {

		&.qazana-tabs-view-vertical {

			.qazana-tabs {
				display: flex;
			}

			.qazana-tabs-content-wrapper {
				flex-grow: 1;
				border-style: solid;
				@include border-start-property(style, none);
			}
		}
	}

	.qazana-widget-tabs {

		&.qazana-tabs-view-horizontal {

			.qazana-tab-content {
				border-style: solid;
				border-top-style: none;
			}
		}
	}

	.qazana-tabs {

		.qazana-tab-mobile-title {
			display: none;
		}
	}
}