header.menu-crabe {
    @apply transition-transform duration-500;
    transform: translateY(0);
    min-height: 80px;

    @screen lg {
        min-height: 204px;
    }

    &.js-hide-up {
        @screen lg {
            transform: translateY(-100%);
        }
    }

    .upper-menu {
        .logo {

            .pip-logo-link {
                @apply flex items-center justify-center;

                img {
                	max-height: 75px;

                	@screen lg {
                		max-height: inherit;
                	}
                }
            }
        }

        li {
            @apply relative flex flex-row items-center;

            &::after {
                content: '';
                @apply hidden h-6 mx-4 bg-primary;
                width: 1px;

                @screen lg {
                    @apply inline-block;
                }
            }

            &:last-child {
                &::after {
                    @apply hidden;
                }
            }
        }

        a {
            @apply z-20 text-base font-semibold transition-colors duration-300 font-primary;

            &:hover {
                @apply text-secondary;
            }
        }

        i {
            @apply mr-4 text-secondary;
        }
    }

    .lower-menu {
        .menu {
            .menu-item {

                @apply relative my-1;

                @screen lg {
                    @apply my-0 ml-8;
                }

                &:first-child {
                    @apply ml-0;
                }

                &>a {
                    @apply transition-colors duration-300;

                    &::before {
                        @apply absolute left-0 w-full h-1 transition-transform duration-300 opacity-0;
                        content: '';
                        bottom: -8px;

                        transform: translateY(10px);
                        z-index: -1;
                        background: var(--border-active-color);

                        @screen lg {
                            @apply h-2;
                            bottom: -21px;
                        }
                    }

                }

                &.current-menu-ancestor,
                &.current-menu-item,
                &.current-menu-parent,
                &.active-menu-item,
                &.mega-menu-opened {
                    &>a {
                        &::before {
                            @apply opacity-100;
                            transform: translateY(0px);
                        }
                    }
                }


                .sub-menu {
                    @apply hidden p-4;
                }

                &.mega-menu-opened {
                    &>a {
                        &::after {
                            @apply rotate-180;
                        }
                    }

                    &>.sub-menu {
                        @apply block;

                        @screen lg {
                            @apply hidden;
                        }
                    }
                }

                &.menu-item-has-children {
                    &>a {
                        &::after {
                            @apply ml-2 font-normal transition-transform duration-300 transform absolute;
                            content: '\f078';
                            font-family: 'Font Awesome 5 Pro';

                            @screen lg {
                                @apply hidden;
                            }
                        }
                    }
                }

                a {
                    @apply relative z-20 text-lg font-semibold text-primary font-primary;

                    &:hover {
                        @apply text-secondary;
                    }
                }
            }

            &>.menu-item.menu-item-has-children {
                &>ul>li {
                    &>a {
                        @apply text-base;

                        i {
                            @apply hidden;
                        }
                    }

                    &>ul>li>a {
                        @apply text-sm;
                    }
                }
            }
        }
    }

    .menu-socials {
        a {
            @apply flex items-center justify-center w-8 h-8 mr-4 transition-opacity duration-300 border rounded-full border-primary;

            i {
                @apply text-primary;
            }
        }
    }

    &.menu-not-on-top {
        @apply bg-white;
    }
}

.menu-main {
    @apply absolute left-0 w-full bg-white opacity-0 pointer-events-none;
    transform: translateX(-100px);
    transition: .33s opacity, .33s transform;
    top: 80px;
    min-height: calc(100vh - 80px);

    @screen lg {
        @apply static top-0 w-auto opacity-100 pointer-events-auto bg-none;
        transform: translateX(0);
        min-height: inherit;
    }

    &.opened {
        opacity: 1;
        transform: translateX(0);
        pointer-events: all;
    }
}

.lower-menu .menu .menu-item {

    @apply text-center;

    @screen lg {
        @apply text-left;
    }

    &.mega-menu-opened {

        .menu-crabe-mega-menu {
            @apply block;

            @screen lg {
                @apply opacity-100 pointer-events-auto;
            }
        }
    }


    svg.open {
        path {
            @apply text-primary;
        }
    }

    .upper-menu.mobile {
        .menu-top-menu-container {
            &>ul {
                &>li {
                    @apply my-1;

                    @screen lg {
                        @apply my-0;
                    }
                }
            }
        }
    }

}



.menu-crabe-socials {
    z-index: 60;

    .social-menu {
        &:hover {
            li {
                a {
                    &:not(:hover) {
                        @apply opacity-50;
                    }
                }
            }
        }
    }

    a {
        @apply flex items-center justify-center w-8 h-8 mr-4 transition-opacity duration-300 border border-white rounded-full;
    }
}

body.body-mega-menu-opened {
    .menu-crabe-socials {
        @apply block;
    }
}



.menu-crabe-mega-menu {

    .group {
        @apply translate-y-0 opacity-100;

        transition: .44s opacity, .44s transform;
    }

    &.opacity-0.hidden.pointer-events-none {

        .group {
            @apply transform translate-y-32 opacity-0;
        }
    }

    .close {
        z-index: 55;
        top: calc(128px - 32px);
        left: calc(100% - 32px - 128px);
        transition: .33s color, .33s transform;
    }

    z-index: 54;
    top: 204px;
    height: calc(100vh - 204px);

    .grand-children {

        li {
            a {
                &:before {
                    @apply absolute inline-block mr-3 transition-opacity duration-300 bg-white opacity-0;
                    content: '';
                    left: -42px;
                    width: 30px;
                    height: 1px;
                }

                &:hover {
                    &:before {
                        @apply opacity-100;
                    }
                }
            }
        }
    }
}