/**
 * @group window
 */
$v-window-background-color: $v-panel-background-color !default;

/**
 * @group window
 */
$v-window-border-radius: $v-border-radius !default;

/**
 * @group window
 */
$v-window-shadow: 0 2px 10px (v-shade 2), 0 16px 80px -6px (v-shade 3), last($v-overlay-shadow) !default;

/**
 * @group window
 */
$v-window-animate-in: valo-animate-in-fade 140ms !default;

/**
 * @group window
 */
$v-window-animate-out: valo-animate-out-scale-down-fade 100ms !default;

/**
 * @group window
 */
$v-window-modality-curtain-background-color: #222 !default;


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

  @include keyframes(valo-animate-out-scale-down-fade) {
    100% {
      @include transform(scale(0.8));
      opacity: 0;
    }
  }
}


/**
 *
 *
 * @param {string} $primary-stylename (v-window) -
 *
 * @group window
 */
@mixin valo-window ($primary-stylename: v-window) {

  .#{$primary-stylename} {
    @include valo-overlay-style($background-color: $v-window-background-color, $animate-in: $v-window-animate-in, $animate-out: $v-window-animate-out);

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

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

      &.#{$primary-stylename}-animate-in {
        @include transition(none);
      }
    }
  }

  .#{$primary-stylename}-modalitycurtain {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    @include radial-gradient(circle at 50% 50%, $v-window-modality-curtain-background-color, darken($v-window-modality-curtain-background-color, valo-gradient-opacity()), $fallback: $v-window-modality-curtain-background-color);
    @include opacity(max(0.2, 0.8 - valo-gradient-opacity()/100%));
    @if $v-animations-enabled {
        @include valo-animate-in-fade($duration: 400ms, $delay: 100ms);
        .v-op12 & {
          // Opera 12 has a shitbreak with the fade-in (flickers)
          @include animation(none);
        }
    }
  }

  .#{$primary-stylename}-draggingCurtain {
    position: fixed !important;
  }

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

  $scroll-divider-width: max(1px, first-number($v-border));

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

    &:after {
      content: "";
      position: absolute;
      bottom: -$scroll-divider-width;
      right: 0;
      left: 0;
      height: 0;
      $_bg: $v-window-background-color;
      border-top: $scroll-divider-width solid first-color(valo-border($strength: 0.5));
      $border-color: first-color(valo-border($strength: 1));
      border-color: rgba($border-color, .5);
    }
  }

  .#{$primary-stylename}-header {
    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($v-window-background-color), .7), $v-window-background-color);
  }

  //Adjust header margin according to visible buttons on header
  .#{$primary-stylename}-restorebox-disabled,
  .#{$primary-stylename}-maximizebox-disabled {
    ~ .#{$primary-stylename}-closebox ~ .#{$primary-stylename}-header {
      margin-right: $v-unit-size;
    }
    ~ .#{$primary-stylename}-closebox-disabled ~ .#{$primary-stylename}-header {
      margin-right: round($v-unit-size/3);
    }
  }

  .#{$primary-stylename}-closebox,
  .#{$primary-stylename}-maximizebox,
  .#{$primary-stylename}-restorebox {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    box-sizing: border-box;
    width: $v-unit-size - round($v-unit-size/9);
    height: $v-unit-size - 1px;
    background-color: $v-window-background-color;
    line-height: $v-unit-size - 3px;
    text-align: center;
    cursor: pointer;
    font-size: round($v-font-size * 1.3);
    color: valo-font-color($v-window-background-color, .4);

    @if $v-animations-enabled {
      @include transition(color 140ms);
    }

    &:focus {
      outline: none;
    }

    &:hover {
      @include opacity(1);
      color: $v-selection-color;
    }

    &:active {
      color: inherit;
    }
  }
  
  .#{$primary-stylename}-closebox:focus::after {
    content: "";
    position: absolute;
    top: round($v-unit-size/6);
    right: round($v-unit-size/6);
    bottom: round($v-unit-size/6);
    left: round($v-unit-size/18);
    border-radius: $v-window-border-radius;
    
    @include valo-focus-style;
  }
  
  .#{$primary-stylename}-maximizebox:focus::after,
  .#{$primary-stylename}-restorebox:focus::after {
    content: "";
    position: absolute;
    top: round($v-unit-size/6);
    right: round($v-unit-size/18);
    bottom: round($v-unit-size/6);
    left: round($v-unit-size/6);
    border-radius: $v-window-border-radius;
    
    @include valo-focus-style;
  }

  .#{$primary-stylename}-closebox {
    padding-right: round($v-unit-size/9);
    @include valo-window-close-icon-style;

    @if $v-window-border-radius > 0 {
      border-radius: 0 $v-window-border-radius 0 $v-window-border-radius;
    }
  }

  .#{$primary-stylename}-maximizebox,
  .#{$primary-stylename}-restorebox {
    right: $v-unit-size - round($v-unit-size/9);
    padding-left: round($v-unit-size/9);

    @if $v-window-border-radius > 0 {
      border-radius: 0 0 0 $v-window-border-radius;

      + .#{$primary-stylename}-closebox {
        border-bottom-left-radius: 0;
      }
    }
  }

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

    + .#{$primary-stylename}-closebox {
      width: $v-unit-size;
      padding-right: 0;
      border-bottom-left-radius: $v-window-border-radius;
      
      &:focus::after {
        left: round($v-unit-size/6);
      }
    }
  }

  .#{$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 {
    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-margin(round($v-unit-size/3));
      }

      position: relative;

      &:focus {
        outline: none;
      }

      &:before {
        content: "";
        position: absolute;
        z-index: 2;
        top: 0;
        height: 0;
        border-top: $scroll-divider-width solid $v-window-background-color;
        left: 0;
        right: 0;
      }

      .v-panel-captionwrap:after {
        border-color: first-color(valo-border($strength: 0.5));
      }

      .v-panel-content:before {
        border-color: $v-window-background-color;
      }
    }
  }

  .#{$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;
  }


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


  .#{$primary-stylename}-top-toolbar,
  .#{$primary-stylename}-bottom-toolbar {
    > .v-widget {
      vertical-align: top;
    }

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

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

  .#{$primary-stylename}-top-toolbar {
    &.v-layout {
      padding: round($v-unit-size/5) round($v-unit-size/3);
      position: relative;
      z-index: 2;
      border-top: valo-border($strength: 0.5);
      border-bottom: valo-border($strength: 0.5);
      background-color: $v-background-color;
    }

    &.v-menubar {
      margin: round($v-unit-size/3) round($v-unit-size/3) round($v-unit-size/6);
    }

    &.v-menubar-borderless {
      padding-left: round($v-unit-size/6);
      padding-right: round($v-unit-size/6);
      margin: round($v-unit-size/6) - first-number($v-border) 0;
    }
  }

  .#{$primary-stylename}-bottom-toolbar.v-layout {
    padding: round($v-unit-size/5) round($v-unit-size/3);
    @include linear-gradient(to bottom, darken($v-background-color, valo-gradient-opacity($v-gradient)/2) 0, $v-background-color round($v-unit-size/10), $fallback: $v-background-color);
    border-top: valo-border($strength: 0.5);
    border-radius: 0 0 $v-border-radius $v-border-radius;
  }

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

      &.v-menubar {
        margin: 0;
      }

      &.v-menubar-borderless {
        margin: round($v-unit-size/6) - round($v-unit-size/3) round($v-unit-size/6) - round($v-unit-size/3) 0;
        padding: 0;
      }
    }
  }

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

}


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

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

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