// =Nav
.nav {
    // colors
    --nav-link-color: var(--palette-black);
    --nav-link-background-color: transparent;
    --nav-link-hover-color: var(--palette-black-60);
    --nav-link-hover-background-color: transparent;
    --nav-link-active-color: var(--palette-black-40);
    --nav-link-active-background-color: transparent;

    // params
    --nav-font-size: var(--type-scale-14);
    --nav-item-space: 6rem;
    --nav-link-padding: 0;
    --nav-link-border-radius: 0;
    --nav-link-font-weight: normal;
    --nav-link-active-font-weight: normal;

    // props
    font-size: var(--nav-font-size);

    .nav-list {
        display: flex;
        align-items: center;
    }
    .nav-item {
        display: flex;
        align-items: center;
        margin-right: var(--nav-item-space);
    }
    .nav-item.active .nav-link {
        text-decoration: none;
        font-weight: var(--nav-link-active-font-weight);
        color: var(--nav-link-active-color);
        background-color: var(--nav-link-active-background-color);
    }
    .nav-link {
        display: flex;
        align-items: center;
        white-space: nowrap;
        text-decoration: none;
        line-height: 1;
        font-weight: var(--nav-link-font-weight);
        padding: var(--nav-link-padding);
        border-radius: var(--nav-link-border-radius);
        color: var(--nav-link-color);
        background-color: var(--nav-link-background-color);
    }
    .nav-link:hover {
        text-decoration: underline;
        color: var(--nav-link-hover-color);
        background-color: var(--nav-link-hover-background-color);
    }
    .caret {
        margin-left: 2px;
    }
}

// Scales
.nav-small {
    --nav-font-size: var(--type-scale-13);
    --nav-item-space: 5rem;
}

// Variants
.nav-semibold {
    .nav-link {
        --nav-link-font-weight: var(--font-weight-semibold);
        --nav-link-active-font-weight: var(--font-weight-semibold);
    }
    .caret {
        --caret-thickness: 2px;
    }
}
.nav-strong {
    .nav-link {
        --nav-link-font-weight: bold;
        --nav-link-active-font-weight: bold;
    }
    .caret {
        --caret-thickness: 2px;
    }
}

// Underline
.nav-underline {
    .nav-link {
        text-decoration: underline;
    }
}
.nav-underline-off {
    .nav-link:hover {
        text-decoration: none;
    }
}

// Colors
.nav-primary {
    --nav-link-color: var(--palette-primary-dark);
    --nav-link-hover-color: var(--palette-primary-darker);
    --nav-link-active-color: var(--palette-black-40);
}
.nav-light {
    --nav-link-color: var(--palette-white-80);
    --nav-link-hover-color: var(--palette-white);
    --nav-link-active-color: var(--palette-white-50);
}
.nav-muted {
    --nav-link-color: var(--palette-black-60);
    --nav-link-hover-color: var(--palette-black);
    --nav-link-active-color: var(--palette-black);
}

// Pills
.nav-pills {
    // colors
    --nav-link-color: var(--palette-black);
    --nav-link-hover-background-color: var(--palette-black-10);
    --nav-link-active-color: var(--palette-neutral-lightest);
    --nav-link-active-background-color: var(--palette-black);

    // params
    --nav-item-space: 1rem;
    --nav-link-padding: 7px 16px;
    --nav-link-border-radius: 99px;

    .nav-link:hover {
        text-decoration: none;
    }
}
.nav-pills.nav-light {
    --nav-link-color: var(--palette-white-70);
    --nav-link-hover-background-color: var(--palette-white-30);
    --nav-link-active-color: var(--palette-black);
    --nav-link-active-background-color: var(--palette-white-95);
}

// Points
.nav-points {
    // colors
    --nav-border-color: var(--palette-black-10);
    --nav-link-color: var(--palette-black-50);
    --nav-link-border-color: transparent;
    --nav-link-background-color: transparent;
    --nav-link-hover-color: var(--palette-black);
    --nav-link-hover-border-color: var(--palette-black);
    --nav-link-hover-background-color: var(--palette-neutral-lightest);
    --nav-link-active-color: var(--palette-black);
    --nav-link-active-border-color: var(--palette-black);
    --nav-link-active-background-color: transparent;

    // params
    --nav-border-width: 2px;
    --nav-item-space: 1px;
    --nav-link-padding: 12px 14px 10px 14px;

    .nav-list {
        border-bottom-width: var(--nav-border-width);
        border-bottom-style: solid;
        border-bottom-color: var(--nav-border-color);
    }
    .nav-item.active .nav-link {
        border-bottom-color: var(--nav-link-active-border-color);
    }
    .nav-link {
        border-bottom-width: var(--nav-border-width);
        margin-bottom: calc(var(--nav-border-width)*-1);
        border-bottom-style: solid;
        border-bottom-color: var(--nav-link-border-color);
    }
    .nav-link:hover {
        text-decoration: none;
        border-bottom-color: var(--nav-link-hover-border-color);
    }
}
.nav-points.nav-light {
    --nav-border-color: var(--palette-white-20);
    --nav-link-color: var(--palette-white-60);
    --nav-link-hover-color: var(--palette-white);
    --nav-link-hover-border-color: var(--palette-white);
    --nav-link-hover-background-color: var(--palette-white-30);
    --nav-link-active-color: var(--palette-white);
    --nav-link-active-border-color: var(--palette-white);
}

