@mixin nav-item {
    .nav-item {
        .nav-link {
            @content;
        }
    }
}

@include medium-desktop {
    .nav-tabs {
        @include nav-item {
            padding: 14px 30px;
        }
        &.style-line {
            @include nav-item() {
                padding-right: 20px;
            }
        }
        &.style-box4 {
            @include nav-item {
                padding: 31px 30px;
            }
        }
    }
    .style-box {
        &.style-box5 {
            .tab-pane {
                padding: 41px 40px;
            }
        }
    }
}

@include potrait-tablet {
    .nav-tabs {
        @include nav-item() {
            padding: 14px 30px;
        }
        &.style-line {
            @include nav-item() {
                padding-right: 20px;
            }
        }
        &.style-box {
            @include nav-item() {
                padding: 20px 15px;
                font-size: rem(12px);
            }
        }
        &.multi-gradient {
            @include nav-item() {
                min-width: 160px;
                min-height: 160px;
            }
        }
    }
    .style-box {
        &.style-box5 {
            .tab-pane {
                padding: 51px 70px;
            }
        }
    }
}

@include tablet {
    .nav-tabs {
        &.vertical {
            margin-bottom: 30px;
        }
        &.style-box {
            .nav-item {
                &:not(:last-child) {
                    margin-right: 5px;
                }
            }
            @include nav-item() {
                font-size: rem(10px);
                padding: 20px 10px;
            }
        }
        &.multi-gradient {
            .nav-item {
                margin-bottom: 12px;
            }
        }
        &.style-tooltip {
            .nav-item {
                &:not(:last-child) {
                    margin-right: 10px;
                }
            }
            @include nav-item() {
                padding: 19px 30px;
            }
        }
        &.style-heart-bit {
            @include nav-item() {
                padding: 20px 10px;
            }
        }
        &.style-progress {
            .nav-item {
                &:not(:last-child) {
                    margin-right: 60px;
                }
            }
        }
    }
    .tab-pane {
        .xs-single-team {
            .team-header {
                margin-bottom: 30px;
            }
        }
    }
    .tab-content {
        &.vertical {
            margin-bottom: 30px;
        }
    }
}

@include small-device {
    .nav-tabs {
        &.style-box2,
        &.style-box3 {
            .nav-item {
                display: block;
                &:not(:last-child) {
                    margin-right: 0;
                    margin-bottom: 5px;
                }
            }
        }
        &.style-tooltip {
            @include nav-item() {
                padding: 19px 23px;
                &::before {
                    display: none;
                }
            }
        }
        &.style-progress {
            .nav-item {
                &:not(:last-child) {
                    margin-right: 40px;
                }
            }
        }
        &.vertical {
            &.style-ribbon {
                @include nav-item() {
                    &::before {
                        width: 100%;
                    }
                    &:after {
                        display: none;
                    }
                }
                &.right {
                    @include nav-item() {
                        &::before {
                            left: 0;
                        }
                    }
                }
            }
        }
    }
}

@include tiny-device {
    .style-box {
        &.style-box5 {
            .tab-pane {
                padding: 30px;
            }
        }
    }
    .nav-tabs {
        &.style-progress,
        &.style-heart-bit {
            @include nav-item() {
                &::before,
                &::after {
                    display: none;
                }
            }
        }
        &.style-box4 {
            @include nav-item() {
                &::after {
                    display: none;
                }
            }
        }
        @include nav-item() {
            padding: 10px;
        }
        @include nav-item() {
            > i {
                display: none;
            }
        }
        &.style-line {
            @include nav-item() {
                padding-right: 15px;
            }
        }
        &.style-box {
            @include nav-item() {
                padding: 15px 9px;
            }
        }
    }
    .style-box,
    .style-tooltip {
        .tab-pane {
            padding: 20px;
        }
    }
}