.component_ide{
    display: flex;
    flex-direction: column;
    width: 100%;

    .editor_container{
        display: flex;
        flex-grow: 1;
        // https://stackoverflow.com/questions/44948158/flexbox-overflow-issue-in-firefox
        min-height: 0;
    }

    .component_menubar{
        .component_dropdown{
            float: right;
            .dropdown_button{
                border: none;
                padding: 0; margin: 0;
            }
            &.active .dropdown_button{
                box-shadow: none;
            }
            .dropdown_container ul li > div{
                padding: 0;
                width: 200px;
                a {
                    padding: 7px 5px 7px 10px;
                    display: inline-block;
                    width: 100%;
                    box-sizing: border-box;
                }
            }
        }
    }
}



.editor-appear{
    opacity: 0;
}
.editor-appear.editor-appear-active{
    transition: opacity 0.3s ease-out;
    opacity: 1;
}



.fab-appear, .fab-enter{
    opacity: 0;
}
.fab-appear.fab-appear-active, .fab-enter.fab-enter-active{
    transition: all 0.4s ease-out;
    opacity: 1;
}
.fab-leave{
    opacity: 1;
}
.fab-leave.fab-leave-active{
    transition: opacity 0.2s ease-out;
    opacity: 0;
}