@import "../config.less";

.screenshot {
    overflow: scroll;
    
    & body {
        position: relative;
        width: 1340px;
        height: 715px;
        // can be defined as screenshot=...|1000x500|...
        background: #fff;
    }
    
    & body::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none;
    }
    
    & .config-grid-cells__container {
        overflow: hidden;
    }
    
    
    & .main-menu,
    & .main-menu-bar {
        position: absolute;
    }
    
    & .config-grid-panel_dimension_entity .config-grid-panel__background {
        border-bottom-right-radius: @--border-radius;
    }
    & .config-grid-panel_dimension_view .config-grid-panel__background {
        border-radius: @--border-radius;
    }
    
    
    // ----------------------------------
    &_debug body {
        outline: 1px solid red; 
    }
    
    // ----------------------------------
    &_no-main-menu .main-menu {
        display: none;
    }
    &_no-main-menu .main-region {
        top: 0;
    }
    &_no-main-menu .config-grid-panel_dimension_entity .config-grid-panel__background {
        border-radius: @--border-radius;
    }
    &_no-main-menu .config-grid-panel_dimension_view .config-grid-panel__background {
        border-radius: @--border-radius;
    }

    // ----------------------------------
    &_no-panel_view .config-grid__header {
        display: none;
    }
    &_no-panel_view .config-grid-panel_dimension_view  {
        display: none;
    }
    &_no-panel_view .config-grid_type_collection  {
        left: -@config-grid_collection--panel_view--width - @config-grid--cells--margin-left;
    }
    
    // ----------------------------------
    &_no-buttons_new .config-grid-cells__entity-header_kind_adder {
        display: none;
    }
    &_no-buttons_new .config-grid-cells__view-header_kind_adder {
        display: none;
    }
    
    // ----------------------------------
    &_autosize {
        // js-handled
    }
    &_autosize_grid .config-grid-cells__view-header-background,
    &_autosize .config-grid-cells__view-header-background {
        border-top-right-radius: @--border-radius;
        border-bottom-right-radius: @--border-radius;
    }
    
    &__fake-cursor {
        background-image: url("@{bem-path}//screenshot/fake-cursor.png");
        background-repeat: no-repeat;
        position: fixed;
        display: block;
        height: 30px;
        width: 30px;
        z-index: @z-index_notifications;
    }
    
    // flipper
    
    @duration: 20s;
    &_state_flip .main-region__flipper{
        .transition(transform @duration);
    }
    &_state_flip .main-region__flipper .config-grid{
        .transition(transform @duration);
    }
}
