action-menu-wrapper{
    display:block;
    position:absolute;
    z-index: calc(var(--project-modal-z-index) + 10);
}

action-menu-wrapper.modal {
    position: fixed;
    background-color: transparent;
    top: 0;
    left: 0;
    height:100vh;
    width:100vw;
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    animation: actionMenuFadeIn .3s forwards ease-out;
    align-items: center;
}

@keyframes actionMenuFadeIn {
    to{
        background-color: rgba(0,0,0,.3);
    }
}

.action-menu, action-menu-items {
    display: flex;
    flex-direction: column;
}

.action-menu {
    background: var(--project-action-menu-background);
    border: var(--project-action-menu-border);
    border-radius: 4px;
    padding: 4px;
}

    .modal .action-menu{
        transform: translateY(100%);
        animation: actionMenuSlideIn .3s forwards ease;
        width:80vw;
        max-width:400px;
        height: 40vh;
    }
    
    @keyframes actionMenuSlideIn {
        to{
            transform: none;
        }
    }

    .action-menu div.header{
        display: none;
        height: unset;
    }

    .modal .action-menu div.header{
        display: block;
        position: relative;
    }

    .action-menu div.header h1{
        text-align: center;
        padding: 1rem;
    }

    .action-menu div.header button{
        position: absolute;
        top:0;
        right:0;
        border: none;
        background: transparent;
    }

    .modal action-menu-items {
        overflow-y: scroll;
        flex-grow:1;
        scrollbar-width: narrow;
    }

    action-menu-items > button{
        display: flex;
        background: transparent;
        text-align: left;
        box-sizing: border-box;
        border: none;
        padding: .5rem  2.5rem .5rem .5rem;
        border-radius: .5rem;
        color: black;
        align-items: center;
        /* justify-content: space-between; */
    }

    action-menu-items > button:disabled {
        opacity: .3;
    }

    action-menu-items > button > i {
        font-size: 1.5em;
        font-weight: normal;
        margin-right: 1ch;
    }

    action-menu-items > button loading-spinner {
        height: 1em;
        width: 1em;
        font-weight: bold;
        justify-self: space-between;
        align-self: space-between;
    }

    action-menu-items loading-spinner svg {
        width: 1em;
        height: 1em;
        transform: translateY(-100%);
    }

    action-menu-items > button.action-menu-item--dangerous:hover {
        background-color: var(--project-color-problem);
        color:white;
    }

    .modal action-menu-items button{
        font-size:1.1rem;
        padding: 1rem;
        position:relative
    }

    .modal action-menu-items button:before{
        content: "";
        border-top: 1px solid var(--project-action-menu-hover);
        width: 90%;
        margin: 0 auto;
        display: block;
        position: absolute;
        top: 0;
        left: calc(5%);
        overscroll-behavior: contain;
    }

    action-menu-items > button:hover{
        background: var(--project-action-menu-hover);
    }

@media only screen and (max-width:900px) {
    .modal .action-menu {
        width:80vw;
        max-width:80vw;
    }
}