// Table Style - Colors
// --------------------------------------------------

table.table {
  background: @tableBackgroundColor;
  
  > thead {
    > tr {
      > th {
        color: @tableThFontColor;
        border-top: 1px solid @tableThBorderColor;
        border-bottom: 1px solid @tableThBorderColor;
  
        &:first-child {
          border-left: 1px solid @tableThBorderColor;
        }
  
        &:last-child {
          border-right: 1px solid @tableThBorderColor;
        }

        &.sorted {
          color: @tableThHoverFontColor;
        }

        [class^="icon-"], [class*=" icon-"] {
          &.icon-asc {
            background-image: url(@tableSortingIconUrl);
          }
          &.icon-desc {
            background-image: url(@tableSortingIconUrl);
            transform: rotate(180deg);
          }
        }
      }
    }
  }

  > tbody {
    > tr {
      > td {
        color: @tableTdFontColor;
      }

      &.selected {
        background: @tableTdSelectedBackgroundColor !important;

        > td {
          color: @tableTdSelectedFontColor;
          
          &:not(:last-child) {
            border-right: 1px solid @tableTdSelectedBackgroundColor;
          }
        }
      }

      &.checked {
        background: @tableTdSelectedBackgroundColor !important;

        > td {
          color: @tableTdSelectedFontColor;
        }
      }
    }
  }

  // Table Styles
  // --------------------------------------------------

  &.table.stripe {
    > tbody {
      > tr:nth-child(even) {
        background: @tableTdStripeBackgroundColor;
      }
    }
  }
  &.table.stripeless {
    > tbody {
      > tr:nth-child(even) {
        background: @tableBackgroundColor;
      }
    }
  }

  &.table.border {
    > tbody {
      tr {
        td {
          border-bottom: 1px solid @tableTdBorderColor;
        }
      }

      tr + tr.open {
        td {
          border-top-width: 0px !important;
        }
      }
    }
  }
  &.table.borderless {
    > tbody {
      tr {
        td {
          border-bottom: 1px solid transparent;
        }

        .expand-row(0px solid transparent);
      }

      tr + tr.open {
        td {
          border-top-width: 1px !important;
        }
      }
    }
  }

  &.table.vborder {
    > thead {
      tr {
        th:not(:last-child), td:not(:last-child) {
          border-right: 1px solid @tableThBorderColor;
        }
      }
    }
    > tbody {
      tr {
        th:not(:last-child), td:not(:last-child) {
          border-right: 1px solid @tableTdBorderColor;
        }
      }
    }
    
    tr {
      .expand-row(1px solid @tableTdExpandBorderColor);
    }
  }
  &.table.vborderless {
    tr {
      th:not(:last-child), td:not(:last-child) {
        border-right: 1px solid transparent;
      }

      .expand-row(1px solid @tableTdExpandBorderColor);
    }
  }

  &.table.outline {
    > tbody {
      tr {
        td:first-child {
          &:not(.open) {
            border-left: 1px solid @tableTdBorderColor;
          }
        }

        td:last-child {
          &:not(.open) {
            border-right: 1px solid @tableTdBorderColor;
          }
        }
      }
    }
  }

  .table.stripe;
  .table.border;
  .table.vborder;
}
.table.hover {
  > thead th:hover {
    color: @tableThHoverFontColor;
  }
  > tbody > tr:hover:not(.selected):not(.dragtarget) {
    background: @tableTdHoverBackgroundColor;
  }
}


// Table Expanded-Row
// --------------------------------------------------
.expand-row(@borderColor) {
  &.open {
    background: @tableBackgroundColor !important;
    box-shadow: @tableTdExpandBoxShadow;

    > td {
      border-top: 1px solid @tableTdBorderColor;
      border-bottom: @borderColor !important;

      &:first-child {
        border-left: 2px solid @tableTdExpandPointBorderColor !important;
      }
      &:last-child {
        border-right: 1px solid @tableTdBorderColor !important;
      }
    }
  }
  &.expand {
    background: @tableBackgroundColor !important;
    box-shadow: @tableTdExpandBoxShadow;

    > td {
      border-bottom: 1px solid @tableTdBorderColor;

      &:first-child {
        border-left: 2px solid @tableTdExpandPointBorderColor !important;
      }
      &:last-child {
        border-right: 1px solid @tableTdBorderColor !important;
      }
    }
  }
}


// Table Input-Cell
// --------------------------------------------------
.table {
  > tbody td > .edit {
    background-color: @tableEditCellBackgroundColor;
    border: 1px solid @tableEditCellBorderColor;
    .box-shadow(@tableEditCellBoxShadow);
    color: @tableEditCellFontColor;

    &:focus {
      border-color: @tableEditCellFocusBorderColor;
      outline: 0;
      .box-shadow(@tableEditCellFocusBoxShadow);
      .transition(@tableEditCellFocusTransition);
    }

    &[disabled], &[readonly] {
      cursor: not-allowed;
      background-color: @tableEditCellDisabledBackgroundColor;
      color: @tableEditCellDisabledFontColor;
    }
  }
}


// Table Draggable-Row
// --------------------------------------------------
.table {
  &.layer {
    z-index: 5001;
    border-bottom-width: 0px !important;
    .border-radius(0px) !important;
  }

  > tbody > tr {
    &.dragtarget {
      background-color: @tableDragTargetRowBackgroundColor !important;
      background-image: none !important;
    }

    &.dragclone {
      background-color: @tableDragCloneRowBackgroundColor !important;
      background-image: none !important;
      color: @tableDragCloneRowFontColor !important;
      border: @tableDragCloneRowBorderColor !important;

      > td {
        border-top: @tableDragCloneRowBorderColor !important;
        border-bottom: @tableDragCloneRowBorderColor !important;

        &:first-child {
          border-left: @tableDragCloneRowBorderColor !important;
          .border-bottom-left-radius(0px) !important;
        }

        &:last-child {
          border-right: @tableDragCloneRowBorderColor !important;
          .border-bottom-right-radius(0px) !important;
        }

        &:not(:first-child) {
          border-left-width: 0px !important;
        }

        &:not(:last-child) {
          border-right-width: 0px !important;
        }
      }
    }

    &.dragline {
      > td {
        padding: 0px !important;
        height: 2px !important;
        background: @tableDragLineRowBackgroundColor !important;
      }
    }
  }
}