%nav-button {
    @extend %button;
    --background: transparent;
    --background-hover: var(--color-primary);
}

.nav-bar {
   --desktop-height: 75px;
   --desktop-logo-width: 145px;
   // Put the logo up this number of pixel when scrolling
   --desktop-dock-logo-offset: -73px;

   --mobile-height: 47px;
   --mobile-logo-width: 100px;

   // Put the logo up this number of pixel when scrolling
   --mobile-dock-logo-offset: -52px;

    z-index: 1;

    position: sticky;
    top: 0;
    padding: 0;

    display: grid;
    grid-template-columns: auto minmax(0px, var(--width)) auto;
    box-shadow: var(--elevation-high);
    background: var(--background-dark);

    &--content {
        grid-area: 1 / 2 / 2 / 3;
        height: var(--desktop-height);
        margin: 0;

        display: grid;
        grid-template-columns: var(--desktop-logo-width) 1fr auto auto auto;

        @media ($mobile-breakpoint) {
            height: var(--mobile-height);
        }
    }

    &--logo {
        position: absolute;
        box-shadow: var(--elevation-high);
        top: 0;
        width: var(--desktop-logo-width);
        padding: var(--space-small);

        background: var(--background-dark);
        transition: top var(--transitions-duration) ease-out;

        @media($mobile-breakpoint) {
            width: var(--mobile-logo-width);
        }
    }

    &__docked &--logo, &__open &--logo {
        top: var(--desktop-dock-logo-offset);
        box-shadow: none;
        background: transparent;

        @media ($mobile-breakpoint) {
            top: var(--mobile-dock-logo-offset);
        }
    }

    // Override the transparent background and box-shadow: none until the
    // docking transition ends (see nav.js)
    &__docking &--logo {
        background: var(--background-dark);
        box-shadow: var(--elevation-high);
    }

    &--menu {
        grid-area: 1 / 2 / 2 / 3;
        align-self: center;

        display: flex;

        @media ($mobile-breakpoint) {
            z-index: -1;

            position: absolute;
            top: -500px;
            width: 100%;

            box-shadow: var(--elevation-high);
            padding: 0 var(--space-medium);

            flex-direction: column;
            gap: var(--space-small);

            background: var(--color-dark);
            transition: all var(--transitions-duration) ease-in-out;
        }
    }

    &__open &--menu {
        top: 0;
        padding-top: calc(var(--mobile-height) + var(--space-small));
        padding-bottom: var(--space-small);
    }

    &--menu-item {
        list-style: none;
    }

    &--menu-link {
        @extend %nav-button;
    }

    &--separator {
        grid-area: 1 / 4 / 2 / 5;
        align-self: center;
        height: 40%;
        width: 2px;
        margin: 0 var(--space-small);

        background: var(--color-on-primary);

        @media($mobile-breakpoint) {
            display: none;
        }
    }

    &--languages {
        grid-area: 1 / 5 / 2 / 6;
        align-self: center;
        padding: 0 var(--space-xsmall);

        display: flex;
        gap: var(--space-small);

        @media($mobile-breakpoint) {
            grid-area: 1 / 3 / 2 / 4;
        }
    }

    &--language-link {
        @extend %nav-button;
        padding: var(--space-small);

        @media($mobile-breakpoint) {
            padding: var(--space-xsmall);
        }
    }

    &--toggle-button {
        display: none;
        grid-area: 1 / 4 / 2 / 5;
        align-self: center;
        margin: 0 var(--space-medium);

        cursor: pointer;

        @media ($mobile-breakpoint) {
            display: block;
        }

        .bar {
            width: 25px;
            height: 3px;
            margin: 5px 0;

            display: block;
            background-color: var(--color-on-primary);
            transition: all 0.3s ease-out;
        }
    }

    &__open &--toggle-button {
        .bar {
            &:nth-child(1) {
                transform: translateY(8px) rotate(-45deg);
            }

            &:nth-child(2) {
                opacity: 0;
            }

            &:nth-child(3) {
                transform: translateY(-8px) rotate(45deg);
            }
        }
    }

    &--links {
        grid-area: 1 / 3 / 2 / 4;
        display: flex;
        justify-self: end;
        align-self: center;

        @media($mobile-breakpoint) {
            display: none;
        }
    }

    &--link {
        @extend %nav-button;
        display: flex;
        padding: var(--space-xsmall);
    }

    &--link-icon {
        width: 1.8em;
        filter: invert(100%);
    }
}

