/*------------------------------------
  Navs
------------------------------------*/

.nav {
	&-classic {
		border-bottom: $nav-classic-border-width $nav-classic-border-type $nav-classic-border-color;

		.nav-link {
			color: $nav-classic-nav-link-color;
			border-bottom: $nav-classic-nav-link-border-width $nav-classic-nav-link-border-type $nav-classic-nav-link-border-color;
			@include border-radius(0);
			padding: 1rem 1.5rem;
			margin-bottom: -.125rem;
			transition: $nav-classic-nav-link-transition-timing;

			&:hover {
				color: $nav-classic-nav-link-state-color;
			}

			&.active {
				color: $nav-classic-nav-link-state-color;
				border-bottom-color: $nav-classic-nav-link-state-color;
			}
		}
	}
}

.nav-gray-900 {
    .nav-link {
        color: $gray-900;
    }
}

.nav-gray-700 {
    .nav-link {
        color: $gray-700;

        &.active {
            color: $gray-900;
            font-weight: 500;
            border-bottom: 1px solid $gray-900;
        }
    }
}

.nav-link-caret {

    &.active {
        position: relative;

        &::after {
            content: '';
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #fff;
            transform: translate(-50%, 5px);
            left: 50%;
        }
    }
}

.nav-tab {
    .nav-link[aria-selected="false"] {
        opacity: .3;
    }

    .nav-item + .nav-item {
        margin-left: -1px;
    }
}


.woocommerce-tabs {
    .wc-tabs {
        position: relative;
        margin-bottom: -1px;

        a {
            color: $gray-700;
            padding-right: 0;
            padding-left: 0;
            margin: 0 1.6rem;
            border-bottom: 1px solid transparent;
            position: relative;
            z-index: 1;

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


.my__account-nav {
    .nav-item {
        .nav-link {
            &:hover {
                span {
                    padding-left: 13px;
                    color: $dark !important;
                    transition: all $transition-timing $transition-function;
                }
            }
        }
    }
}
