nav.#{$package-prefix}-menu {
    position: fixed;
    top: 0;
    background-color: $very-light-gray;
    z-index: 2;

    &.horizontal {
        width: 100%;

        .menu-bar {
            @include grid-row;

            width: 100%;
            max-width: none;
            height: rem-calc(90);

            @include breakpoint(large) {
                padding: rem-calc(0 42);
            }

            &:not(.submenu) {
                border-bottom: 1px solid $dark-gray;
            }

            .logo,
            .account {
                position: relative;
                @include grid-column(1);
                @include breakpoint(medium down) {
                    padding: 0;
                }
            }

            .logo {
                img {
                    float: left;
                    height: rem-calc(64);
                    margin: rem-calc(13 0);
                    
                    @include breakpoint(medium down) {
                        margin-left: rem-calc(10);
                    }
                }
            }

            .account {
                .account-icon {
                    float: right;
                    width: rem-calc(64);
                    height: rem-calc(64);
                    margin: rem-calc(13 0);
                    border-radius: 50%;
                    
                    background-image: sai-image('account-icon.png');
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    
                    @include breakpoint(medium down) {
                        margin-right: rem-calc(10);
                    }
                }
            }

            .menu-items {
                @include grid-column(10);

                height: inherit;
                text-align: center;

                ul {
                    @include menu-base;
                    display: inline-block;
                    height: inherit;
                    vertical-align: top;

                    li {
                        position: relative;
                        height: inherit;

                        &.group {
                            border: solid $light-gray;
                            border-width: rem-calc(18 0 0 2);

                            &:last-of-type {
                                border-right-width: rem-calc(2);
                            }

                            ul {
                                margin-top: rem-calc(-18);
                            }

                            .groupname {
                                position: absolute;
                                top: rem-calc(-18);
                                left: rem-calc(6);
                                color: $dark-gray;
                                line-height: rem-calc(18);
                                font-family: 'Lora Bold';
                                font-size: rem-calc(12);
                            }
                        }

                        &:not(.group) {

                            &:hover,
                            &.active {
                                &:after {
                                    content: '';
                                    position: absolute;
                                    width: rem-calc(50);
                                    height: rem-calc(3);
                                    background: $primary-color;
                                    bottom: 0;
                                    transform: translateX(-50%);
                                }
                            }

                            a {
                                background: none;
                                color: $black;

                                @include breakpoint(large) {
                                    padding-left: rem-calc(27);
                                    padding-right: rem-calc(27);
                                }
                            }
                        }
                    }
                }
            }

            &.submenu {
                .menu-items {
                    @include grid-column(12);
                }
            }
        }
    }

    &.vertical {
        width: rem-calc(255);
        height: 100%;

        .logo {
            position: relative;
            padding: rem-calc(40 87);

            img {
                width: rem-calc(81);
                height: rem-calc(90);
            }
        }

        .menu-items {
            position: relative;

            ul {
                @include menu-base;

                li {
                    position: relative;
                    display: inline-block;
                    width: 100%;

                    a {
                        padding: rem-calc(0 0 0 24);
                        line-height: rem-calc(60);
                        vertical-align: middle;
                        color: $body-font-color;
                        border-bottom: 1px solid $light-gray;

                        &:hover {
                            background-color: $light-gray;
                        }
                    }

                    &.show-icon {
                        &:after {
                            content: '';
                            position: absolute;
                            right: rem-calc(17);
                            top: rem-calc(20);
                            width: rem-calc(11);
                            height: rem-calc(19);
                            background-image: sai-arrow-gray-right-svg($color: $very-dark-gray);
                        }

                        &.active {
                            &:after {
                                top: rem-calc(25);
                                width: rem-calc(19);
                                height: rem-calc(11);
                                background-image: sai-arrow-gray-down-svg($color: $very-dark-gray);
                            }
                        }
                    }

                    &.active {
                        > a {
                            color: $primary-color;
                        }
                    }
                }

                ul {
                    li {
                        a {
                            padding: rem-calc(0 0 0 54);
                            line-height: rem-calc(50);
                            font-family: "Brandon Grotesque Light";
                        }

                        &:after {
                            top: rem-calc(15);
                        }
                    }

                    &.group {
                        position: relative;
                        padding-top: rem-calc(18);

                        &:before {
                            content: attr(data-group-title);
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: rem-calc(255);
                            height: rem-calc(18);
                            padding-left: rem-calc(54);
                            background-color: $light-gray;

                            font-family: "Athelas Regular";
                            font-size: rem-calc(11);
                            color: $dark-gray;
                            box-shadow: rem-calc(0 5 7 -8) #333
                        }
                    }
                }
            }
        }

        .account {
            position: relative;
            padding: rem-calc(40 87);

            .account-icon {
                width: rem-calc(81);
                height: rem-calc(81);
                border-radius: 50%;
                
                background-image: sai-image('account-icon.png');
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
            }
        }
    }
}