/*
 * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *     BSI Business Systems Integration AG - initial API and implementation
 */
.table-row-level-padding {
  width: @table-row-level-padding-width;
}

.table {
  position: relative;

  &:not(.disabled):focus,
  &.focused {
    outline: none;

    & .table-row.selected {
      background-color: @item-selection-background-color;
      border-color: @item-selection-border-color;
    }
  }

  & > .menubar:not(.main-menubar) {
    padding-left: @table-menubar-padding;
    padding-right: @table-menubar-padding;
  }

  &.checkable {
    & > .table-data > .table-row {
      cursor: pointer;
    }

    &.disabled > .table-data > .table-row,
    & > .table-data > .table-row.disabled {
      cursor: default;
    }
  }

  /* Used for scout.Table.CheckableStyle.TABLE_ROW */

  &.table-row-check {

    & > .table-data > .table-row {

      & > .table-cell.first {
        /* Increase padding of first cell to make room for "selection" marker */
        padding-left: 14px;
      }

      &.selected {
        /* Don't draw selection */
        background-color: transparent;
        border-color: @table-row-border-color;

        & > .table-cell {
          color: @text-color;
        }
      }

      &.checked,
      &.checked.selected {
        /* Mark checked rows with a background color */
        background-color: @table-row-checked-background-color;

        & > .table-cell {
          color: @text-selection-color;
        }
      }
    }

    &:focus,
    &.focused {
      & > .table-data > .table-row {
        &.selected {
          /* "Selection" marker */

          &::before {
            #scout.font-icon();
            content: @icon-angle-right;
            position: absolute;
            top: 8px;
            left: 5px;
            color: @text-color;
          }

          &.checked::before {
            color: @text-selection-color;
          }
        }
      }
    }
  }

  &.checkable.header-invisible > .table-data > .table-row.selected.first {
    border-top-color: @control-background-color;
  }

  &.structured {
    .table-row:not(.leaf) {
      background-color: @table-structure-row-background-color;
      font-weight: bold;
    }
  }

  & > .tile-accordion {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 15px;

    & .tile-grid {
      padding: 0;
    }
  }

  & > .tile-table-header {
    padding-left: 20px;
    padding-right: 20px;

    & > .group-box-body {
      padding-bottom: 6px;
    }
  }
}

.table-data {
  position: relative;
  overflow: hidden;
  width: 100%;

  /* Draw the .table-data DIV one pixel higher, over the header (for selection border). */
  /* - To make height calculation correct, this margin has to be subtracted again */
  /*   from .table-data's height. See TableLayout.layout(). */
  margin-top: -1px;
  padding-top: 1px;

  & > .scrollbar.y-axis {
    /* Make scrollbar visually centered */
    margin-top: @scrollbar-margin + 1px;
  }

  & > .table-row,
  & > .table-data-fill,
  & > .scrollbar {
    opacity: 1;
    transition: opacity @loading-fade-duration;
  }
}

.table {
  &:not(.knight-rider-loading) > .table-data.loading {
    & > .table-row,
    & > .table-data-fill,
    & > .scrollbar {
      opacity: 0;
    }

    & > .loading-indicator {
      #scout.loading-indicator();
    }
  }

  &.knight-rider-loading > .loading-indicator {
    #scout.loading-indicator-knight-rider;
  }
}

.table-data-fill {
  background-color: @border-color; /* actual style is set by JS, this is used for the line color (see _applyFillerStyle) */
}

