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

        li {
            margin: 0;

            a {
                position: relative;
                display: block;
                padding: 11px 27px;
                color: #444;
                font-size: 17px;
                font-weight: 700;
                @include qodefBoxSizing(border-box);
                @include qodefTransition(color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out);

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

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

                .qodef-tab-text-after-icon {
                    @include qodefTransition(initial);
                    vertical-align: middle;
                }
            }
            &.ui-state-active a,
            &.ui-state-hover a {
                color: #fff;
                background-color: $default-heading-color;
            }
        }
    }

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

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

    .qodef-tab-text-after-icon {
        padding: 0 4px 0 0;
    }
}

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

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

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

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

/* Horizontal tabs styles
   ========================================================================== */
.qodef-tabs.qodef-horizontal-tab {
    
    .qodef-tabs-nav {
        top: 1px;
        z-index: 10;

        li {
            float: left;

            a {
                text-align: center;
            }
        }
    }

    .qodef-tab-container {
        border-top: 1px solid $default-heading-color;
        padding: 17px 0;
    }

    /* Minimal tabs styles */

    &.qodef-flexible-tab {
        .qodef-tabs-nav {
            top: 0;
            display: inline-block;
            width: auto;
            li {
                a {
                    border-bottom: 1px solid $default-heading-color;
                    padding: 11px 27px;
                }
                &.ui-state-active a,
                &.ui-state-hover a {
                    border-bottom: 1px solid $default-heading-color;
                }
            }
        }
        .qodef-tab-container {
            border-top: 0;
        }
    }
}

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

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

            a {
                border-right: 1px solid $default-heading-color;
            }

            &.ui-state-active a,
            &.ui-state-hover a {
                border-right: 1px solid $default-heading-color;
            }

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

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

.qodef-tabs.qodef-vertical-tab.qodef-tab-only-icon {
    
    .qodef-tabs-nav li a {
        text-align: center;
    }
}

/* Light skin styles
   ========================================================================== */
.qodef-tabs.qodef-light-tab {
    .qodef-tabs-nav {
        li {
            a {
                color: #444;
            }
            &.ui-state-active a,
            &.ui-state-hover a {
                color: #fff;
                background-color: $first-main-color;
            }
        }
    }
    &.qodef-vertical-tab {
        .qodef-tabs-nav {
            li {
                &.ui-state-active a,
                &.ui-state-hover a {
                    border-right: 1px solid $first-main-color;
                }
            }
        }
    }
    &.qodef-horizontal-tab.qodef-flexible-tab {
        .qodef-tabs-nav {
            li {
                &.ui-state-active a,
                &.ui-state-hover a {
                    border-bottom: 1px solid $first-main-color;
                }
            }
        }
    }
}


/* ==========================================================================
# Tabs style - end
========================================================================== */