/* ==========================================================================
    Navigation
========================================================================== */

.c-navigation {
    --navigation-bg: transparent;
    --navigation-padding: 15px;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--navigation-padding) 0;
    background: var(--navigation-bg);
    box-shadow: none;
    transition: all 0.35s, $ease-in 0s;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--navigation-mobile-bg-color);
        clip-path: circle(0px at top right);
        transition: all 0.35s $ease-in;
        pointer-events: none;
    }

    &__row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &__logo {
        position: relative;
        line-height: 0;
        padding-right: 15px;

        a {
            display: block;
            width: 35px;

            svg {
                fill: var(--body-text-color);
                path {
                    fill: var(--body-bg-color);
                }
            }
        }
    }

    /* states */
    &.is-hidden {
        transform: translate3d(0, -100%, 0) translateZ(0);
    }

    &.is-sticky {
        --navigation-bg: var(--navigation-sticky-bg);
        box-shadow: var(--navigation-box-shadow);
        backdrop-filter: saturate(180%) blur(5px);
        backface-visibility: hidden;
    }

    // **---------------------------------------------------**
    // MEDIA QUERIES

    /* mobile */
    @include mediaq('<LG') {
        &__logo {
            order: 1;
        }

        &__switch {
            order: 2;
            padding-right: 15px;
            margin-left: auto;
        }

        &__nav {
            display: none;
        }

        /* states */
        &.is-open {
            &:before {
                height: 100vh;
                clip-path: circle(150% at top right);
            }
        }
    }

    /* desktop */
    @include mediaq('>LG') {
        --navigation-padding: 25px;
        --navigation-link-color: var(--body-text-color);

        &__nav {
            &__primary {
                &--list {
                    ul {
                        display: flex;
                        align-items: center;
                        margin: 0;
                        padding: 0;
                        list-style: none;
                        font-family: var(--font-primary);

                        li {
                            padding: 0;
                            margin: 0;

                            &:not(:last-child) {
                                margin-right: 35px;
                            }

                            span {
                                display: block;
                                overflow: hidden;

                                a {
                                    display: inline-block;
                                    @include font-size(18px);
                                    font-weight: var(--font-regular);
                                    color: var(--navigation-link-color);
                                    text-transform: uppercase;

                                    &:hover,
                                    &:active,
                                    &:focus {
                                        --navigation-link-color: var(
                                            --secondary
                                        );
                                    }

                                    &.is-current-page {
                                        --navigation-link-color: var(
                                            --body-current-page-color
                                        );
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Toggler
========================================================================== */

.m-toggler {
    position: relative;
    width: 43px;
    height: 43px;
    order: 3;

    &__lines {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 33px;
        height: 33px;
        transform: translate(-50%, -50%);
        transition: all 0.35s $ease-in;

        span {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 100%;
            height: 2px;
            background: var(--body-text-color);
            transition-timing-function: $ease-in;
            transition-duration: 0.3s;

            &:before,
            &:after {
                content: '';
                display: block;
                position: absolute;
                top: -10px;
                left: 0;
                width: 100%;
                height: 2px;
                background: var(--body-text-color);
                transition: top 0.1s $ease-in 0.25s, opacity 0.1s $ease-in;
            }

            &:after {
                top: auto;
                bottom: -10px;
                transition: bottom 0.1s $ease-in 0.25s, transform 0.3s $ease-in;
            }
        }
    }

    /* states */
    &.is-nav-active & {
        &__lines {
            span {
                transition-delay: 0.3s;
                transition-timing-function: $ease-in;
                transform: rotate(225deg);

                &:before {
                    top: 0;
                    transition: top 0.1s $ease-in, opacity 0.1s $ease-in 0.12s;
                    opacity: 0;
                }

                &:after {
                    bottom: 0;
                    transition: bottom 0.1s $ease-in,
                        transform 0.22s $ease-in 0.15s;
                    transform: rotate(-90deg);
                }
            }
        }
    }

    // **---------------------------------------------------**
    // MEDIA QUERIES

    @include mediaq('>LG') {
        display: none;
    }
}
