$v-table-row-height: $v-unit-size !default;
$v-table-border-width: first-number($v-border) !default;
$v-table-border-color: null !default;
$v-table-border-radius: 0 !default;
$v-table-cell-padding-horizontal: round($v-unit-size/3) !default;
//$v-table-cell-padding-horizontal-edge: round($v-unit-size/2.5) !default;
$v-table-resizer-width: round($v-unit-size/5) !default;
$v-table-sort-indicator-width: round($v-unit-size/2) !default;
$v-table-header-font-size: round($v-font-size * 0.86) !default;
$v-table-background-color: null !default;



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

  .#{$primary-stylename}-header table,
  .#{$primary-stylename}-footer table,
  .#{$primary-stylename}-table {
    border-spacing: 0;
    border-collapse: separate;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: $v-line-height;
  }

  .#{$primary-stylename}-resizer,
  .#{$primary-stylename}-sort-indicator {
    float: right;
  }

  .#{$primary-stylename}-caption-container-align-center {
    text-align: center;
  }

  .#{$primary-stylename}-caption-container-align-right {
    text-align: right;
  }

  .#{$primary-stylename}-header td,
  .#{$primary-stylename}-footer td,
  .#{$primary-stylename}-cell-content {
    padding: 0;
  }

  .#{$primary-stylename}-sort-indicator {
    width: 0;
  }

}




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


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

  $background-color: $v-table-background-color or valo-table-background-color();
  $border-color: $v-table-border-color or first-color(valo-border($color: $background-color, $strength: 0.8));

  .#{$primary-stylename} {
    // For scroll position indicator
    position: relative;
    background: $v-background-color;
    color: valo-font-color($v-background-color);
  }

  .v-table-header table,
  .v-table-footer table,
  .v-table-table {
    @include box-shadow(0 0 0 $v-table-border-width $border-color);

    .v-ie8 & {
      outline: $v-table-border-width solid $border-color;
    }
  }

  .#{$primary-stylename}-header-wrap,
  .#{$primary-stylename}-footer-wrap,
  .#{$primary-stylename}-header-drag {
    border: $v-table-border-width solid $border-color;
    @include valo-gradient($v-background-color);
    white-space: nowrap;
    font-size: $v-table-header-font-size;
    text-shadow: valo-text-shadow();
  }

  .#{$primary-stylename}-header-wrap {
    position: relative;
    border-bottom: none;
    @if $v-table-border-radius > 0 {
      border-radius: $v-table-border-radius $v-table-border-radius 0 0;
    }
  }

  .#{$primary-stylename}-footer-wrap {
    border-top: none;
    @if $v-table-border-radius > 0 {
      border-radius: 0 0 $v-table-border-radius $v-table-border-radius;
    }
  }

  .#{$primary-stylename}-footer td {
    border-left: $v-table-border-width solid $border-color;
    // Hack to overcome fixed "magic number" in VScrollTable.FooterCell (assumes 1px border)
    @if $v-table-border-width != 1px {
      display: inline-block;
      margin-left: ($v-table-border-width - 1px) * -1;

      &:first-child {
        margin-left: 0;
      }
    }
  }

  .#{$primary-stylename}-footer-container,
  .#{$primary-stylename}-caption-container {
    overflow: hidden;
    line-height: 1;
    @include box-sizing(border-box);
  }

  .#{$primary-stylename}-footer-container {
    $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2);
    padding: $vertical-padding - $v-table-border-width $v-table-cell-padding-horizontal $vertical-padding;
    float: right;
  }

  [class^="#{$primary-stylename}-header-cell"] {
    position: relative;
  }

  .#{$primary-stylename}-caption-container,
  .#{$primary-stylename}-header-drag {
    $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2);
    padding: $vertical-padding $v-table-cell-padding-horizontal $vertical-padding - $v-table-border-width;
    border-left: $v-table-border-width solid $border-color;
  }

  .#{$primary-stylename}-caption-container-align-right {
    padding-right: $v-table-cell-padding-horizontal - $v-table-resizer-width;
  }

  .#{$primary-stylename}-resizer {
    height: $v-table-row-height;
    width: $v-table-resizer-width;
    cursor: e-resize;
    cursor: col-resize;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
  }

  .#{$primary-stylename}-cell-content {
    border-left: $v-table-border-width solid $border-color;
    overflow: hidden;

    &:first-child {
      border-left: none;
      padding-left: $v-table-border-width;
    }
  }

  .#{$primary-stylename}-header td:first-child .#{$primary-stylename}-caption-container,
  .#{$primary-stylename}-footer td:first-child {
    border-left-color: transparent;
  }


  .#{$primary-stylename}-cell-wrapper {
    line-height: 1;
    $vertical-padding: round(($v-table-row-height - $v-font-size)/2);
    padding: $vertical-padding $v-table-cell-padding-horizontal;
    @include box-sizing(border-box);
    margin-right: 0 !important;
  }

  .#{$primary-stylename}-body {
    border: $v-table-border-width solid $border-color;
  }

  .#{$primary-stylename}-table {
    background-color: $background-color;
    white-space: nowrap;
  }

  .#{$primary-stylename}-table td {
    border-top: $v-table-border-width solid $border-color;
  }

  .#{$primary-stylename}-table tr:first-child td {
    border-top: none;
  }

  .#{$primary-stylename}-row {
    background-color: $background-color;
  }

  .#{$primary-stylename}-row-odd {
    $bg-lightness: if(color-luminance($background-color) < 10, 4%, -4%);
    background-color: scale-color($background-color, $lightness: $bg-lightness);
  }

  .#{$primary-stylename} [class*="-row"].v-selected {
    $selected-border-color: adjust-color($v-selection-color, $lightness: -8%, $saturation: -8%);

    @include valo-gradient($v-selection-color);
    background-origin: border-box;
    color: valo-font-color($v-selection-color, 0.9);
    text-shadow: valo-button-text-shadow($v-selection-color, $v-bevel-depth);

    + .v-selected {
      $gradient-end: first(last(valo-gradient-color-stops($v-selection-color)));
      background: $gradient-end;

      td {
        border-top-color: $gradient-end;
      }
    }

    .#{$primary-stylename}-cell-content {
      border-color: transparent;
      border-left-color: $selected-border-color;

      &:first-child {
        border-left-color: transparent;
      }
    }
  }

  .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator,
  .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator {
    background: transparent;
    width: $v-table-sort-indicator-width;
    height: $v-table-row-height;
    line-height: $v-table-row-height;
    position: absolute;
    right: 0;
  }

  .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator:before,
  .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator:before {
    font-style: normal;
    font-weight: normal;
    display: inline-block;
  }

  .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator:before {
    @include valo-table-sort-asc-icon-style;
  }

  .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator:before {
    @include valo-table-sort-desc-icon-style;
  }


  [class*="rowheader"] span.v-icon {
    min-width: 1em;
  }


  .#{$primary-stylename}-focus {
    $outline-width: max($v-table-border-width, 1px);
    outline: $outline-width solid $v-focus-color;
    outline-offset: -$outline-width;
  }

  .v-drag-element.#{$primary-stylename}-focus,
  .v-drag-element .#{$primary-stylename}-focus {
    outline: none;
  }

  .#{$primary-stylename}-header-drag {
    position: absolute;
    @include opacity(0.9);
    margin-top: round($v-table-row-height/-2);
    z-index: 30000;
    line-height: 1;
  }

  .#{$primary-stylename}-focus-slot-right {
    border-right: 2px solid rgba($v-focus-color, .5);
  }

  .#{$primary-stylename}-focus-slot-left {
    border-left: 2px solid rgba($v-focus-color, .5);
    left: 0;
    right: auto;
    margin-left: 0 !important;
  }

  .#{$primary-stylename}-column-selector {
    @include valo-button-style;
    position: absolute;
    z-index: 2;
    top: round($v-unit-size/-4);
    right: round($v-unit-size/-4);
    height: round($v-unit-size/2);
    line-height: round($v-unit-size/2);
    width: round($v-unit-size/2);
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;

    @include opacity(0);
    @if $v-animations-enabled {
      @include transition(opacity 200ms 1s);
    }

    &:after {
      content: "";
      position: absolute;
      $v-button-border-width: first-number($v-border);
      top: -$v-button-border-width;
      right: -$v-button-border-width;
      bottom: -$v-button-border-width;
      left: -$v-button-border-width;
      border-radius: inherit;
    }
    &:active:after {
      @include valo-button-active-style;
    }
    &:before {
      @include valo-table-column-selector-icon-style;
    }
  }

  .v-scrollable > .#{$primary-stylename} .#{$primary-stylename}-column-selector {
    right: 0;
    top: 0;
    border-top: none;
    border-right: none;
    border-radius: 0 0 0 50%;

    &:after {
      top: 0;
      right: 0;
    }
  }

  .#{$primary-stylename}-header-wrap:hover .#{$primary-stylename}-column-selector {
    @include opacity(1);
    @include transition-delay(100ms);
  }

  .v-on,
  .v-off {
    &:before {
      @include valo-table-column-visible-icon-style;
      font-size: 0.9em;
      margin-right: round($v-unit-size/6);
    }
    div {
      display: inline;
    }
  }
  .v-off:before {
    visibility: hidden;
  }


  tbody.v-drag-element {
    display: block;
    overflow: visible;
    @include box-shadow(none);
    background: transparent;
    @include opacity(1);

    tr {
      display: block;
      @include valo-drag-element-style($background-color: null);
      background: $background-color;

      &[style*="hidden"] {

      }
    }
  }


  .#{$primary-stylename}-body {
    // Show on top of scroll position indicator (allow scroll events to hit the body instead of indicator)
    position: relative;
    z-index: 1;
  }

  .#{$primary-stylename}-scrollposition {
    position: absolute;
    top: 50%;
    width: 100%;
    height: $v-unit-size;
    line-height: $v-unit-size;
    margin: round($v-unit-size/-2) 0 0 !important;
    text-align: center;
  }





  // Drag'n'drop styles

  .#{$primary-stylename}-drag .#{$primary-stylename}-body {
    @include box-shadow(0 0 0 2px rgba($v-focus-color, .5));

    @if color-luminance($v-focus-color) + 50 < color-luminance($background-color) {
      border-color: $v-focus-color;
    }

    .v-ie8 & {
      border-color: $v-focus-color;
    }

    .#{$primary-stylename}-focus {
      outline: none;
    }
  }

  .#{$primary-stylename}-row-drag-middle td:first-child:before {
    content: "";
    display: block;
    position: absolute;
    height: $v-table-row-height + $v-table-border-width;
    left: 0;
    right: 0;
    background: $v-focus-color;
    @include opacity(.2);
  }

  .#{$primary-stylename}-row-drag-top td:first-child:before,
  .#{$primary-stylename}-row-drag-bottom td:first-child:after {
    content: "\2022";
    display: block;
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    background: $v-focus-color;
    font-size: $v-font-size * 2;
    line-height: 2px;
    color: $v-focus-color;
    text-indent: round($v-font-size/-4);
    text-shadow: 0 0 1px $background-color, 0 0 1px $background-color;
  }

  .#{$primary-stylename}-row-drag-top td:first-child:before {
    margin-top: -$v-table-border-width;
  }

  .v-ff & .#{$primary-stylename}-row-drag-top td:first-child:before,
  .v-ff & .#{$primary-stylename}-row-drag-bottom td:first-child:after {
    line-height: 1px;
  }

  .v-ie & .#{$primary-stylename}-row-drag-top td:first-child:before,
  .v-ie & .#{$primary-stylename}-row-drag-bottom td:first-child:after {
    line-height: 0;
  }

}




