$v-window-border-radius: null !default;
$v-window-shadow-style: 0 4px 12px 6px rgba(0,0,0, $v-shadow-depth/100%), $v-overlay-shadow-style !default;
$v-window-open-animation: null !default;
$v-window-animations-enabled: $v-animations-enabled !default;


@if $v-window-animations-enabled {
  @include keyframes(valo-modal-window-indication) {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
}


@mixin valo-window ($primary-stylename: v-window) {

  .#{$primary-stylename} {
    @include valo-overlay-style;

    @if $v-window-animations-enabled and $v-window-open-animation {
      @include animation($v-window-open-animation);
    }

    @if $v-window-shadow-style {
      @if $v-window-shadow-style == none {
        box-shadow: none;
      } @else {
        box-shadow: valo-shadow($shadow-style: $v-window-shadow-style);
      }
    }
    border-radius: $v-window-border-radius;
    padding: 0;
    min-width: 4*$v-unit-size !important;
    min-height: $v-unit-size !important;
    overflow: hidden !important;
    white-space: nowrap;

    @if $v-window-animations-enabled {
      @include transition(width 200ms, height 200ms, top 200ms, left 200ms);
    }
  }

  .#{$primary-stylename}-modalitycurtain {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: $v-app-background-color;
    @include opacity(.3);
  }

  .#{$primary-stylename}-draggingCurtain {
    position: fixed !important;
  }
  
  .#{$primary-stylename}-resizingCurtain + .v-window,
  .#{$primary-stylename}-draggingCurtain + .v-window {
    @include transition(none);
  }

  .#{$primary-stylename}-outerheader {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    //height: $v-unit-size - 1px;
    // Raise above the window content, if that is ever promoted to a layer
    @include transform(translatez(0));

    &:after {
      content: "";
      position: absolute;
      bottom: -1px;
      right: 0;
      left: 0;
      height: 1px;
      $_bg: valo-overlay-background-color();
      background: adjust-color($_bg, $lightness: if(is-dark-color($_bg), 3%, -5%), $saturation: -10%);
    }
  }

  .#{$primary-stylename}-header {
    @include user-select(none);;
    cursor: move;
    line-height: $v-unit-size - 1px;
    padding-left: round($v-unit-size/3);
    margin-right: $v-unit-size * 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: blend-normal(rgba(valo-font-color(valo-overlay-background-color()), .7), valo-overlay-background-color());
  }
  
  .#{$primary-stylename}-closebox,
  .#{$primary-stylename}-maximizebox,
  .#{$primary-stylename}-restorebox {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: $v-unit-size;
    height: $v-unit-size - 1px;
    line-height: $v-unit-size - 3px;
    text-align: center;
    cursor: pointer;
    font-family: FontAwesome;
    font-size: round($v-font-size * 1.3);
    @include opacity(.4);
    @if $v-animations-enabled {
      @include transition(all 140ms);
    }
    
    &:focus {
      outline: none;
    }
    
    &:hover {
      @include opacity(1);
      color: valo-selection-color();
    }
    
    &:active {
      color: inherit;
    }
  }
  
  .#{$primary-stylename}-closebox {
    @include valo-window-close-icon-style;
  }
  
  .#{$primary-stylename}-maximizebox,
  .#{$primary-stylename}-restorebox {
    right: $v-unit-size;
  }

  .#{$primary-stylename}-restorebox-disabled,
  .#{$primary-stylename}-maximizebox-disabled {
    display: none;
  }

  .#{$primary-stylename}-maximizebox {
    @include valo-window-maximize-icon-style;
  }
  
  .#{$primary-stylename}-restorebox {
    @include valo-window-restore-icon-style;
  }
  
  .v-window > .popupContent,
  .#{$primary-stylename}-wrap,
  .#{$primary-stylename}-contents,
  .#{$primary-stylename}-contents > .v-scrollable {
    height: 100%;
  }
  
  .#{$primary-stylename}-contents {
    @include box-sizing(border-box);
    border-radius: $v-border-radius;
    margin-top: 0 !important;

    > .v-scrollable {
      @include valo-panel-adjust-content-margins;

      > .v-formlayout {
        @include valo-formlayout-margins($all: round($v-unit-size/3));
      }

      position: relative;

      &:focus {
        outline: none;
      }

      &:before {
        content: "";
        position: absolute;
        z-index: 2;
        top: 0;
        height: 1px;
        background: valo-overlay-background-color();
        left: 0;
        right: 0;
      }
    }
  }

  .#{$primary-stylename}-footer {
    height: 0;
  }

  .#{$primary-stylename}-resizebox {
    position: absolute;
    z-index: 1000;
    right: 0;
    bottom: 0;
    width: round($v-unit-size/2);
    height: round($v-unit-size/2);
    cursor: nwse-resize;

    .v-ie8 & {
      background: #000;
      filter: alpha(opacity=0.1);
    }

    .v-ie8 &,
    .v-ie9 & {
      cursor: se-resize;
    }
  }

  .#{$primary-stylename}-resizebox-disabled {
    display: none;
  }


  // Flash modal window when clicking on the curtain
  .#{$primary-stylename}-modalitycurtain:active {
    ~ .v-window {
      @include animation(none);
    }
  }




  .#{$primary-stylename}-bottom-toolbar {
    padding: round($v-unit-size/5) round($v-unit-size/3);
    background: $v-app-background-color;

    .v-expand {
      overflow: visible;
    }

    .v-label {
      line-height: $v-unit-size - 1px;
    }

    .v-spacing {
      width: round($v-layout-spacing-horizontal/2);
    }
  }

  .v-margin-left.v-margin-right.v-margin-bottom {
    .#{$primary-stylename}-bottom-toolbar {
      margin: 0 round($v-unit-size/-3) round($v-unit-size/-3);
      @include box-sizing(content-box);
    }
  }

}


@mixin valo-window-close-icon-style {
  &:before {
    // times cross
    content: "\00d7";
  }
}

@mixin valo-window-maximize-icon-style {
  &:before {
    content: "+";
  }
}

@mixin valo-window-restore-icon-style {
  &:before {
    // en-dash
    content: "\2013";
  }
}