@import './variables.less';

:global(.document) {
    background-color: @background-color-base;
}

:global(.border) {
    border: 1px solid @border-color-base;
}

:global(.border_editing) {
    border: 1px dashed @border-color-editing;
}

:global(.full_fill) {
    width : 100%;
    height: 100%;
}

:global(.full_width) {
    width : 100%;
}

:global(.full_height) {
    height: 100%;
}

:global(.toolbar) {
    flex-flow: wrap;
    overflow: hidden;
}

:global(.toolbar .toolbar_button) {
    padding: 2px
}

:global(.error_text) {
    color: @error-color;
}

:global(.cm-s-material.CodeMirror) {
    height: 100%;
}


/**********************ReactCSSTransitionGroup 动画效果***************************/
/********淡入淡出******/
:global(.fade-animation-effect-enter) {
    opacity: 0.01;
}

:global(.fade-animation-effect-enter.fade-animation-effect-enter-active) {
    opacity   : 1;
    transition: all 500ms ease-in-out;
}

:global(.fade-animation-effect-leave) {
    position: absolute;
    left    : 0;
    top     : 0;
    opacity : 1;
}

:global(.fade-animation-effect-leave.fade-animation-effect-leave-active) {
    transition: all 500ms ease-in;
    opacity   : 0;
}

/********左入右出******/
:global(.left-in-right-out-enter) {
    transform: translateX(-200px);
    opacity  : 0.01;
}

:global(.left-in-right-out-enter.left-in-right-out-enter-active) {
    transform : translateX(0);
    opacity   : 1;
    transition: all 500ms ease-in-out;
}

:global(.left-in-right-out-leave) {
    transform: translateX(0);
    position: absolute;
    left    : 0;
    top     : 0;
    opacity  : 1;
}

:global(.left-in-right-out-leave.left-in-right-out-leave-active) {
    transition: all 500ms ease-in;
    opacity   : 0;
    transform : translateX(300px);
}