/* ==========================================================================
# Tabs style - begin
========================================================================== */
.edgtf-tabs {
    
    .edgtf-tabs-nav {
        display: block;
        position: relative;
        list-style: none outside none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        vertical-align: middle;
        @include edgtfBoxSizing(border-box);

        li {
        	position: relative;
            margin: 0;
            @include edgtfBoxSizing(border-box);

			&:after{
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				height: 2px;
				width: 16px;
				z-index: 1;
				@include edgtfTransition(background-color 0.15s ease-in-out);
			}

            a {
                position: relative;
                display: block;
                padding: 16px 40px 16px 0;
                color: $first-main-color;
                font-size: 21px;
                font-weight: 500;
                @include edgtfBoxSizing(border-box);
                @include edgtfTransition(color 0.15s ease-in-out, background-color 0.15s ease-in-out);

                i,
                span {
                    @include edgtfTransition(initial);
                }

                .edgtf-icon-frame {
                    display: inline-block;
                    vertical-align: middle;
                    min-width: 20px;
                    line-height: 1;
                    font-size: 16px;
                }

                .edgtf-tab-text-after-icon {
                    @include edgtfTransition(initial);
                    vertical-align: middle;
                }

            }

            &:first-child a{
            	padding-left: 0;
            }

			&.ui-state-active:after,
			&.ui-state-hover:after{
                background-color: $first-main-color;
			}

			&.ui-state-active a,
			&.ui-state-hover a {
                color: $first-main-color;
			}
        }
    }

    .edgtf-tab-container {
        position: relative;
        @include edgtfBoxSizing(border-box);
    }
}

/* Icon tabs styles
   ========================================================================== */
.edgtf-tabs.edgtf-horizontal-tab.edgtf-tab-with-icon ul li a {

    .edgtf-tab-text-after-icon {
        padding: 0 8px 0 0;
    }
}

.edgtf-tabs.edgtf-vertical-tab.edgtf-tab-with-icon ul li a {

    .edgtf-tab-text-after-icon {
        padding: 0 0 0 13px;
    }
}

.edgtf-tabs.edgtf-tab-with-icon ul li:hover .edgtf-icon-frame  {
    @include edgtfAnimation(edgtf-appear .35s forwards ease);
}

@include keyframes(edgtf-appear) {
    0% {
        opacity: 0;
        @include edgtfTransform(translateX(25px));
    }
    30% {
        opacity: .1;
        @include edgtfTransform(translateX(15px));
    }
    100% {
        opacity: 1;
        @include edgtfTransform(translateX(0px));
    }
}

/* Boxed tabs styles
   ========================================================================== */
.edgtf-tabs.edgtf-tab-boxed {

	.edgtf-tabs-nav{
		border-bottom: none;
		overflow: visible;
		text-align: left;

		li{
			float: none;
			display: inline-block;
			vertical-align: middle;
			margin-right: 5px;

			&:last-child{
				margin-right: 0;
			}

			&:after{
				display: none;
			}

			a {
				position: relative;
				padding: 11px 60px;
    			border: 3px solid $first-main-color;
				background-color: #fff;
            }
		}
	}

	.edgtf-tab-container {
		z-index: -1;
	}

    &.edgtf-horizontal-tab{

		.edgtf-tabs-nav li{
			float: none;

			a{
				border-bottom: none;
				text-align: center;
				text-transform: lowercase;

				&:before{
					content: '';
					position: absolute;
					bottom: 0;
					left: -3px;
					right: -3px;
					height: 7px;
					background-color: #fff;
					opacity: 1;					
				}

				&:after{
					content: '';
					position: absolute;
					bottom: -3px;
					left: 0;
					right: 0;
					height: 3px;
					background-color: #fff;
					opacity: 0;
					z-index: 99;
				}
			}

		    &.ui-state-active a,
		    &.ui-state-hover a{
		    	&:before{
					opacity: 0;
				}

		    	&:after{
					opacity: 1;
				}
		    }
		}

		.edgtf-tab-container {
			margin-top: 0;
			border-top: 3px solid $first-main-color;
		    padding: 17px 10px 17px 0;
		}
    }

	&.edgtf-vertical-tab{
		.edgtf-tabs-nav li{
			float: none;
			margin-bottom: 5px;
			text-align: center;

			a{
				border-right: none;
				border-bottom: 3px solid $first-main-color;

				&:before{
					content: '';
					position: absolute;
					right: 0;
					top: -3px;
					bottom: -3px;
					width: 7px;
					background-color: #fff;
					opacity: 1;
				}

				&:after{
					content: '';
					position: absolute;
					right: -3px;
					top: 0;
					bottom: 0;
					width: 3px;
					background-color: #fff;
					opacity: 0;
				}
			}

		    &.ui-state-active a,
		    &.ui-state-hover a{
		    	&:before{
					opacity: 0;
				}

		    	&:after{
					opacity: 1;
				}
		    }
		}

		.edgtf-tab-container {
			margin-left: 0;
			border-left: 3px solid $first-main-color;
		    padding: 10px 17px 0 17px;
		}
	}
}

/* Horizontal tabs styles
   ========================================================================== */
.edgtf-tabs.edgtf-horizontal-tab {
    
    .edgtf-tabs-nav li {
        float: left;

        a {
            text-align: left;
        }
    }

    .edgtf-tab-container {
        padding: 17px 10px 17px 0;
    }
}

/* Vertical tabs styles
   ========================================================================== */
.edgtf-tabs.edgtf-vertical-tab {
    
    .edgtf-tabs-nav {
        float: left;
        width: 18%;

        li {
            position: relative;
            display: block;
            width: 100%;

            a {
	            margin-right:0;
	            padding: 11px 0;
            }

            &:last-child {
                margin: 0;
            }
        }   
    }

    .edgtf-tab-container {
        float: left;
        width: 82%;
        padding: 10px 30px;
    }
}

.edgtf-tabs.edgtf-vertical-tab.edgtf-tab-only-icon {
    
    .edgtf-tabs-nav li a {
        text-align: center;
    }
}
/* ==========================================================================
# Tabs style - end
========================================================================== */