.gds-nav,
.gds-nav-pills,
.gds-nav-tabs {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;

    &:after {
        display: table;
        content: ' ';
        clear: both;
        box-sizing: border-box;
    }

    &:before {
        display: table;
        content: ' ';
        box-sizing: border-box;
    }
}

.gds-nav__list-item,
.gds-nav-pills__list-item,
.gds-nav-tabs__list-item {
    float: left;
    display: block;
    font-size: inherit;
}

.gds-nav__link,
.gds-nav-pills__link,
.gds-nav-tabs__link {
    color: $tabPrimaryTextDefaultColor; ///this needs fixing
    cursor: pointer;
    display: block;
    padding: ($unit * 0.5) ($unit * 1.5);
    font-size: inherit;
}

.gds-nav__link--dark {
    color: white;
}

.gds-nav--lg,
.gds-nav-pills--lg,
.gds-nav-tabs--lg {
    font-size: $font-size-plus-1;

    .gds-nav__link,
    .gds-nav-pills__link,
    .gds-nav-tabs__link {
        padding: $unit ($unit * 3);
    }
}

.gds-nav--md,
.gds-nav-pills--md,
.gds-nav-tabs--md {
    font-size: $font-size;

    .gds-nav__link,
    .gds-nav-pills__link,
    .gds-nav-tabs__link {
        padding: ($unit * 0.5) ($unit * 2);
    }
}

.gds-nav--sm,
.gds-nav-pills--sm,
.gds-nav-tabs--sm {
    font-size: $font-size-minus-2;

    .gds-nav__link,
    .gds-nav-pills__link,
    .gds-nav-tabs__link {
        padding: ($unit * 0.25) $unit;
    }
}

// Tab navs
.gds-nav-tabs {
    border-bottom: 1px solid $tabPrimaryUnderlineDefaultColor;

    @media #{$phone-width}, #{$phablet-width} {
        white-space: nowrap;
    }
    @media #{$phone-width} {
        border-bottom: none;
    }
}

.gds-nav-tabs--dark {
    border-bottom: 1px solid $tabPrimaryUnderlineDefaultColor;
    @media #{$phone-width}, #{$phablet-width} {
        white-space: nowrap;
    }
    @media #{$phone-width} {
        border-bottom: none;
    }
}

.gds-nav-tabs--lg {
    .gds-nav-tabs__list-item--active .gds-nav-tabs__link {
        padding-top: $unit;
        padding-bottom: $unit;
    }
}

.gds-nav-tabs--sm {
    .gds-nav-tabs__link {
        padding-top: ($unit * 0.25);

        &:hover {
            &:before {
                border-bottom-width: ($cap-size * 0.5) !important;
            }
        }
    }
}

.gds-nav-tabs--no-underline {
    border-bottom: none !important;

    .gds-nav-tabs__link {
        &:after {
            content: none !important;
        }
    }
}

.gds-nav-tabs--justified {
    width: 100%;

    .gds-nav-tabs__list-item {
        float: none;
        display: table-cell;
        width: 1%;
        text-align: center;
        padding: 0 2px;

        &:first-child {
            padding: 0 2px 0 0;
        }
    }
}

.gds-nav-tabs__list-item {
    margin-right: ($unit * 0.25);
    @include transition-ease-out(all, 250ms);

    &:last-child {
        box-shadow: none;
    }
}

