@import "../../../@theme/styles/themes";

@include nb-install-component() {
    .context-menu {
        background-color: nb-theme(background-basic-color-1);
        box-shadow: nb-theme(shadow);
    }

    ul {
        display: block;
        list-style-type: none;
        padding: 0;
        margin: 0;
        li {
            font-size: 0.9375rem;
            font-weight: 600;
            line-height: 1.5rem;
            padding: 0.4375rem 1rem;
            cursor: pointer;
            &.focus {
                background-color: nb-theme(color-basic-transparent-300);
                color: nb-theme(text-basic-color); //#222b45
                outline: none;
            }
            &:hover {
                background-color: nb-theme(color-basic-transparent-200);
                color: nb-theme(text-basic-color);
            }
            &.selected {
                background-color: nb-theme(color-primary-500);
                color: nb-theme(text-control-color);
            }
            &:hover.selected {
                background-color: nb-theme(color-primary-400);
                color: nb-theme(text-control-color);
            }
            &.disabled {
                color: nb-theme(text-disabled-color) !important;
            }
        }
    }
}
:host {
    border: 0 solid transparent;
    border-radius: 0.25rem;
    //box-shadow: 0 0.5rem 1rem 0 rgba(44, 51, 73, 0.1);
    color: #192038;
    font-family: Open Sans, sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.25rem;
    margin-bottom: 1.875rem;
    scrollbar-face-color: #e4e9f2;
    scrollbar-track-color: #f7f9fc;
    .context-menu {
        -webkit-animation-name: fadeFromTop; /* Chrome, Safari, Opera */
        -webkit-animation-duration: 0.25s; /* Chrome, Safari, Opera */
        animation-name: fadeFromTop;
        animation-duration: 0.25s;
        max-height: 300px;
        overflow-y: auto !important;
    }
}

/* Add animation (Chrome, Safari, Opera) */
@-webkit-keyframes fadeFromTop {
    from {
        max-height: 0px;
    }
    to {
        max-height: 300px;
    }
}

/* Add animation (Standard syntax) */
@keyframes fadeFromTop {
    from {
        max-height: 0px;
    }
    to {
        max-height: 300px;
    }
}

// .rbjDropdownMenuItem:empty::before{
//     content: "\200b"; /* unicode zero width space character */
// }