.wp-block-menu {
    --menu-gap: 2em;
}

.wp-block-menu a[href] {
    text-decoration-color: transparent;
}

.wp-block-menu a[href]:focus,
.wp-block-menu a[href]:hover {
    text-decoration-color: currentcolor;
}

.wp-block-menu > .menu {
    align-items: flex-start;
}

.wp-block-menu > .menu > .menu-item > .sub-menu {
    list-style: none;
    padding-inline-start: 0;
}

.wp-block-menu .menu-item > a {
    text-underline-offset: 0.25em;
}

.wp-block-menu .current-menu-ancestor > a,
.wp-block-menu .current-menu-parent > a,
.wp-block-menu .current-menu-item > a {
    font-weight: 500;
}

.wp-block-menu .menu-item-has-children {
    position: relative;
}

.wp-block-menu .menu-item-has-children > a {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.wp-block-menu .wp-block-menu-dialog :not(.wp-element-button) {
    color: var(--wp--preset--color--contrast) !important;
}

/* mobile only styles */

@media screen and (max-width: 767px) {
    .wp-block-menu .menu-item-has-children .sub-menu {
        display: flex;
        flex-direction: column;
        gap: var(--menu-gap, 1rem);
        margin-top: var(--menu-gap, 1rem);
        padding-inline-start: 1.5rem !important;
    }
}

/* desktop only styles */

@media screen and (min-width: 768px) {
    .wp-block-menu .menu-item-has-children > a::after {
        background-color: currentcolor;
        content: '';
        display: block;
        height: 0.7em;
        mask-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.59 0.589844L6 5.16984L1.41 0.589844L0 1.99984L6 7.99984L12 1.99984L10.59 0.589844Z' fill='black'/%3E%3C/svg%3E");
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        transform: rotate(0deg);
        transition: transform 0.3s ease;
        width: 0.7em;
    }

    .wp-block-menu .menu-item-has-children .sub-menu {
        background-color: var(--wp--preset--color--white);
        border-radius: 0 1rem 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        left: 0;
        min-width: 30ch;
        opacity: 0;
        padding: var(--wp--preset--spacing--40) !important;
        position: absolute;
        top: -100vh;
        transition: opacity 0.5s ease;
        visibility: hidden;
        width: 100%;
        z-index: 10;
    }

    .wp-block-menu .menu-item-has-children .sub-menu::before {
        content: '';
        display: block;
        height: 1rem;
        position: absolute;
        top: -1rem;
        width: 100%;
    }

    .wp-block-menu .menu-item-has-children:hover .sub-menu {
        margin-top: 1rem;
        opacity: 1;
        top: 100%;
        visibility: visible;
    }
}