.gds-nav-tabs--stacked {
    width: 100%;
    border-bottom: none;
    .gds-nav-tabs__list-item {
        float: none;
        display: block;
        &:last-child {
            .gds-nav-tabs__link:before {
                border-bottom: 1px solid $gg-light-2;
                border-bottom-left-radius: $border-radius;
                border-bottom-right-radius: $border-radius;
            }
            .gds-nav-tabs__link--dark:before {
                border-bottom: 1px solid $gg-dark-4;
            }
        }
        &:first-child {
            .gds-nav-tabs__link:before {
                border-bottom: 1px solid $gg-light-2;
                border-top-left-radius: $border-radius;
                border-top-right-radius: $border-radius;
            }
            .gds-nav-tabs__link--dark:before {
                border-bottom: 1px solid $gg-dark-4;
            }
        }
        &:hover .gds-nav-tabs__link:before {
            border-bottom: 1px solid $tabPrimaryBorderHoverColor !important;
        }
        @media #{$phone-width}, #{$phablet-width} {
            display: block !important;
            width: auto !important;
        }
    }
    .gds-nav-tabs__list-item--active .gds-nav-tabs__link:before,
    .gds-nav-tabs__link:before {
        border-radius: 0;
    }
    .gds-nav-tabs__list-item--active .gds-nav-tabs__link:before {
        border-bottom: 1px solid $tabPrimaryUnderlineDefaultColor !important;
    }

    &:hover .gds-nav-tabs__list-item--active .gds-nav-tabs__link:before {
        border-bottom: 1px solid $tabPrimaryUnderlineDefaultColor !important;
    }
}

.gds-nav-tabs--no-resp {
    min-width: 100%;
    width: auto;
}

@media #{$phone-width}, #{$phablet-width} {
    .gds-nav-tabs--no-resp {
        white-space: nowrap !important;
        border-bottom: $cap-size solid $tabPrimaryUnderlineDefaultColor;

        @media #{$phone-width} {
            border-bottom: $cap-size solid $tabPrimaryUnderlineDefaultColor;
        }
    }

    .gds-nav-tabs--no-resp .gds-nav-tabs__list-item {
        display: inline-block;
        font-size: inherit;
        white-space: nowrap;
        margin-right: ($unit * 0.25);
        width: auto;
        padding: 0;
        .gds-nav-tabs__link {
            border-radius: $border-radius $border-radius 0 0;
            &:before {
                border-radius: $border-radius $border-radius 0 0;
            }
        }
        &:last-child .gds-nav-tabs__link,
        &:first-child .gds-nav-tabs__link {
            border-radius: $border-radius $border-radius 0 0;
            &:before {
                border-radius: $border-radius $border-radius 0 0;
            }
        }
    }

    .gds-nav-tabs--justified.gds-nav-tabs--no-resp .gds-nav-tabs__list-item {
        float: none;
        display: table-cell;
        width: 1%;
        text-align: center;
        padding: 0 2px;
    }
}

@media #{$phablet-width} {
    .gds-nav-tabs__list-item {
        padding: 0;
    }
    .gds-nav-tabs--justified .gds-nav-tabs__list-item {
        padding: 0 2px;
    }
    .gds-nav-tabs__list-item,
    .gds-nav-tabs--justified .gds-nav-tabs__list-item {
        float: none;
        display: table-cell;
        width: 1%;
        text-align: center;
    }
}

@media #{$phone-width} {
    .gds-nav-tabs__list-item,
    .gds-nav-tabs--justified .gds-nav-tabs__list-item {
        margin-right: 0;
        padding: 0 2px 0 0;
        display: block;
        width: auto;
        float: none;
        .gds-nav-tabs__link:before {
            border-radius: 0;
        }
        &:last-child {
            .gds-nav-tabs__link:before {
                border-bottom: 1px solid $gg-light-2;
                border-bottom-left-radius: $border-radius;
                border-bottom-right-radius: $border-radius;
            }
            .gds-nav-tabs__link--dark:before {
                border-bottom: 1px solid $gg-dark-4;
            }
        }
        &:first-child {
            padding-left: 0;
            .gds-nav-tabs__link:before {
                border-bottom: 1px solid $gg-light-2;
                border-top-left-radius: $border-radius;
                border-top-right-radius: $border-radius;
            }
        }
        &:hover .gds-nav-tabs__link:before {
            border-bottom: 1px solid $tabPrimaryUnderlineDefaultColor;
        }
    }
    .gds-nav-tabs__list-item--active .gds-nav-tabs__link:before,
    .gds-nav-tabs__link:before {
        border-radius: 0;
    }
    .gds-nav-tabs__list-item.gds-nav-tabs__list-item--active .gds-nav-tabs__link:before,
    .gds-nav-tabs--justified.gds-nav-tabs__list-item.gds-nav-tabs__list-item--active
        .gds-nav-tabs__link:before {
        border-bottom: 1px solid $tabPrimaryUnderlineDefaultColor;
    }
}