// Tabs
.nav-tabs {
    // colors
    --nav-link-color: var(--palette-black-50);
    --nav-link-background-color: var(--palette-black-5);
    --nav-link-hover-color: var(--palette-black);
    --nav-link-hover-background-color: var(--palette-white);
    --nav-link-active-color: var(--palette-black);
    --nav-link-active-background-color: var(--palette-white);

    // params
    --nav-item-space: 1px;
    --nav-link-padding: 12px 16px 10px 16px;

    .nav-link:hover {
        text-decoration: none;
    }
}
.nav-tabs.nav-light {
    --nav-link-color: var(--palette-white-70);
    --nav-link-background-color: var(--palette-white-20);
}

// Switcher
.nav-switcher {
    // colors
    --nav-border-color: var(--palette-black-10);
    --nav-link-color: var(--palette-black-50);
    --nav-link-border-color: transparent;
    --nav-link-background-color: transparent;
    --nav-link-hover-color: var(--palette-black);
    --nav-link-hover-border-color: var(--palette-black);
    --nav-link-hover-background-color: transparent;
    --nav-link-active-color: var(--palette-black);
    --nav-link-active-border-color: var(--palette-black);
    --nav-link-active-background-color: transparent;

    // params
    --nav-border-width: 1px;
    --nav-item-space: 1px;
    --nav-link-padding: 8px 16px;
    --nav-link-border-radius: 99px;
    --nav-link-border-width: 2px;

    // props
    .nav-list {
        display: inline-flex;
        border-color: var(--nav-border-color);
        border-width: var(--nav-border-width);
        border-style: solid;
        border-radius: var(--nav-link-border-radius);
    }
    .nav-item {
        margin-top: calc(var(--nav-border-width)*-1);
        margin-bottom: calc(var(--nav-border-width)*-1);
    }
    .nav-item.active .nav-link {
        border-color: var(--nav-link-active-border-color);
    }
    .nav-link {
        border-width: var(--nav-link-border-width);
        border-color: var(--nav-link-border-color);
        border-style: solid;
    }
    .nav-link:hover {
        text-decoration: none;
        border-color: var(--nav-link-hover-border-color);
    }
}
.nav-switcher.nav-light {
    --nav-border-color: var(--palette-white-30);
    --nav-link-color: var(--palette-white-60);
    --nav-link-hover-color: var(--palette-white);
    --nav-link-hover-border-color: var(--palette-white);
    --nav-link-active-color: var(--palette-white);
    --nav-link-active-border-color: var(--palette-white);
}

// Centered
.nav-centered {
    // vars
    --nav-item-space: 3rem;

    // props
    flex: 1 1 auto;

    .nav-list {
        justify-content: center;
    }
    .nav-item {
        margin-left: var(--nav-item-space);
        margin-right: var(--nav-item-space);
    }
}
.nav-centered.nav-pills {
    --nav-item-space: 0.5rem;
}
.nav-centered.nav-points,
.nav-centered.nav-tabs,
.nav-centered.nav-switcher {
    --nav-item-space: 1px;
}
.nav-centered.nav-switcher {
    flex: initial;
    margin-left: auto;
    margin-right: auto;
}

// Right
.nav-right {
    .nav-item {
        margin-left: var(--nav-item-space);
        margin-right: 0;
    }
}
.nav-right.nav-points,
.nav-right.nav-tabs {
    --nav-item-space: 1px;

    .nav-item {
        margin-left: 0;
        margin-right: var(--nav-item-space);
    }
    .nav-item:last-child {
        margin-right: 0;
    }
}
.nav-right.nav-pills {
    --nav-item-space: 1rem;

    .nav-item {
        margin-left: var(--nav-item-space);
        margin-right: 0;
    }
}

