// Navs // // //

.nav {

    display: inline-block;
    position: relative;

    .nav-link {
            @include transition;
            position: relative;
            display: inline-block;
            color: $gray-300;
            z-index: 5;
            font-size: 14px;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: $letter-spacing;
cursor: pointer;
    }

    .lavalamp-object {
            display: none;
            z-index: 1;
    }

}

// // text // .nav-text {

margin: -.5rem;

.nav-link {
        margin: .5rem;
        padding: 0 0 1rem 0;
        line-height: 1em;
        font-weight: $font-weight-light;
        font-size: 1.875rem;
        z-index: 5;

        &.active {
                color: $primary;
                border-color: $primary;
        }

        &:hover {
                color: $primary;
        }
}

}

// tabs .nav-tabs {

border: 0;

.lavalamp-object {
        display: block;
        position: absolute;
        border-width: 0 0 2px 0;
        border-style: solid;
        border-color: $primary;
}

.nav-item  {
        margin-right: $grid-gutter-width;
}

.nav-link {
        border: 0;
        padding-left: 0;
        padding-right: 0;

        &.active {
                background-color: transparent;
        }

}

&.nav-vertical {
        border-width: 0 0 0 $border-width;

        .lavalamp-object {
                border-width: 0 0 0 2px;
                border-bottom: 0;
        }

        .nav-link {
                padding: .5rem 1rem;
                margin: 0;
        }
}

}

// pills .nav-pills {

.lavalamp-object {
        display: block;
        position: absolute;
        border: 2px solid $primary;
        border-radius: 10rem;
}

.nav-link {
        z-index: 5;
        padding: .75rem 1.5rem;

        &.active,
        &:hover {
                color: $gray-700;
        }
}

}

// // Switch // .nav-switch {

display: inline-block;
border: $border-width solid $border-color;
border-radius: 22.5px;
overflow: hidden;

.lavalamp-object {
        display: block;
        position: absolute;
        background: $border-color;
        border-radius: 10rem;
}

.nav-link {
        padding: 15px 25px;
        line-height: 15px;
        font-size: $font-size-sm;
        text-transform: uppercase;
        letter-spacing: $letter-spacing;
        z-index: 5;
        cursor: pointer;

        &.active,
        &:hover {
                color: $gray-700;
        }
}

}

// // Docs // .nav-docs {

display: inline-block;

.lavalamp-object {
        @extend %boxed;
        @include border-radius;
        display: block;
        position: absolute;
}

.nav-link {
        padding: 10px 20px;
        line-height: 20px;
        font-size: $font-size-sm;
        letter-spacing: $letter-spacing-lg;
        text-transform: uppercase;
        z-index: 5;
        cursor: pointer;

        &.active,
        &:hover {
                color: $canalplus;
        }

}

}

// Vertical // // vertical direction for .nav-pills and .nav-line .nav-vertical {

display: inline-block;

.nav-link {
        display: block;
}

}

.tab-content {

position: relative;

.tab-pane {
        @include transition;
        width: 100%;
        display: block;

        &:not(.active) {
                visibility: hidden;
                position: absolute;
                top: 0;
                animation: fadeOutBottom .25s ease forwards;
                -webkit-animation: fadeOutBottom .25s ease forwards;
        }

        &.active {
                top: 0;
                position: relative;
                z-index: 90;
                animation: fadeInTop .5s ease forwards;
                -webkit-animation: fadeInTop .5s ease forwards;
        }
}

}

@keyframes fadeOutBottom {

from {
  opacity: 1;
      @include translate(0,0);
      @include scale(1);
}
to {
  opacity: 0;
  @include translate(0,10%);
  @include scale(.8);
  -webkit-font-smoothing: antialiased;
}

} @-webkit-keyframes fadeOutBottom {

from {
        opacity: 1;
        @include translate(0,0);
        -webkit-transform: translate3d(0, 0, 0);
}
to {
        opacity: 0;
        @include translate(0,10%);
        -webkit-font-smoothing: antialiased;
}

} @keyframes fadeInTop {

from {
        opacity: 0;
        @include translate(0,10%);
}
to {
        opacity: 1;
        @include translate(0,0);
        -webkit-font-smoothing: antialiased;
}

} @-webkit-keyframes fadeInTop {

from {
        opacity: 0;
        @include translate(0,10%);
}
to {
        opacity: 1;
        @include translate(0,0);
        -webkit-font-smoothing: antialiased;
}

}

// text-whiteed // // styles for colored/image background .text-white {

.nav-switch {
        border-color: $text-white-border;

        .lavalamp-object {
                background: $text-white-border;
        }
}

}