.gds-nav-tabs__list-item--disabled,
.gds-nav-tabs--underline__list-item--disabled {
    color: $gg-light-2 !important;
    cursor: not-allowed !important;
    > * {
        color: $gg-light-2 !important;
        pointer-events: none !important;
        @include no-select();
    }
}

.gds-nav-tabs__link {
    border-radius: $border-radius $border-radius 0 0;
    z-index: $z-index-1;

    &:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        bottom: 0;
        left: 0;
        background-color: $tabPrimaryBackgroundDefaultColor;
        border-left: 1px solid $tabPrimaryBorderDefaultColor;
        border-right: 1px solid $tabPrimaryBorderDefaultColor;
        border-top: 1px solid $tabPrimaryBorderDefaultColor;
        border-top-right-radius: $border-radius;
        border-top-left-radius: $border-radius;
        z-index: $z-index-neg;
        @include transition-ease-out(all, 250ms);
    }

    &:hover {
        text-decoration: none;
        color: white;
        z-index: $z-index-2;

        &:before {
            background-color: $tabPrimaryBackgroundHoverColor;
            border-left: 1px solid $tabPrimaryBorderHoverColor;
            border-right: 1px solid $tabPrimaryBorderHoverColor;
            border-top: 1px solid $tabPrimaryBorderHoverColor;
        }
    }
}

.gds-nav-tabs__link--dark {
    color: white;
    &:before {
        background-color: $gg-dark-3;
        border-left: 1px solid $gg-dark-4;
        border-right: 1px solid $gg-dark-4;
        border-top: 1px solid $gg-dark-4;
    }
}

// Nav tabs with underline style
.gds-nav-tabs--underline {
    border-bottom: $cap-size solid $gg-light-2;

    @media #{$phone-width} {
        border-bottom: none;

        &.gds-nav-tabs--no-resp {
            border-bottom: $cap-size solid $gg-light-2;
        }
    }
}

.gds-nav-tabs--underline-primary {
    background-color: $tabPrimaryBackgroundActiveColor;
    border-bottom: $cap-size solid $tabPrimaryUnderlineDefaultColor;

    @media #{$phone-width}, #{$phablet-width} {
        &.gds-nav-tabs--no-resp {
            border: none !important;
            box-shadow: inset 0 (-$unit * 0.125) 0 0 $tertiaryColor;
        }
    }
}

.gds-nav-tabs--underline-secondary {
    background-color: $tabSecondaryBackgroundActiveColor;
    border-bottom: $cap-size solid $tabSecondaryUnderlineDefaultColor;

    @media #{$phone-width}, #{$phablet-width} {
        &.gds-nav-tabs--no-resp {
            border: none !important;
            box-shadow: inset 0 (-$unit * 0.125) 0 0 $tabSecondaryBackgroundActiveColor;
        }
    }
}

.gds-nav-tabs--underline-primary.gds-nav-tabs--no-resp,
.gds-nav-tabs--underline-secondary.gds-nav-tabs--no-resp {
    @media #{$phone-width}, #{$phablet-width} {
        height: ($unit * 3);
        min-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

.gds-nav-tabs--underline-primary,
.gds-nav-tabs--underline-secondary {
    .gds-nav-tabs__list-item--active.gds-nav-tabs__list-item--underline
        .gds-nav-tabs__link--underline,
    .gds-nav-tabs--underline__link {
        height: calc(100% + 2px);
        background-color: rgba(white, 0.1);
        color: white !important;
        box-shadow: 0px 0px 5px rgba(black, 0.1);
    }

    .gds-nav-tabs__link--underline,
    .gds-nav-tabs--underline__link {
        color: rgba(white, 0.8) !important;
        &:hover {
            color: rgba(white, 1) !important;
        }
    }

    .gds-nav-tabs__list-item--disabled .gds-nav-tabs__link--underline {
        color: rgba(white, 0.35) !important;
    }

    .gds-nav-tabs__list-item--active.gds-nav-tabs__list-item--underline {
        border-color: white;
    }

    @media #{$phone-width}, #{$phablet-width} {
        white-space: nowrap;
    }
}

