//============================================================
// SF Tabs
//============================================================

.#{$prefix}tabs {
	width: 100%;
	position: relative;

	.#{$prefix}tabs-bar {
		display: block;
		width: 100%;
		padding-bottom: 0.0625rem;

		// Make tab responsive
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;

		&::-webkit-scrollbar {
			background: transparent;
			height: 0;
		}

		> .#{$prefix}tab-nav {
			margin: 0;
			padding: 0;
			list-style: none;
		}
	}

	> .#{$prefix}tab-content {
		display: none;
		width: auto;
		padding: $comp_tab-content-padding;

		&.in {
			display: block !important;
		}

    > *:first-child[class*="sf-"] {
      margin-top: 0;
    }
	}
}

ul.#{$prefix}tab-nav {
	display: flex;
	align-content: flex-start;
	position: relative;
	margin: 0;
	margin-left: 0 !important;

	> .#{$prefix}tab-item {
		display: block;
		position: relative;
		margin: $comp_tab-link-margin;
		margin-left: 0 !important;
		
		&:first-child {
			margin-top: 0 !important;
			margin-left: 0 !important;
		}

		&:last-child {
			margin: 0;
		}

		> .#{$prefix}tab-item-link {
			display: block;
			text-align: center;
			color: $comp_tab-link-color;
			font-family: $theme-font-family;
			font-weight: $comp_tab-font-weight;
			font-size: $comp_tab-link-font-size;
			padding: $comp_tab-link-padding;
			text-decoration: none;
			text-transform: $comp_tab-link-transform;
			line-height: 1.5rem;
			letter-spacing: 0;
			position: relative;
			outline: none;
			cursor: pointer;
			word-break: normal;
			white-space: nowrap;

			&:focus, &:active {
				color: $comp_tab-link-color-active;
			}

			&:hover {
				color: $comp_tab-link-hover-color;
			}

			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				z-index: 1;
				left: 0;
				right: 0;
				height: $comp_tab-nav-border-thickness;
				background-color: transparent;
				display: none;
			}
		}

		&.active > .#{$prefix}tab-item-link {
			color: $comp_tab-link-color-active;

			&:hover {
				color: $comp_tab-nav-border-color-active;
			}

			&:after {
				height: $comp_tab-link-active-border-thickness;
				display: block;
				background-color: $comp_tab-nav-border-color-active;
				border-radius: $comp_tab-link-active-border-thickness;
			}
		}
	}	
}