/* ======================================================
    <!-- Tabs -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';
/*
 * 1. Tab Normal Effect
 * 2. Tab Rotation Effect
*/



.uix-tabs {


	/*
	 ---------------------------
	 1. Tab Normal Effect
	 ---------------------------
	 */
	&:not(.uix-tabs--rotation) {


		$maker-w: 100%;

		.uix-tabs__marker {
			height: 2px;
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
			transition: .1s ease-in-out;

			&::after {
				position: absolute;
				left: calc(50% - #{calc($maker-w/2)});
				top: 0;
				display: block;
				content: '';
				background: var(--uix-primary-text-color);
				height: 100%;
				width: $maker-w;
				z-index: 1;
			}
		}

	}

	.uix-tabs__content {

		display: none;
		padding: 1.3125rem;
		text-align: left;

		&.is-active {
			display: block;
		}
	}

	.uix-tabs__nav {


		> ul {

			border-bottom: 1px solid #DCDCDC;

			> li {
				position: relative;
				display: block;
				transition: .1s ease-in-out;
				list-style: none;
				float: left;
				min-width: 7.5rem;



				> a {
					opacity: .6;
					position: relative;
					padding: 0.625rem 1rem;
					display: block;
					text-align: center;
				}
				&.is-active {


				}
			}

			&::after {
				content: '';
				display: block;
				clear: both;
			}
		}
	}



	&.uix-tabs--center {


		.uix-tabs__nav {

			> ul {
				border-bottom: 1px solid #DCDCDC;
				font-size: 0; /*Fighting the Space Between Inline Block Elements*/
				display: block;
				width: 100%;
				text-align: center; /*require*/



				li {
					font-size: 1rem;/*Fighting the Space Between Inline Block Elements*/
					display: inline-block;
					/*require*/
					float: none;

				}
			}

		}


	}


	&.uix-tabs--normal {

		.uix-tabs__nav {

			> ul {
				border-bottom: 1px solid #DCDCDC;
				font-size: 0; /*Fighting the Space Between Inline Block Elements*/
				display: block;
				width: 100%;
				text-align: left; /*require*/


				li {
					font-size: 1rem;/*Fighting the Space Between Inline Block Elements*/
					display: inline-block;
					/*require*/
					float: none;

				}
			}

		}


	}

	/*
	 ---------------------------
	 2. Tab Rotation Effect
	 ---------------------------
	 */
	&.uix-tabs--rotation {

		.uix-tabs__content {
			position: relative;
		}
		.uix-tabs__nav {
			position: relative;
			margin: 0;

			> ul {
				border-bottom: none;
				box-sizing: border-box;
				position: relative;
				width: 300px;
				height: 300px;
				border: 1px solid #ccc;
				border-radius: 50%;
				margin: 0;
				padding: 0;
				display: inline-block;

				> li {
					//transition: all 0.1s ease; //If you use a click effect, don't set it
					margin: 0;
					padding: 0;
					box-sizing: border-box;
					position: absolute;
					width: 80px;
					height: 80px;
					background: none;
					z-index: 2;
					top: 0;
					left: 50%;
					min-width: inherit; /* Required */


					> a {
						border: 1px solid #DCDCDC;
						opacity: 1;
						width: 80px;
						height: 80px;
						line-height: 60px;
						background: #fff;
						border-radius: 100%;
					}

					&.is-active > a {
						background: var(--uix-primary-text-color);
						color: #fff;
					}

				}
			}

		}

	}
}


/* Center alignment */
.uix-t-c .uix-tabs.uix-tabs--rotation {

	.uix-tabs__nav {
		margin: 0 auto;
	}

}



@media all and (max-width: 768px) {
	.uix-tabs {

		&:not(.uix-tabs--rotation) li {
			width: 100% !important;
		}

		/* Tab Rotation Effect */
		&.uix-tabs--rotation {

			.uix-tabs__nav {
			    width: auto !important;
			}


		}


	}

}