@use '../function' as *;
@use '../mixin';
@use '../settings';
@use 'sass:color';

@mixin roolith-nav() {
    .nav {
        @include mixin.clearfix();
        margin-left: calc(var(--r-nav-spacing) * -1);
        float: left;
    }

    .nav-right {
        float: right;
        margin-left: 0;
        margin-right: calc(var(--r-nav-spacing) * -1);
    }

    .nav-item {
        float: left;
    }

    .nav-link {
        display: block;
        padding: rem(7) var(--r-nav-spacing);
        font-size: rem(14);
        color: var(--r-nav-link-color);
        position: relative;
        @include mixin.transition('color');

        &:hover,
        .active & {
            color: var(--r-nav-active-link-color);
        }

        &.dimmed {
            color: var(--r-nav-dimmed-link-color);
        }

        .nav-icon-only & {
            font-size: rem(16);
        }
    }

    .nav-center {
        text-align: center;
        float: none;

        .nav-item {
            float: none;
            display: inline-block;
        }
    }

    .nav-vertical {
        float: none;
        margin: 0;

        .nav-item {
            float: none;
            display: block;
            padding: 0 0 rem(5);

            &:last-child {
                padding: 0;
            }
        }
    }

    .nav-primary {
        .nav-link {
            border-radius: var(--r-nav-border-radius);
        }

        .active .nav-link {
            background: var(--r-nav-primary-color);
            color: var(--r-color-white);
        }
    }

    @each $name, $value in settings.$colors {
        .nav-link-#{'' + $name} {
            background: var(--r-color-#{$name});
            background: linear-gradient(to bottom, color-lighten(var(--r-color-#{$name}), 5%) 0%, $value 100%);
            color: var(--r-color-white);

            &:hover {
                background: color-lighten(var(--r-color-#{$name}), 3%);
                background: linear-gradient(
                    to bottom,
                    color-lighten(var(--r-color-#{$name}), 7%) 0%,
                    color-lighten(var(--r-color-#{$name}), 3%) 100%
                );
                box-shadow: var(--r-button-hover-shadow-dark);
                color: var(--r-color-white);
            }
        }
    }
}