/******************************************************************
Site Name:
Author:

Stylesheet: Responsive WooCommerce Styles - Tabs

******************************************************************/

.woocommerce-tabs {
	clear: both;

	ul.tabs {
		list-style: none;
		padding: 0 0 0 1em;
		margin: 0 0 1.618em;
		overflow: hidden;
		position: relative;
		@include clearfix();
		@include menu();

		li {
			border: 1px solid darken($secondary, 10%);
			background-color: $secondary;
			display: inline-block;
			position: relative;
			z-index: 0;
			margin: 0 -5px;
			padding: 0 1em;

			a {
				display: inline-block;
				padding: 0.5em 0;
				font-weight: 700;
				color: $secondarytext;
				text-decoration: none;

				&:hover {
					text-decoration: none;
					color: lighten($secondarytext, 10%);
				}
			}

			&.active {
				background: $contentbg;
				z-index: 2;
				border-bottom-color: $contentbg;

				a {
					color: inherit;
					text-shadow: inherit;
				}

				&::before {
					box-shadow: 2px 2px 0 $contentbg;
				}

				&::after {
					box-shadow: -2px 2px 0 $contentbg;
				}
			}

			&:before,
			&:after {
				border: 1px solid darken($secondary, 10%);
				position: absolute;
				bottom: -1px;
				width: 5px;
				height: 5px;
				content: " ";
				box-sizing: border-box;
			}

			&:before {
				left: -5px;
				border-width: 0 1px 1px 0;
				box-shadow: 2px 2px 0 $secondary;
			}

			&:after {
				right: -5px;
				border-width: 0 0 1px 1px;
				box-shadow: -2px 2px 0 $secondary;
			}
		}

		&:before {
			position: absolute;
			content: " ";
			width: 100%;
			bottom: 0;
			left: 0;
			border-bottom: 1px solid darken($secondary, 10%);
			z-index: 1;
		}
	}

	.panel {
		margin: 0 0 2em;
		padding: 0;

		&.woocommerce-Tabs-panel--description {
			max-width: 700px;
		}
	}
}

@include media-breakpoint-down('sm') {

	.woocommerce-tabs {
		ul.tabs {
			padding-left: 0;
			padding-right: 10px;

			li {
				margin: 0;
				width: 100%;

				&:before,
				&:after {
					display: none;
				}

				a {
					display: block;
				}
			}
		}
	}

}

@include media-breakpoint-up('md') {

	.woocommerce-tabs {
		margin-top: 2em;
	}

}
