#trigger-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 45px;
    aspect-ratio: 1;
    cursor: pointer;
    box-shadow: 0 3px 6px #00000029;

    border: 0;
    margin: 0;
    padding: 0;

    -moz-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    -ms-transition: 0.3s all ease;
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;

    >svg {
        height: 25px;
        aspect-ratio: 1;
        object-fit: contain;
    }
}

.responsive-menu {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    height: 100%;
    width: 45%;
    z-index: 999;

    display: flex;
    flex-direction: column;
    gap: 20px;

    padding: 30px 20px;
    box-sizing: border-box;
    box-shadow: 0 3px 6px #00000029;
    background-color: #1e1e1e;

    transition: transform 1s ease;

    &.active {
        transform: translateX(0);
    }

    >.block {
        &.branding {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .image {
                position: relative;

                >a {
                    display: flex;

                    >img {
                        max-height: 20px;
                        height: 100%;
                        width: 100%;
                    }
                }
            }

            #close-btn {
                display: flex;
                align-items: center;
                justify-content: center;

                height: 45px;
                aspect-ratio: 1;
                cursor: pointer;
                box-shadow: 0 3px 6px #00000029;

                border: 0;
                margin: 0;
                padding: 0;

                -moz-transition: 0.3s all ease;
                -o-transition: 0.3s all ease;
                -ms-transition: 0.3s all ease;
                -webkit-transition: 0.3s all ease;
                transition: 0.3s all ease;

                >svg {
                    height: 25px;
                    aspect-ratio: 1;
                    object-fit: contain;
                }
            }
        }

        &.menu {
            >.menu-hoofdmenu-container {
                >#primary-menu {
                    list-style: none;
                    margin: 0;
                    padding: 0;

                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    .menu-item {
                        display: flex;
                        flex-direction: column;
                        gap: 10px;

                        a {
                            color: #fff;
                            font-size: 14px;
                            width: 100%;

                            &::after {
                                content: none;
                            }
                        }

                        &:not(.menu-item-has-children) {
                            padding: 10px 20px;
                            box-sizing: border-box;
                        }

                        &.menu-item-has-children {
                            .sub-menu {
                                display: none;
                                list-style: none;
                                padding: 0 0 0 20px;

                                &.active {
                                    display: flex;
                                    flex-direction: column;
                                    gap: 10px;
                                }

                                li:not(:has(.container)) {
                                    padding: 10px 20px;
                                    box-sizing: border-box;
                                }

                                .open-submenu,
                                .sub-menu,
                                .sub-menu.active {
                                    display: none !important;
                                }
                            }

                            .container {
                                display: flex;
                                justify-content: space-between;
                                gap: 40px;

                                padding: 10px 20px;
                                box-sizing: border-box;

                                .open-submenu {
                                    display: flex;
                                    align-items: center;
                                    cursor: pointer;
                                    background: none;
                                    border: 0;
                                    padding: 0;
                                    margin: 0;

                                    span {
                                        height: 25px;
                                        aspect-ratio: 1;
                                        background-color: #fff;
                                        mask: url('/wp-content/themes/risyndigital/assets/icons/fa-chevron-down.svg') no-repeat center;
                                        mask-size: contain;

                                        &.open {
                                            display: block;
                                        }

                                        &.close {
                                            display: none;
                                            transform: rotate(180deg);
                                        }
                                    }

                                    &.active {
                                        span {
                                            &.open {
                                                display: none;
                                            }

                                            &.close {
                                                display: block;
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        &.current-menu-item {
                            &:not(:has(.container)) {
                                background-color: #fff;
                            }

                            >.container {
                                background-color: #fff;

                                .open-submenu {
                                    span {
                                        background-color: #000;
                                    }
                                }
                            }

                            >a,
                            >.container>a {
                                color: #000;
                            }

                            .open-submenu span {
                                background-color: #000;
                            }
                        }
                    }
                }
            }
        }

        &.button-repeater {
            display: none;
        }
    }
}

body.admin-bar {
    >.responsive-menu {
        top: 32px;
    }
}

@media screen and (max-width: 768px) {
    body.admin-bar {
        >.responsive-menu {
            top: 46px;
        }
    }

    .responsive-menu {
        width: 75%;

        >.block.button-repeater {
            display: flex;
        }
    }
}

@media screen and (max-width: 480px) {
    #trigger-btn {
        height: 35px;

        >svg {
            height: 20px;
        }
    }

    .responsive-menu {
        width: 100%;

        >.block {
            &.branding {
                #close-btn {
                    height: 35px;

                    >svg {
                        height: 20px;
                    }
                }
            }
        }
    }
}