@mixin valo-table-sort-asc-icon-style {
  content: '\f0dd';
  font-family: FontAwesome;
}

@mixin valo-table-sort-desc-icon-style {
  content: '\f0de';
  font-family: FontAwesome;
}

@mixin valo-table-column-selector-icon-style {
  font-family: FontAwesome;
  content: "\f013";
}

@mixin valo-table-column-visible-icon-style {
  content: "\f00c";
  font-family: FontAwesome;
}




@mixin valo-table-no-stripes-style ($primary-stylename: v-table) {
  .#{$primary-stylename}-row,
  .#{$primary-stylename}-row-odd {
    background: transparent;
  }
}


@mixin valo-table-no-vertical-lines-style ($primary-stylename: v-table) {
  .#{$primary-stylename}-cell-content {
    border-left: none;
    padding-left: $v-table-border-width;
  }

  &.v-treetable {
    .#{$primary-stylename}-cell-content {
      padding-left: $v-table-cell-padding-horizontal + $v-table-border-width;
    }
  }
}


@mixin valo-table-no-horizontal-lines-style ($primary-stylename: v-table) {
  .#{$primary-stylename}-cell-content {
    border-top: none;
    border-bottom: none;
  }
}


@mixin valo-table-no-header-style ($primary-stylename: v-table) {
  .#{$primary-stylename}-header-wrap {
    display: none;
  }
}


