/*global style adjustments, override specifically */
////
/// @group layout/pageframe
////

/// Global style adjustments that don't belong to a specific component.
@mixin os-pageframe {
    
    /* Notification popup style; unfortunately */ 
    /* this will happen globally, because notifications are outside of other elements */ 
    .v-Notification {
        .v-Notification-caption {
            font-size: $v-font-size * 2;
            }
        .v-Notification-description{
            font-size: $v-font-size * 1.2;
            display: block;
            text-align: center;
            margin-left: 0px;
            margin: 0 auto;
            }
        }
    
    
    div.v-slider-base {
        width: $v-unit-size * 10;
        }
        
    
    /* external welcome page iframe container */
    .v-verticallayout-os-welcome {
        padding: 0px !important;
        }
    iframe {
        border-width: 0px;
        }
    
    .v-label-os-dashboardtile {
        color: valo-font-color($os-button-color);
        font-size: 9px;
        line-height: 1.2;
    }

    .v-label-os-dashboardtile-number {
        font-size: 25px;
    }
    
    .v-slot-os-dashboardtile {
        vertical-align: middle;
    }

    .v-verticallayout-os-dashboardtile {
        font-weight: $v-font-weight + 300;
        cursor: null;
        background-color: $os-button-color;
        border: 0px;
        border-radius: $v-border-radius;
        gradient: null;
        bevel: $v-bevel;
        shadow: $v-shadow;
        states: (normal disabled);
        margin-left: floor($v-unit-size/5);
        
    &.v-pressed {
        background-color: get_color_mix($v-focus-color, #fff, 70) !important;
        border-color: get_color_mix($v-focus-color, #fff, 70) !important;
        }
    &:after {
        transition: none;
        }
    &:hover, &:focus, &:active {
        background-color: $os-odd-highlight;
        border-color: $os-odd-highlight;
        color: valo-font-color($os-odd-highlight);
        }
    &:focus:after {
        border-color: transparent;
        transition: none;
        }
    }   
    
    input::selection {
/*     text-shadow:  0px  0px 0px $os-textfield-shade; */
/*         color: black; */
/*         background: $v-focus-color; */
       }
       
    /* checkbox-global */
    :root & .v-checkbox {
    @include os-checkbox();
    padding-top: inherit;
    > input ~ label:before, > input~ label:after {
        margin-top: inherit;
        }
    > input ~ label:before {
        margin-top: inherit;
        }       
    }

    /* borders for views: */ 
    @if $os-bordered==true {
        .v-verticallayout-part {
            border: $v-border;
/*          padding: 10px; */
        }
    }


/*  several padding adjustments */
/*  .l-yview-provider>.l-control > * > .l-control { */
/*      padding: 10px; */
/*      } */
    

    .v-slot-os-work-area {
/*      padding: 20px; */
        }
    
    h1 {
        @include os-typeface-h1;
    }
    
    
    /* popup with full content */
    &.v-overlay-container >.v-window {
        height: auto !important;
        width: auto !important;
        /// popup/overlay container expands/shrinks with content
        .v-widget {
            position: relative !important;
            }
        .v-table-body-wrapper {
           width: auto;
           height: auto;
           }
        .popupContent {
            @include os-popup-perspective;
            }   
        }
    &.v-overlay-container > div[style*="left: 0px; top: 0px;"][style*="width: 100%; height: 100%"].v-window.v-has-width.v-has-height {
        height: 100% !important;
        width: 100% !important;
        }
    &.v-overlay-container .v-window-modalitycurtain {
        opacity: 0;
        }

    // panel default style without borders
    .v-panel {
        border-width: 0px;
        }
    
    // colors/styles
    .v-button, .v-nativebutton {
        @include os-button;
        }
    
    .os-data-component >.v-button {
        @include os-button-data; 
        }
        
    .v-textfield {
        @include os-textfield;
        }
    .v-textarea {
        @include os-textfield;
        }
    .v-filterselect {
        @include os-textfield;
        }
    .os-view > .v-expand > .v-slot:nth-child(1) {
        display: none;
        }
    .os-view-header-h2, .v-label-h2 {
        @include os-typeface-view-h2;
        //font-weight: 800;
        }
      
    .os-org-container {
        background: transparent !important;
        }   
    /*// border of site-encapsulating container
    .v-ui > .v-panel {
        border-width: 0px;  
        }
    */      
        
    .os-data-area {
/*      padding: $os-layout-margin; */
    }
    
    /* WORKAROUNDS */
    .os-multi-area .os-data-area {  //Landkarten Scrollbalken
        overflow: inherit !important;
        }
        
    input.gwt-FileUpload {
        z-index:-1 !important;
        }       
    .v-customcomponent .v-button {
        @include os-button-no-margin;
        }


    .os-mparttoolbararea, .os-embedded-toolbar {
        width: 100%;        
        min-height: $v-unit-size; //$os-button-height;
        border-bottom: $v-border;
        background: $os-light-contrast; 
        color: valo-font-color($os-sub-header-bg);
                
        .v-button {
            @include os-button-toolbar;
            @include box-shadow(none); /*valo-defined mixin*/
            }
            
            
        .v-button.v-spliter {   /* splitter typo is actually correct! */
            background: inherit;
            width: 0;
            padding: 0;
/*             border-right: $v-border; */
        }
        span.v-button-caption {
            vertical-align: middle;     
            }
        .v-slot-v-spliter {
            width: $v-layout-spacing-horizontal *2;
            }
        .os-toolbar-state-container {
           min-height: $v-vunit-size;
           .v-caption-os-toolbar-state {
               line-height: $v-vunit-size;
               margin: 0px $v-layout-spacing-horizontal/2 0px $v-layout-spacing-horizontal/2;
               padding-bottom: 0px;
               }
           .v-image.os-toolbar-state {
               display: none;
               }
            }
        }
    

    /* SPLITPANEL */ 
    .v-splitpanel-vertical {
        @include valo-splitpanel-style (
            $primary-stylename: v-splitpanel, 
            $splitter-size: $os-splitter-size, 
            $splitter-active-size: $os-splitter-size,
            $splitter-handle-visible: true, 
            $orientation: vertical );
        
        > div {
            height: $os-splitter-size;
            > .v-splitpanel-vsplitter {
                div:before {
                    border: transparent;
                    background-color: $os-splitter-shade;
                    @if $os-bordered == false {
                        background-image: none;
                        }   
                    }
                div:after {
                    border-color: get_contrast($os-fn-medium, $os-splitter-shade, $os-fn-desaturate);
                    }
                }
            }
        }
    .v-splitpanel-horizontal {
        @include valo-splitpanel-style (
            $primary-stylename: v-splitpanel, 
            $splitter-size: $os-splitter-size, 
            $splitter-active-size: $os-splitter-size,
            $splitter-handle-visible: true, 
            $orientation: horizontal ); 
        > div {
            width: $os-splitter-size;
            > .v-splitpanel-hsplitter {
                div:before {
                    border: transparent;
                    background-color: $os-splitter-shade;
                    @if $os-bordered == false {
                        background-image: none;
                        }   
                    }
                div:after {
                    border-color: get_contrast($os-fn-medium, $os-splitter-shade, $os-fn-desaturate);
                    }
                }
            }           
        }
    
    /* PROGRESS */
    .os-important .v-progressbar-indicator {
        background: $v-error-indicator-color none;
        }
    .v-loading-indicator {
        opacity: 0;
        }
    
    
    /* SPINNER */
    .v-app-loading:before {
        left: auto;
        width: 100%;
        height: 32px;
        padding: 0px;
        margin-top: 0px;
        margin-left: 0px;
        background: transparent $os-loading-animation no-repeat 50%;
        border-radius: $v-border-radius;
        }
    
     
    }