.cms-tabs{
	.cms-tabs-title{
		&.cms-tabs-title-desktop{
			display: flex;
			flex-wrap: wrap;
		}
		&.cms-tabs-title-mobile{
			.cms-tab-title-inner{
				border-bottom: 2px solid $white;
				background: #{'rgba(var(--color-primary-rgb), 0.5)'};
				border-right: 0;
			}
			&:not(first-child) .cms-tab-title-inner{
				border-top: 0px solid $border-color;
			}
		}
		.cms-tab-title-inner{
		    max-width: 100%;
			cursor: pointer;
			border-right: 0px solid $border-color;
			border-bottom: 0px solid $border-color;
			display: flex;
			flex-wrap: wrap;
			align-items:center;
			@include transition();
			.cms-icon{
				flex: 0 0 auto;
			    width: auto;
			    max-width: 100%;
			}
			.cms-tab-title-text{
				flex-basis: 0;
			    flex-grow: 1;
			    max-width: 100%;
			}
			&:last-child{
				border-right: 0;
			}
			.cms-icon + .cms-tab-title-text .cms-tab-title-count{
				display: none;
			}
		}
		.cms-tab-title-inner{
			flex: 0 0 100%;
			width: 100%;
		}
		.cms-tab-title-text{
			color: var(--heading-font-color);
		}
		.cms-tab-title-icon{
			margin-right: 20px;
			[dir="rtl"] &{
				margin-right: 0;
				margin-left: 20px;
			}
		}
		.cms-tab-title-count{
			width: 42px;
			height: 42px;
			line-height: 42px;
			text-align: center;
			display: inline-block;
			margin: 3px 20px 3px 0;
			background-color: $accent-color;
			color: $white;
			[dir="rtl"] &{
				margin-right: 0;
				margin-left: 20px;
			}
		}
	}
}
// Navigation type
.cms-tabs-view-vertical{
	@media (min-width: 1025px){
		.cms-tabs-wrap{
			display: flex;
			> .cms-tabs-navigation{
				.cms-tab-title{
					flex: 0 0 100% !important;
					width: 100% !important;
					max-width: 100% !important;
				}
			}
			> .cms-tabs-content{
				flex-basis: 0;
			    flex-grow: 1;
			    max-width: 100%;
			}
		}
	}
}
// Layout 1
.cms-tabs-layout-1{
	.cms-tab-title-inner{
		flex: 0 0 auto;
	    width: auto;
	    text-align: center;
	    padding: 42px 30px;
	    color: var(--color-primary);
		background: $white;
		.cms-icon,
		.cms-tab-title-text{
			color: var(--color-primary);
		}
		.cms-tab-title-count{
			background: var(--color-accent);
		}
	}
	.cms-tab-title{
		position: relative;
		&:after{
			content: '';
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 10px 11px 0 11px;
			border-color: transparent transparent transparent transparent;
			position: absolute;
    		left: calc(50% - 11px);
    		margin-top: -2px;
    		@include transition();
		}

		&:hover,
		&.active{
			&:after{
				border-color: var(--color-primary) transparent transparent transparent;
			}
			.cms-tab-title-inner{
				background-color: var(--color-primary);
				color: $white;
				.cms-icon,
				.cms-tab-title-text{
					color: $white ;
				}
			}
		}
	}
	.cms-tabs-title-desktop{
		border-bottom: 2px solid $border-color;
		.cms-tab-title:not(:last-child){
			border-right: 2px solid $border-color;
			[dir="rtl"] &{
				border-right: 0;
				border-left: 2px solid $border-color;
			}
		}
	}
}
.cms-tabs-layout-2{
	.cms-tabs-title-desktop{
		margin: -3px;
		.cms-tab-title{
			padding: 3px;
		}
	}
	.cms-tab-title-inner{
		padding:30px;
		color: $white;
		background: $accent-color;
		.cms-tab-title-count{
			background: $white;
			color: $accent-color;
		}
		.cms-tab-title-text{
			color: $white;
		}
		
	}
	.cms-tab-title{
		&.active,
		&:hover{
			.cms-tab-title-inner{
				background-color: $white;
				.cms-icon,
				.cms-tab-title-text{
					color: $primary-color;
				}
				.cms-tab-title-count{
					background-color: $primary-color;
					color: $white;
				}
			}
		}
	}
}