.table-row,
.table-aggregate-row {
  position: relative;
  overflow: hidden;
  border-left: 0 solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 1px solid @table-row-border-color;

  &.sum-selection {
    color: @item-selection-border-color;
  }

  &:active {
    background-color: @table-row-active-background-color;
  }

  &.selected {
    background-color: @item-selection-nonfocus-background-color;
    border-color: @item-selection-nonfocus-border-color;
    border-left-color: transparent;
    border-right-color: transparent;

    &.select-top,
    &.select-middle {
      /* Disable bottom-border. Instead, we add the border in the ::after pseudo element, because otherwise */
      /* it would interfere with the 2px left border (missing control of 'border join behaviour' in CSS) */
      border-bottom: 0;
    }

    &.select-top::after,
    &.select-middle::after {
      border-bottom: 1px solid @table-row-border-color;
      content: '';
      display: block;
    }
  }

  &.select-single,
  &.select-top {
    border-top: 1px solid @item-selection-nonfocus-border-color;
    /* Move the row 1px up to cover the bottom border of the previous row. */
    margin-top: -1px;
  }

  &.checked {
    background-color: @table-row-checked-background-color;
  }
}

.table-cell {
  color: @text-color;
  display: table-cell;
  padding: @table-row-padding-y @table-cell-padding-right @table-row-padding-y @table-cell-padding-left;
  position: relative;
  #scout.overflow-ellipsis();
  vertical-align: top; /* for multiline text */

  & > .width-fix {
    /* Some browsers (e.g. IE9) need an additional <div> with display:inline-block below the table-cell */
    display: inline-block;
    #scout.overflow-ellipsis();
    /* An additional max-width: must be added in browser. */
  }

  .table-row.disabled > & {
    /* Table row is disabled -> use lighter disabled color */
    color: @disabled-color;
  }

  .disabled > .table-row > & {
    /* Whole table is disabled -> use darker disabled color */
    color: @text-disabled-color;
  }

  .disabled.read-only > .table-data > .table-row > & {
    color: @read-only-color;
  }

  .table-row.checked > & {
    color: @text-selection-color;
  }

  &.empty {
    /* explicitly disable ellipsis, because IE would display it for very narrow columns even if content is '&nbsp;' */
    text-overflow: clip;
  }

  &.last.halign-left,
  &.last.halign-center,
  &.last.halign-right {
    padding-right: @table-cell-padding-right-last;
  }

  .table:not(.disabled) > .table-data > .table-row:not(.disabled) > &.editable::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    #scout.triangle-top-left(5px, @border-color);
  }

  .table:not(.disabled) > .table-data > .table-row:not(.disabled) > &.mandatory::before {
    position: absolute;
    content: '*';
    top: 0;
    left: 0;
    border: none;
    color: @border-color;
  }

  .table:not(.disabled) > .table-data > .table-row:not(.disabled) > &.editable.has-error::before {
    #scout.triangle-top-left-color(@error-color);
  }

  .table:not(.disabled) > .table-data > .table-row:not(.disabled) > &.mandatory.has-error::before {
    color: @error-color;
  }

  &.table-node {

    & > .table-row-control {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      padding: @table-row-padding-y 8px @table-row-padding-y @table-row-control-padding-left;
      cursor: pointer;
      line-height: @table-row-control-line-height; /* Necessary to align with the text, depends on the used font size */

      &::before {
        display: block;
        #scout.font-icon();
        font-size: @table-row-control-size;
        content: @icon-angle-right;
        color: @table-row-control-color;

        .expanded& {
          /* This "imprecise" angle is a workround for firefox to prevent shifting the div a little when the animation finishes. */
          /* See https://bugzilla.mozilla.org/show_bug.cgi?id=739176 */
          #scout.transform(rotate(89.99deg));
        }

      }

      &:hover::before {
        color: @highlight-color;
      }
    }
  }

  &.checkable {
    /* same padding for left and right, it's by purpose */
    padding: @table-row-padding-y - @checkable-cell-padding-adjustment @table-cell-padding-left 0 @table-cell-padding-left;
    cursor: pointer;
    text-overflow: clip;
  }

  &.checkable.disabled,
  .table.disabled > .table-data > .table-row > &.checkable {
    cursor: default;
  }

  & > .check-box {
    #scout.checkbox();

    &::before {
      #scout.checkbox-before();
    }

    &.checked::before {
      #scout.checkbox-before-checked();
    }

    &.undefined::before {
      /* tri-state */
      #scout.checkbox-before-undefined();
    }

    &.disabled,
    .table.disabled > .table-data > .table-row > & {
      #scout.checkbox-disabled();

      &::before {
        #scout.checkbox-before-disabled();
      }
    }

    &.disabled.undefined::before,
    .table.disabled > .table-data > .table-row > &.undefined::before {
      /* tri-state */
      #scout.checkbox-before-undefined-disabled();
    }
  }

  &.halign-right {
    text-align: right;
    padding-right: @table-cell-padding-left;
    padding-left: @table-cell-padding-right;
  }

  &.halign-center {
    text-align: center;
    padding-right: @table-cell-padding-left;
  }
}

