$v-overlay-border-radius: $v-border-radius !default;
$v-overlay-border-width: $v-border-width !default;
$v-overlay-open-animation: v-valo-overlay-open 200ms !default;

$v-overlay-padding: round($v-unit-size/9) !default;
$v-overlay-padding-vertical: $v-overlay-padding !default;
$v-overlay-padding-horizontal: $v-overlay-padding !default;

$v-overlay-shadow-style: 0 2px 4px 0 v-shade, 0 3px 5px 0 v-shade !default;

$v-selection-overlay-padding: $v-overlay-padding !default;
$v-selection-overlay-padding-vertical: $v-selection-overlay-padding !default;
$v-selection-overlay-padding-horizontal: $v-selection-overlay-padding !default;

$v-selection-item-border-radius: $v-border-radius - 1px !default;
$v-selection-item-height: ceil($v-unit-size/1.4) !default;
$v-selection-item-padding-horizontal: ceil($v-unit-size/4) !default;
$v-selection-item-font-weight: max(400, $v-font-weight);


@function v-valo-overlay-background-color ($context: $v-app-background-color) {
  @if is-dark-color($context) {
    @return darken($context, 2%);
  }
  @return lighten($context, 2%);
}






@mixin v-valo-ie8-shadow($shadow, $element: top) {
  .#{$element} {
    $shadow-offset-x: nth($shadow, 1);
    $shadow-offset-y: nth($shadow, 2);
    $shadow-blur: nth($shadow, 3);
    $shadow-color: last($shadow);
    $shadow-color-opacity: opacity($shadow-color);
    $shadow-color: opacify($shadow-color, 1);

    position: absolute;
    top: $shadow-offset-y - $shadow-blur;
    right: -$shadow-offset-x + $shadow-blur;
    bottom: -$shadow-offset-y + $shadow-blur;
    left: $shadow-offset-x - $shadow-blur;
    background: $shadow-color;
    filter: progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=true, ShadowOpacity=#{$shadow-color-opacity});
  }
}





// Not needed in modern browsers
.v-shadow,
.v-shadow-window {
  display: none;

  // In IE8 windows get the same shadow as other overlays
  .v-ie8 & {
    display: block;

    // Border simulation
    .center {
      position: absolute;
      top: -$v-overlay-border-width;
      right: -$v-overlay-border-width;
      bottom: -$v-overlay-border-width;
      left: -$v-overlay-border-width;
      background: darken(v-valo-overlay-background-color(), $v-bevel-depth);
      filter: alpha(opacity=round($v-bevel-depth/1%));
    }

    // Up to 8 shadows are supported
    $elements: top, top-left, top-right, left, right, bottom, bottom-left, bottom-right;
    $shadows: v-valo-shadow($shadow-style: $v-overlay-shadow-style);

    @if type-of(last($shadows)) == color {
      @include v-valo-ie8-shadow($shadows);
    } @else {
      @for $i from 1 through min(length($elements), length($shadows)) {
        $shadow: nth($shadows, $i);
        @if length($shadow) == 2 {
          $shadow: last($shadow); // Workaround for a weird issue when sometimes a shadow is appended to a null list
        }
        @if length($shadow) > 3 {
          @include v-valo-ie8-shadow($shadow: $shadow, $element: nth($elements, $i));
        }
      }
    }
  }
}






@function v-valo-overlay-box-shadow ($bg: null) {
  $bg: $bg or v-valo-overlay-background-color();
  @return v-valo-shadow($shadow-style: (0 0 0 $v-overlay-border-width rgba(darken($bg, $v-bevel-depth), $v-bevel-depth/100%), $v-overlay-shadow-style));
}



@mixin v-valo-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) {
  padding: $v-overlay-padding-vertical $v-overlay-padding-horizontal;
  border-radius: $v-overlay-border-radius;
  
  $bg: $background-color or v-valo-overlay-background-color();
  background: $bg;
  color: v-valo-font-color($bg);

  box-shadow:  v-valo-overlay-box-shadow($bg);

  @if $v-animations-enabled and $v-overlay-open-animation {
    @include animation($open-animation);
  }
    
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}



@if $v-animations-enabled {
  @include keyframes(v-valo-overlay-open) {
    0% {
      @include transform(translatey(-3px));
      opacity: 0;
    }
  }
}






@mixin v-valo-selection-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) {
  @include v-valo-overlay-style($background-color: $background-color, $open-animation: $open-animation);
  padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal;
}




@mixin v-valo-selection-item-style {
  cursor: pointer;
  line-height: $v-selection-item-height;
  padding: 0 $v-selection-item-padding-horizontal*2 0 $v-selection-item-padding-horizontal;
  @if $v-selection-item-border-radius > 0 {
    border-radius: $v-selection-item-border-radius;
  }
  font-weight: $v-selection-item-font-weight;
  white-space: nowrap;

  position: relative;
  &:active:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: scale-color(v-valo-selection-color(), $lightness: -30%, $saturation: 50%);
    @include opacity(.15);
    pointer-events: none;
    border-radius: inherit;
  }

  .v-icon {
    max-height: $v-selection-item-height;
    margin-right: round($v-selection-item-padding-horizontal/2);
    min-width: 1em;
  }
}




@mixin v-valo-selection-item-selected-style ($parent-background-color: null) {
  $selection-color: v-valo-selection-color($parent-background-color);
  @include v-valo-gradient($selection-color);
  color: v-valo-font-color($selection-color, 0.9);
}








@mixin v-valo-drag-element {
  .v-drag-element {
    @include v-valo-drag-element-style;
  }
}

@mixin v-valo-drag-element-style {
  background: #fff;
  box-shadow: 0 2px 10px rgba(#000, .2);
  border-radius: $v-border-radius;
  overflow: hidden;
  @include opacity(.5);

  // This has the unfortunate side-effect of selecting an the table row where the drag is dropped
  //pointer-events: none;
}