.datatable-head,
.datatable-rows
{
  display: table;
  width: 100%;
  table-layout:fixed;
}

.datatable
{
  margin-bottom: 20px;

  > .datatable-head
  {
    transition: box-shadow .2s;
  }

  .table
  {
    margin: 0;
    table-layout: fixed;

    > tbody > tr > td,
    > thead > tr > th
    {
      min-width: 20px;

      &.check-btn
      {
        cursor: pointer;
        width: 30px;
        text-align: center;
        color: lighten(@color-fore, 40%);
      }
    }

    > tbody > tr.hover > td.check-btn,
    > tbody > tr.active > td.check-btn,
    > thead > tr > th.check-btn:hover,
    > tbody > tr > td.check-btn:hover,
    > thead > tr > th.check-btn.checked,
    > tbody > tr > td.check-btn.checked
    {
       color: lighten(@color-fore, 10%);
    }

    > thead > tr > th.check-btn.checked,
    > tbody > tr > td.check-btn.checked,
    > tbody > tr.active > td.check-btn
    {
      > .icon-check-empty:before
      {
        content: @icon-check;
      }
    }

    > thead > tr > th.col-hover
    {
      background-color: darken(@table-head-bg, 6%);
    }

    > tbody > tr > td.col-hover,
    > tbody > tr.hover > td
    {
      background-color: @table-bg-hover;
    }

    > tbody > tr.active.hover td
    {
      background-color: darken(@table-bg-active, 5%);
    }
  }

  &.head-fixed
  {
    > .datatable-head
    {
      position: fixed;
      z-index: 10000;
      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
    }
  }

  &.sortable
  {
    .datatable-head-span .table > thead > tr > th
    {
      cursor: pointer;
      .nobr();

      &.text-center
      {
        padding-left: 0;
        padding-right: 0;
      }

      &:after
      {
        .icon-zenicon();
        content: @icon-sort;
        display: inline-block;
        margin-left: 5px;
        color: @color-gray;
      }

      &.sort-down:after
      {
        content: @icon-caret-down;
        color: @link-color;
      }

      &.sort-up:after
      {
        content: @icon-caret-up;
        color: @link-color;
      }

      &.check-btn:after, &.sort-disabled:after
      {
        display: none
      }

      &.sort-disabled
      {
        cursor: default;
      }
    }
  }

  // .size-handle {display: none}

  // &.customizable
  // {
  //   &.size-changing
  //   {
  //     cursor: e-resize!important;
  //   }

  //   .size-handle
  //   {
  //     display: block;
  //     position: absolute;
  //     width: 3px;
  //     height: 100%;
  //     top: 0;
  //     cursor: w-resize;
  //     border: 1px dotted transparent;
  //     border-top: none;
  //     border-bottom: none;
  //     .transition();
  //   }

  //   .datatable-head-span
  //   {
  //     position: relative;

  //     &.fixed-left
  //     {
  //       .size-handle
  //       {
  //         right: 0;
  //       }
  //     }

  //     &.fixed-right
  //     {
  //       .size-handle
  //       {
  //         left: 0;
  //       }
  //     }

  //     .table > thead > tr > th
  //     {
  //       position: relative;
  //       .size-handle
  //       {
  //         right: 0;
  //       }
  //     }
  //   }

  //   .datatable-head
  //   {
  //     &:hover
  //     {
  //       .size-handle
  //       {
  //         border-color: @color-gray;
  //         background-color: @color-back;
  //       }
  //     }
  //   }

  //   &.size-changing
  //   {
  //     .table > thead > tr > th,
  //     .table > tbody > tr > td
  //     {
  //       transition: none;
  //     }
  //   }
  // }
}

.datatable-wrapper {position: relative;}

.datatable-span
{
  display: table-cell;
  vertical-align: top;

  &.flexarea
  {
    overflow: hidden;

    &.datatable-head-span
    {
      &.dragging
      {
        cursor: move !important;
      }
    }

    .table
    {
      position: relative;
      left: 0;
      top: 0;
    }

    .scrolled-shadow
    {
      width: 20px;
      position: absolute;
      top: 0;
      bottom: 0;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
      display: none;
      opacity: 0;
      .transition();
    }

    .scrolled-in-shadow
    {
      left: -30px;
    }

    .scrolled-out-shadow
    {
      right: -30px;
    }
  }
}

.datatable > .scroll-wrapper
{
  position: relative;
  width: 100%;
}

.datatable .scroll-slide
{
  position: absolute;
  bottom: 0;
  left: -1px;
  right: -1px;
  background: @color-gray-lighter;
  background: fade(@color-gray, 10%);
  border: 1px solid @color-gray-lighter;
  border-bottom: none;
  height: 11px;
  opacity: 0;
  display: none;
  transition: opacity 0.5s, background 0.3s;

  > .bar
  {
    position: absolute;
    height: 10px;
    top: 0px;
    min-width: 50px;
    left: 0;
    background-color: lighten(@color-gray, 15%);
  }

  &:hover
  {
    > .bar
    {
      background-color: @color-gray;
    }
  }


  &.scroll-pos-out
  {
    bottom: -14px;
    height: 15px;

    > .bar
    {
      height: 14px;
    }
  }
}

.datatable.show-scroll-slide
{
  &:hover,
  &.scrolling
  {
    .scroll-slide, .scrolled-shadow {opacity: 1};
  }

  .scroll-slide, .scrolled-shadow
  {
    display: block;
  }

  &.scrolled-in .scrolled-in-shadow {left: -20px;}
  &.scrolled-out .scrolled-out-shadow {right: -20px;}
}
