.paragraph--type--menu{
    margin-bottom: 2rem;   
}
@media(width > 64rem){
    .paragraph--type--menu{
        border-right: 1px solid var(--c-gray-200);
        padding-right: 2rem;
    }
    .paragraph--type--menu.background{
        padding-right: 1rem;
        border-right: 0;
    }
}

.paragraph--type--menu .field--name-field-menu > .menu{
    display: none;
}
@media(width > 64rem){
    .paragraph--type--menu .field--name-field-menu > .menu{
        display: block;
    }
}

.paragraph--type--menu .field--name-field-menu > .menu-select{
    display: block;
}
@media(width > 64rem){
    .paragraph--type--menu .field--name-field-menu > .menu-select{
        display: none;
    }
}


.paragraph--type--menu > div ul{
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline: 0;
    font-weight: var(--f-base);
}

.paragraph--type--menu > div ul > li{
    width: 100%;
    border-bottom: 1px solid var(--c-gray-200);
    padding: 0.65rem 0;
}

.paragraph--type--menu > div > ul > li:has(> div > ul),
.paragraph--type--menu.background > div > ul > li:has(> div > ul){
    padding: 0;
}

.paragraph--type--menu > div ul > li.active a{
    color: var(--c-black);
    pointer-events: none;
}

.paragraph--type--menu > div > ul > li:first-child > button,
.paragraph--type--menu .menu_link_content:has(> .field--name-field-menu-icon){
    display: none;
}

.paragraph--type--menu > div > ul > li:first-child:has(> button){
    border-bottom: none;
}

.paragraph--type--menu > div > ul > li > div > ul > li.menu-item--expanded > a{
    display: flex;
    justify-content: space-between;
}

.paragraph--type--menu > div > ul > li > div > ul > li.menu-item--expanded {
    display: grid;
    grid-template-columns: 1fr 0.8125rem;
    grid-template-rows: auto auto;
    grid-template-areas:    'link button'
                            'submenu submenu';
    column-gap: 0.35rem;
}

.paragraph--type--menu > div > ul > li > div > ul > li.menu-item--expanded > a{
    grid-area: link;
}

.paragraph--type--menu > div > ul > li > div > ul > li.menu-item--expanded > button{
    grid-area: button;
    background-color: initial;
    border: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 0.6rem;
    margin: 0;
    padding: 0.6rem 0 0;
}

.paragraph--type--menu > div > ul > li > div > ul > li.menu-item--expanded > button > span{
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.paragraph--type--menu > div > ul > li > div > ul > li.menu-item--expanded.is-open > button > span{
    transform: rotate(180deg);
}

.paragraph--type--menu > div > ul > li > div > ul > li.menu-item--expanded > div{
    grid-area: submenu;
    display: none;
    height: 0;
    transition: var(--transition);
}

.paragraph--type--menu > div > ul > li > div > ul > li.menu-item--expanded.is-open > div{
    display: block;
    height: fit-content;
}

.paragraph--type--menu > div > ul > li > div > ul > li.menu-item--expanded > div > ul > li{
    border-bottom: 0;
    font-size: 0.925rem;
    padding: 0.65rem 0.15rem 0;
}

.paragraph--type--menu > div > ul > li > div > ul > li.menu-item--expanded > div > ul > li:last-child{
    padding-bottom: 0.5rem;
} 

.paragraph--type--menu > div > ul > li > div > ul > li.menu-item--expanded > div > ul > li > a{
    color: var(--c-black);
}


/* Background */
.paragraph--type--menu.background > div > ul{
    background-color: white;
    box-shadow: var(--box-shadow);
}

.paragraph--type--menu.background > div ul > li{
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--c-gray-100);
}

/* Fixant menu */
.paragraph--type--two-columns > .row > div:first-child:has( > div > div > .paragraph--type--menu.fixed ){
    position: sticky;
    top: 1rem;
    z-index: 2;
}
@media(width > 64rem){
    .paragraph--type--two-columns > .row > div:first-child:has( > div > div > .paragraph--type--menu.fixed ){
        top: 2.5rem;
    }
  
}

/* Select menu */

.paragraph--type--menu .menu-select{
    border: 0;
    box-shadow: var(--box-shadow);
    padding: 0.65rem 2rem 0.55rem 0.85rem; 
    width: 100%;
    appearance: none;
    background-image: url('data:image/svg+xml,<svg width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.353516 0.353516L6.35352 6.35352L12.3535 0.353516" stroke="%23333333"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}