.gds-nav-tabs__link--underline,
.gds-nav-tabs--underline__link {
    color: $gg-dark-4;
    cursor: pointer;

    &:hover {
        color: $tabPrimaryTextDefaultColor;
    }
    &:hover:before {
        background-color: transparent !important;
        border: none !important;
    }

    &:before,
    &.gds-nav-tabs__list-item--active:before {
        background-color: transparent !important;
        border: none !important;
    }
    @media #{$phone-width} {
        &:before,
        &.gds-nav-tabs__list-item--active:before {
            background-color: transparent !important;
            border: none !important;
        }
    }
}

.gds-nav-tabs__link--underline.gds-nav-tabs__link--dark {
    color: white;
    &:hover {
        color: $tabPrimaryTextHoverColor;
    }
}

.gds-nav-tabs__list-item--underline,
.gds-nav-tabs--underline__list-item {
    top: $cap-size;
    box-shadow: none;
    border-bottom: $cap-size solid transparent;
    margin-right: 0;
    @media #{$phone-width} {
        &:last-child .gds-nav-tabs__link--underline:before {
            border-bottom: 0;
        }
    }
}

.gds-nav-tabs__list-item--active .gds-nav-tabs__link {
    color: white;
    text-shadow: 0 0 5px rgba(black, 0.25);
    box-shadow: 0 0 10px rgba(black, 0.25);
    z-index: $z-index-2;
    height: 100%;
    top: 0;

    &:before {
        height: 100%;
        border-bottom: none;
        border-radius: $border-radius $border-radius 0 0;
        border-left: 1px solid $tabPrimaryBorderActiveColor;
        border-right: 1px solid $tabPrimaryBorderActiveColor;
        border-top: 1px solid $tabPrimaryBorderActiveColor;
        background-color: $tabPrimaryBackgroundActiveColor;
    }

    .gds-badge {
        box-shadow: 0 0 5px rgba(black, 0.15) !important;
    }
}

.gds-nav-tabs__list-item--active.gds-nav-tabs__list-item--underline,
.gds-nav-tabs--underline__list-item--active {
    border-bottom: $cap-size solid $tabPrimaryUnderlineHoverColor;
    top: $cap-size;
    .gds-nav-tabs__link--underline,
    .gds-nav-tabs--underline__link,
    .gds-nav-tabs--underline__link {
        color: $tabPrimaryTextDefaultColor;
        text-shadow: none;
        box-shadow: none;
        &:hover {
            color: $tabPrimaryTextDefaultColor;
        }
        &:before {
            background-color: transparent;
            border: none;
        }
    }
}

// Pill navs

.gds-nav-pills--sm {
    .gds-nav-pills__link {
        padding-top: ($unit * 0.3);
        padding-bottom: ($unit * 0.2);
    }
}

.gds-nav-pills--justified {
    width: 100%;
    .gds-nav-pills__list-item {
        float: none;
        display: table-cell;
        width: 1%;
        text-align: center;
        &:first-child {
            margin-left: ($unit * 0.25);
            .gds-nav-pills__link {
                margin-left: 0;
            }
        }
        &:last-child {
            margin-right: ($unit * 0.25);
        }
        .gds-nav-pills__link {
            margin: 0 ($unit * 0.25);
        }
        @media #{$phone-width}, #{$phablet-width} {
            display: block !important;
            width: auto !important;
            margin: ($unit * 0.25) ($unit * 0.25);
            &:first-child {
                margin: ($unit * 0.25) ($unit * 0.25);
            }
            .gds-nav-pills__link {
                margin: 0;
            }
        }
    }
}