.table-icon-cell {
  text-overflow: clip;
}

.table-cell-icon {
  .font-icon& {
    color: @icon-color;

    .disabled & {
      color: @disabled-color;
    }
  }

  .image-icon& {
    /* vertical-align-bottom is necessary to remove the bottom margin of the image */
    vertical-align: bottom;
  }

  .with-text& {
    margin-right: 8px;
  }

  .table-row.checked > .table-cell > & {
    color: @text-selection-color;
  }
}

.table-aggregate {
  overflow: hidden;
}

.table-aggregate-row {
  background-color: @table-aggregate-row-background-color;
}

.table-aggregate-cell {
  font-weight: bold;

  & > .table-cell-icon {
    color: @text-color;
  }

  /* if aggregation is based on selected rows */

  &.selection,
  &.selection > .table-cell-icon {
    color: @table-aggregate-cell-selection-color;
  }
}

.column-background-effect-bar-chart {
  background-color: @column-background-effect-bar-chart-background-color;
}

.column-background-effect-gradient1-start {
  background-color: @column-background-effect-gradient1-start-background-color;
}

.column-background-effect-gradient1-end {
  background-color: @column-background-effect-gradient1-end-background-color;
}

.column-background-effect-gradient2-start {
  background-color: @column-background-effect-gradient2-start-background-color;
}

.column-background-effect-gradient2-end {
  background-color: @column-background-effect-gradient2-end-background-color;
}

/* key box */

.table-row > .key-box {
  top: calc(~'50% - ' 23px / 2);
}

.table-controls > .table-control > .key-box {
  bottom: 4px;
}

.table .key-box.char {
  top: calc(~'50% - ' 21px / 2);
}

/*** Animation: rotate from 0 -> 90 deg ***/

@-webkit-keyframes expand-rotate {
  .keyframes-expand-rotate();
}

@keyframes expand-rotate {
  .keyframes-expand-rotate();
}

.keyframes-expand-rotate() {
  00% { /* see comment on top */
    #scout.transform(rotate(0deg));
  }
  100% {
    #scout.transform(rotate(89.99deg));
  }
}

.animation-expand-rotate() {
  #scout.animation-name(expand-rotate);
  #scout.animation-duration(0.3s);
  #scout.animation-iteration-count(1);
  #scout.animation-timing-function(ease-out);
}

.expand-rotate {

  &::before {
    .animation-expand-rotate();
  }
}


/*** Animation: rotate collapse  90 -> 0 deg ***/

@-webkit-keyframes collapse-rotate {
  .keyframes-collapse-rotate();
}

@keyframes collapse-rotate {
  .keyframes-collapse-rotate();
}

.keyframes-collapse-rotate() {
  00% { /* see comment on top */
    #scout.transform(rotate(89.99deg));
  }
  100% {
    #scout.transform(rotate(0deg));
  }
}

.animation-collapse-rotate() {
  #scout.animation-name(collapse-rotate);
  #scout.animation-duration(0.3s);
  #scout.animation-iteration-count(1);
  #scout.animation-timing-function(ease-out);
}

.collapse-rotate {

  &::before {
    .animation-collapse-rotate();
  }
}

/* Required because arrow up/down symbol is not properly vertically aligned with the rest of the sort/group text */
.sort-symbol {
  top: -1.25px;
  position: relative;
}