/* Main nav sub-menu container */
.wp-block-navigation__submenu-container {
    background: none !important;
    color: white !important;
    border-radius: 30px;
    overflow: hidden;
    border: none;
    border-width: 0;
}
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
    border: none;
    
}


/* Sub-menu LI */
.wp-block-navigation__submenu-container > li.wp-block-navigation-item {
    background: none !important;
    color: white !important;
    border: none;
    direction:rtl;
    position: relative;
    display: inline-block;
    
}
/* Add top padding to the first level of submenu only */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container-content > ul > li.wp-block-navigation-item > .wp-block-navigation__submenu-container {
    padding-top: 10px;
}

/* Sub-menu A */
.wp-block-navigation__submenu-container > li.wp-block-navigation-item > .wp-block-navigation-item__content {
    border: none;
    background: var(--wp--preset--color--button-background);
    color: var(--wp--preset--color--button-text);
    text-align: right;
}
.wp-block-navigation__submenu-container > li.wp-block-navigation-item > .wp-block-navigation-item__content:hover {
    opacity: 0.9;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    margin-top: 4px;
    margin-right: 4px;
    display: inline-block;
}

/* Sub-menu Button. Move to the left side of the sub-menu button. */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
    background: none;
    top: 5px;
    bottom: 1px;
    height: calc(100% - 6px);
    display: inline-block;
    position: absolute;
    left: -4px;
    width: 14px;
    
}
/* Sub-menu Button. Fix arrow direction. */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg {
    transform: rotate(90deg);
    height: 100%;
    top: 0;
    bottom: 0;
}