.gds-nav-pills--stacked {
    width: 100%;
    .gds-nav-pills__list-item {
        float: none;
        display: block;
        margin: ($unit * 0.25) ($unit * 0.25);
        &:first-child {
            margin: 0 ($unit * 0.25) ($unit * 0.25) ($unit * 0.25);
        }
        &:last-child {
            margin: ($unit * 0.25) ($unit * 0.25) 0 ($unit * 0.25);
        }
        @media #{$phone-width}, #{$phablet-width} {
            display: block !important;
            width: auto !important;
        }
    }
}

.gds-nav-pills__list-item {
    margin: 0 ($unit * 0.25);
    &:last-child {
        margin-right: 0;
    }
    &:first-child {
        margin-left: 0;
    }
    @media #{$phone-width}, #{$phablet-width} {
        float: none;
        display: block !important;
        margin: ($unit * 0.25) ($unit * 0.25);
        &:first-child {
            margin-left: ($unit * 0.25);
        }
        &:last-child {
            margin-right: ($unit * 0.25);
        }
    }
}

.gds-nav-pills__list-item--disabled,
.gds-nav-pills__list-item--disabled .gds-nav-pills__link {
    opacity: 0.5;
    filter: grayscale(75%);
    pointer-events: none;
}

.gds-nav-pills__link {
    z-index: $z-index-1;
    border-radius: $border-radius;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
    border-bottom: $cap-size solid transparent;
    color: $gg-dark-4;
    @include transition-ease-out(all, 150ms);

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: $primaryColor;
        z-index: $z-index-neg;
        border-top-left-radius: 1px;
        border-top-right-radius: 1px;
        transform-origin: 50% 50%;
        transform: scale(0.25, 0.25);
        opacity: 0;
        @include transition-ease-out(all, 150ms);
    }
    &:hover {
        text-decoration: none;
        border-left: 1px solid $primaryLight2Color;
        border-right: 1px solid $primaryLight2Color;
        border-top: 1px solid $primaryLight2Color;
        border-bottom: $cap-size solid $primaryLight2Color;
        color: $primaryLight2Color;
    }
}

.gds-nav-pills__link--secondary {
    &:before {
        background-color: $secondaryColor;
    }
    &:hover {
        text-decoration: none;
        border-left: 1px solid $secondaryLight2Color;
        border-right: 1px solid $secondaryLight2Color;
        border-top: 1px solid $secondaryLight2Color;
        border-bottom: $cap-size solid $secondaryLight2Color;
        color: $secondaryLight2Color;
    }
}

.gds-nav-pills__link--tertiary {
    &:before {
        background-color: $tertiaryColor;
    }
    &:hover {
        text-decoration: none;
        border-left: 1px solid $tertiaryLight2Color;
        border-right: 1px solid $tertiaryLight2Color;
        border-top: 1px solid $tertiaryLight2Color;
        border-bottom: $cap-size solid $tertiaryLight2Color;
        color: $tertiaryLight2Color;
    }
}

.gds-nav-pills__link--dark {
    color: white;
}

.gds-nav-pills__list-item--active .gds-nav-pills__link {
    color: white;
    text-shadow: 0 0 5px rgba(black, 0.25);
    box-shadow: 0 0 10px rgba(black, 0.25);
    border-bottom: $cap-size solid $primaryDark3Color;
    border-left: 1px solid $primaryDark3Color;
    border-right: 1px solid $primaryDark3Color;
    border-top: 1px solid $primaryDark3Color;
    &:before {
        transform: scale(1, 1);
        opacity: 1;
    }
}

.gds-nav-pills__list-item--active .gds-nav-pills__link--secondary {
    border-bottom: $cap-size solid $secondaryDark2Color;
    border-left: 1px solid $secondaryDark2Color;
    border-right: 1px solid $secondaryDark2Color;
    border-top: 1px solid $secondaryDark2Color;
}

.gds-nav-pills__list-item--active .gds-nav-pills__link--tertiary {
    border-bottom: $cap-size solid $tertiaryDark2Color;
    border-left: 1px solid $tertiaryDark2Color;
    border-right: 1px solid $tertiaryDark2Color;
    border-top: 1px solid $tertiaryDark2Color;
}