@mixin valo-table-borderless-style ($primary-stylename: v-table) {
  .#{$primary-stylename}-header-wrap,
  .#{$primary-stylename}-footer-wrap,
  .#{$primary-stylename}-header-drag,
  .#{$primary-stylename}-body {
    border: none;
  }

  // TODO copy pasted from the main mixin
  $background-color: $v-table-background-color or valo-table-background-color();
  $border-color: $v-table-border-color or first-color(valo-border($color: $background-color, $strength: 0.7));

  .#{$primary-stylename}-header-wrap {
    border-bottom: $v-table-border-width solid $border-color;
  }

  .#{$primary-stylename}-footer-wrap {
    border-top: $v-table-border-width solid $border-color;
  }
}


@mixin valo-table-spacing-style (
    $primary-stylename: v-table,
    $row-height: $v-table-row-height,
    $header-font-size: $v-table-header-font-size,
    $cell-padding-horizontal: $v-table-cell-padding-horizontal
  ) {

  $vertical-padding: round(($row-height - $header-font-size)/2);

  .#{$primary-stylename}-header-wrap,
  .#{$primary-stylename}-footer-wrap,
  .#{$primary-stylename}-header-drag {
    font-size: $header-font-size;
  }

  .#{$primary-stylename}-footer-container {
    padding: $vertical-padding - $v-table-border-width $cell-padding-horizontal + $v-table-border-width $vertical-padding;
  }

  .#{$primary-stylename}-caption-container,
  .#{$primary-stylename}-header-drag {
    padding-top: $vertical-padding;
    padding-bottom: $vertical-padding - $v-table-border-width;
    padding-left: $cell-padding-horizontal;
    padding-right: $cell-padding-horizontal;
  }

  .#{$primary-stylename}-caption-container-align-right {
    padding-right: max(0, $cell-padding-horizontal - $v-table-resizer-width);
  }

  .#{$primary-stylename}-resizer {
    height: $row-height;
  }

  .#{$primary-stylename}-cell-wrapper {
    padding: $vertical-padding $cell-padding-horizontal;
  }

  .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator,
  .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator {
    height: $row-height;
    line-height: $row-height;
  }

  .#{$primary-stylename}-header-drag {
    margin-top: round($row-height/-2);
  }

  .#{$primary-stylename}-row-drag-middle td:first-child:before {
    height: $row-height + $v-table-border-width;
  }

  &.v-treetable {
    .#{$primary-stylename}-cell-wrapper {
      padding-left: 0;
      padding-right: 0;
    }

    .#{$primary-stylename}-cell-content {
      padding-left: $cell-padding-horizontal;
      padding-right: $cell-padding-horizontal;

      &:first-child {
        padding-left: $cell-padding-horizontal + $v-table-border-width;
      }
    }

    .#{$primary-stylename}-footer-container {
      padding-left: $cell-padding-horizontal;
      padding-right: $cell-padding-horizontal;
    }
  }
}