/**
 *
 * @group panel
 */
$v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $saturation: -5%) !default;

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

/**
 *
 *
 * @param {string} $primary-stylename (v-panel) -
 * @param {bool} $include-additional-styles -
 *
 * @group panel
 */
@mixin valo-panel ($primary-stylename: v-panel, $include-additional-styles: contains($v-included-additional-styles, panel)) {

  .#{$primary-stylename} {
    @include valo-panel-style;
    overflow: visible !important;
  }

  .#{$primary-stylename}-caption {
    @include valo-panel-caption-style;
    border-radius: $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0;
  }

  .#{$primary-stylename}-content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    @include valo-panel-adjust-content-margins;
  }


  @if $include-additional-styles {
    .#{$primary-stylename}-borderless {
      @include valo-panel-borderless-style;
    }

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

    .#{$primary-stylename}-scroll-divider {
      @include valo-panel-scroll-divider-style;
    }

    .#{$primary-stylename}-caption.v-horizontallayout {
      height: auto !important;
      line-height: 0;

      .v-slot {
        vertical-align: middle;
      }

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

}



/**
 *
 *
 * @param {string} $primary-stylename (v-panel) -
 * @param {color} $background-color ($v-panel-background-color) -
 * @param {list} $shadow ($v-shadow) -
 * @param {list} $border ($v-panel-border) -
 * @param {string} $border-radius ($v-border-radius) -
 *
 * @group panel
 */
@mixin valo-panel-style ($primary-stylename: v-panel, $background-color : $v-panel-background-color, $shadow : $v-shadow,  $border : $v-panel-border, $border-radius    : $v-border-radius  ) {
  background: $background-color;
  color: valo-font-color($background-color);
  border-radius: $border-radius;
  border: valo-border($border: $border, $color: darkest-color($background-color, $v-app-background-color), $strength: 0.7);
  @include box-shadow(valo-bevel-and-shadow($shadow: $shadow));
}



/**
 *
 *
 * @param {color} $background-color ($v-background-color) -
 * @param {list} $bevel ($v-bevel) -
 * @param {list} $gradient (valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4) -
 * @param {list} $border ($v-panel-border) -
 *
 * @group panel
 */
@mixin valo-panel-caption-style ( $background-color : $v-background-color,  $bevel  : $v-bevel, $gradient : valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4, $border   : $v-panel-border ) {
  box-sizing: border-box;
  padding: 0 round($v-unit-size/3);
  line-height: $v-unit-size - first-number($v-border);
  $bg: $background-color;

  $shadow: null;
  @if color-luminance($background-color) < color-luminance($v-background-color) - 10 {
    $border-style: valo-border($border: $border, $color: $bg, $strength: 0.7);
    $shadow: 0 0 0 first-number($border-style) first-color($border-style);
    border-bottom: none;
    margin-bottom: first-number($border-style);
  } @else {
    border-bottom: valo-border($border: $border, $color: $v-background-color, $strength: 0.7);
  }
  @include valo-gradient($color: $bg, $gradient: $gradient);
  color: valo-font-color($bg);
  font-weight: $v-caption-font-weight;
  font-size: $v-caption-font-size;
  @include box-shadow(valo-bevel-and-shadow($background-color: $bg, $bevel: $bevel, $shadow: $shadow, $gradient: $gradient));
  text-shadow: valo-text-shadow(valo-font-color($bg), $bg);
}



/**
 *
 *
 * @param {list} $shadow (false) -
 *
 * @group panel
 */
@mixin valo-panel-well-style ($shadow: false) {
  @if $shadow == false {
    $new-shadow: ();
    @if list-of-lists($v-shadow) {
      @each $part in $v-shadow {
        $new-part: join(inset, $part);
        $new-shadow: $new-shadow, $new-part;
      }
    } @else {
      $new-shadow: join(inset, $v-shadow);
    }
    $shadow: 0 1px 0 0 v-tint, $new-shadow;
  }
  $bg: scale-color(adjust-color($v-background-color, $lightness: -2%), $saturation: -1.5%);
  background: $bg;
  color: valo-font-color($bg);
  @include box-shadow(valo-bevel-and-shadow($shadow: $shadow));
  border-radius: $v-border-radius;
  border: valo-border();

  > div > [class*="-caption"] {
    background: transparent;
    @include box-shadow(none);
  }
}



/**
 *
 *
 *
 * @group panel
 */
@mixin valo-panel-borderless-style {
  background: transparent;
  color: inherit;
  border: none;
  border-radius: 0;
  @include box-shadow(none);

  > div > [class*="-caption"] {
    background: transparent;
    @include box-shadow(none);
    color: inherit;
    padding: 0;
    margin: 0 round($v-unit-size/3);
    border-bottom: none;
  }
}



/**
 *
 *
 * @param {size} $border-width (max(1px, first-number($v-panel-border))) -
 *
 * @group panel
 */
@mixin valo-panel-scroll-divider-style ($border-width: max(1px, first-number($v-panel-border))) {
  > [class*="-captionwrap"] {
    position: relative;
    z-index: 2;

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

  > [class*="-content"] {
    &:before {
      content: "";
      position: absolute;
      z-index: 2;
      top: 0;
      height: 0;
      border-top: $border-width solid $v-app-background-color;
      left: 0;
      right: 0;
    }
  }
}



/**
 *
 *
 *
 * @group panel
 */
@mixin valo-panel-adjust-content-margins {
  > .v-margin-top {
    padding-top: round($v-unit-size/3);
  }

  > .v-margin-right {
    padding-right: round($v-unit-size/3);
  }

  > .v-margin-bottom {
    padding-bottom: round($v-unit-size/3);
  }

  > .v-margin-left {
    padding-left: round($v-unit-size/3);
  }
}