// Full
.nav-full {
    flex: 1;

    .nav-item {
        flex: 1;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }
    .nav-link {
        flex: 1;
        justify-content: center;
    }
}
.nav-full.nav-tabs {
    .nav-item {
        margin-right: var(--nav-item-space);
    }
    .nav-item:last-child {
        margin-right: 0;
    }
}
.nav-full.nav-switcher {
    .nav-list {
        display: flex;
    }
}

// Responsive
@include for-sm {
    .nav-left-sm {
        .nav-list {
            justify-content: start;
        }
        .nav-item {
            flex: none;
            justify-content: start;
            margin-left: 0;
            margin-right: var(--nav-item-space);
        }
    }
    .nav-overflow-sm {
        overflow-y: hidden;
        overflow-x: auto;
        white-space: nowrap;
        .nav-list {
            display: inline-flex;
        }
    }
    .nav-menu-sm {
        --nav-menu-item-space: 2rem;

        .nav-list {
            flex-direction: column;
            align-items: stretch;
        }
        .nav-item {
            margin-left: 0;
            margin-right: 0;
            margin-top: var(--nav-menu-item-space);
            margin-bottom: var(--nav-menu-item-space);
        }
        .nav-link {
            flex: 1;
            justify-content: flex-start;
        }
    }
    .nav-menu-sm.nav-pills {
        .nav-item {
            margin-top: 1px;
            margin-bottom: 1px;
        }
    }
    .nav-menu-sm.nav-points,
    .nav-menu-sm.nav-tabs,
    .nav-menu-sm.nav-switcher {
        .nav-list,
        .nav-link {
            border: none;
        }
        .nav-item {
            margin-top: 0;
            margin-bottom: 1px;
        }
    }
    .nav-uncentered-sm {
        flex: 0;
        .nav-list {
            justify-content: flex-start;
        }
    }
}
// Dark theme
@include dark-theme {
    .nav {
        --nav-link-color: var(--palette-white-90);
        --nav-link-background-color: transparent;
        --nav-link-hover-color: var(--palette-white);
        --nav-link-hover-background-color: transparent;
        --nav-link-active-color: var(--palette-white-50);
        --nav-link-active-background-color: transparent;
    }
    .nav-primary {
        --nav-link-color: var(--palette-primary-light);
        --nav-link-hover-color: var(--palette-white-90);
        --nav-link-active-color: var(--palette-white-90);
    }
    .nav-muted {
        --nav-link-color: var(--palette-white-60);
        --nav-link-hover-color: var(--palette-white);
        --nav-link-active-color: var(--palette-white);
    }
    .nav-light {
        --nav-link-color: var(--palette-white-80);
        --nav-link-hover-color: var(--palette-white);
        --nav-link-active-color: var(--palette-white-50);
    }
    .nav-pills,
    .nav-pills.nav-light {
        --nav-link-color: var(--palette-white-90);
        --nav-link-hover-background-color: var(--palette-white-15);
        --nav-link-active-color: var(--palette-black);
        --nav-link-active-background-color: var(--palette-white-90);
    }
    .nav-points,
    .nav-points.nav-light {
        --nav-border-color: var(--palette-white-20);
        --nav-link-color: var(--palette-white-60);
        --nav-link-border-color: transparent;
        --nav-link-background-color: transparent;
        --nav-link-hover-color: var(--palette-white);
        --nav-link-hover-border-color: var(--palette-white);
        --nav-link-hover-background-color: var(--palette-white-15);
        --nav-link-active-color: var(--palette-white);
        --nav-link-active-border-color: var(--palette-white);
        --nav-link-active-background-color: transparent;
    }
    .nav-tabs,
    .nav-tabs.nav-light {
        --nav-link-color: var(--palette-white-70);
        --nav-link-background-color: var(--palette-white-20);
        --nav-link-hover-color: var(--palette-black);
        --nav-link-hover-background-color: var(--palette-white-90);
        --nav-link-active-color: var(--palette-black);
        --nav-link-active-background-color: var(--palette-white);
    }
    .nav-switcher,
    .nav-switcher.nav-light {
        --nav-border-color: var(--palette-white-30);
        --nav-link-color: var(--palette-white-60);
        --nav-link-border-color: transparent;
        --nav-link-background-color: transparent;
        --nav-link-hover-color: var(--palette-white);
        --nav-link-hover-border-color: var(--palette-white-80);
        --nav-link-hover-background-color: transparent;
        --nav-link-active-color: var(--palette-white-90);
        --nav-link-active-border-color: var(--palette-white-90);
        --nav-link-active-background-color: transparent;
    }
}