lightspeeddevelopment/lsx-customizer

#top-menu {
    & > .container {
        align-items: center;
        display: flex;
        flex-flow: row nowrap;
        height: map-get($top-menu, height);
        justify-content: flex-end;
        padding: 0;
        width: 100%;

        .header-central & { justify-content: center; }
    }

    .top-menu {
        height: 100%;

        &:not(.pull-left) { order: 1; }

        &.pull-left {
            flex-grow: 1;
            float: none !important;

            .header-central & { flex-grow: 0; }
        }

        & > .menu {
            @extend %list-unstyled;
            @include clearfix();

            height: 100%;
            margin-bottom: 0;

            & > .menu-item {
                display: table;
                float: left;
                height: 100%;

                & > a {
                    display: table-cell;
                    font-size: 13px;
                    line-height: 13px;
                    padding: 0 15px;
                    vertical-align: middle;

                    @include media('>=phone') { transition: all 300ms ease; }

                    &:before {
                        @include fa-icon();

                        font-size: 15px;
                        padding-right: 5px;
                        transition: all 300ms ease;
                    }
                }

                &.map > a:before { content: $fa-var-map-o; }
                &.tel > a:before { content: $fa-var-phone; }
                &.email > a:before { content: $fa-var-envelope-o; }

                &.cta,
                &.cta-red {
                    margin-left: 5px;
                    padding-right: 0;

                    & > a {
                        @include lsx-button-scaffolding();

                        &,
                        &:active,
                        &:visited {
                            border-radius: 0;
                            box-shadow: none;
                            display: table-cell;
                            font-size: 12px;
                            height: auto;
                            padding-bottom: 0;
                            padding-top: 0;
                            transition: all 300ms ease;
                        }
                    }
                }

                &.cta {
                    & > a {
                        @include lsx-button-colour();
                    }
                }

                &.cta-red {
                    & > a {
                        @include lsx-button-colour(#FFFFFF, #FFFFFF, #D93A3A, #9F2020, #9F2020);
                    }
                }
            }
        }

        &.pull-left {
            & > .menu {
                & > .menu-item {
                    @include media('<phone') {
                        &:not(.cta):not(.cta-red) {
                            & > a { padding: 0 5px; }

                            &:first-child { margin-left: 5px; }
                        }

                        .caret { display: none; }

                        &.wpml-ls-menu-item {
                            & > a {
                                & > .wpml-ls-flag + span { display: none; }
                            }
                        }
                    }
                }
            }
        }

        &:not(.pull-left) {
            & > .menu {
                & > .menu-item {
                    @media (max-width: 500px) {
                        &:not(.cta):not(.cta-red) > a {
                            padding: 0;

                            &:before {
                                font-size: 18px;
                                padding: 0 5px;
                            }
                        }
                    }
                }
            }
        }
    }

    .dropdown {
        @include media('<desktop') {
            &.open {
                & > .dropdown-menu {
                    opacity: 1;
                    transform: scale(1, 1);
                }
            }
        }

        @include media('>=desktop') {
            &:hover {
                & > .dropdown-menu {
                    opacity: 1;
                    transform: scale(1, 1);
                }
            }
        }
    }

    .dropdown-menu {
        box-shadow: none;
        border: 0 none;
        border-radius: 0;
        display: block;
        left: 0;
        margin: 0;
        opacity: 0;
        padding: 0;
        transition: all 300ms ease;
        transform: scale(1, 0);
        transform-origin: top center;
        z-index: 1001;

        & > .menu-item {
            transition: all 300ms ease;
            // -webkit-backface-visibility: hidden;
            // -webkit-transform-style: preserve-3d;

            &.dropdown {
                &:before {
                    @include fa-icon();

                    content: $fa-var-angle-right;
                    position: absolute;
                    right: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }

            & > a {
                background-color: inherit;
                color: inherit;
                font-size: 14px;
                padding: 12px 40px 12px 15px;

                &:hover,
                &:active:hover,
                &:focus {
                    background-color: transparent;
                }
            }

            .dropdown-menu {
                left: 100%;
                top: 0;
                // -webkit-backface-visibility: hidden;
                // -webkit-transform-style: preserve-3d;
            }
        }
    }

    .top-menu:not(.pull-left) {
        .dropdown-menu {
            left: auto;
            right: 0;
        }
    }

    @include media('<tablet') {
        #menu-top-menu {
            display: flex;
            width: 100%;
            justify-content: flex-end;
            padding: 0;
            margin: 0;
            .menu-item {
                height: 100%;
                float: initial;
                text-align: center;
                a {
                    font-size: 12px;
                    padding: 0 7px;
                }
            }
        }
    }
    @media (max-width: 500px) {
        #menu-top-menu {
            .menu-item {
                &.map,
                &.tel,
                &.email {
                    max-width: 35px;
                    > a {
                        @include hide-text();
                        &:before {
                            padding: 0;
                        }
                    }
                }
            }
        }
    }
}

@include top-menu-colours();