@import 'main';

$table_shadow_start_color: rgba(0, 0, 0, 0);
$table_shadow_end_color: rgba(0, 0, 0, 0.03);
$table_scroll_thumb_color: rgba(0, 0, 0, 0.2);
$table_header_shadow_start_color: rgba(0, 0, 0, 0);
$table_header_shadow_end_color: rgba(0, 0, 0, 0.04);
$table_loader_icon_size: 32px;
$table_icon_size: 24px;
$table_col_height: 56px;
$table_panel_height: 50px;
$table_drag_element_size: 16px;
$table_scroll_track_size: 12px;
$table_scroll_thumb_size: 6px;
$table_scroll_small_padding: ($table_scroll_track_size - $table_scroll_thumb_size) / 2 - 1px;
$table_scroll_big_padding: ($table_scroll_track_size - $table_scroll_thumb_size) / 2 + 1px;
$column_choice_height: 58px;
$column_choice_width: 30px;

.table-box {
  height: 100%;
  @include box-shadow(0 0 0 1px $color_table_border);
}

.table-layout {
  height: 100%;
}

.table {
  background-color: $color_paper;
  height: 100%;

  &.with-panel {
    height: calc(100% - #{$table_panel_height});
  }

  // Хак для того, чтобы overlay не накрывал header таблицы
  &-overlay {
    top: 72px;
    height: auto;
  }

  &:before, &:after {
    content: '';
    position: absolute;
    top: 0;
    width: 16px;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    @include transition;
  }

  &:before {
    z-index: 1;
    left: 0;
    @include linear-gradient(right, $table_shadow_start_color, $table_shadow_end_color);
  }

  &:after {
    right: 0;
    @include linear-gradient(left, $table_shadow_start_color, $table_shadow_end_color);
  }
}

.track {
  position: absolute;
  right: 0;
  bottom: 0;
  @include transition();

  &.horizontal {
    left: 0;
    height: $table_scroll_track_size !important;
  }

  &.vertical {
    top: 0;
    width: $table_scroll_track_size !important;
  }
}

.type {
  &-draggable, &-not-draggable {
    width: 100%;
  }
  &-draggable {
    height: calc(100% - #{$table_col_height + $table_drag_element_size}) !important;
  }
  &-not-draggable {
    height: calc(100% - #{$table_col_height}) !important;
  }
}

.thumb {
  z-index: 2;
  cursor: pointer;

  &:before {
    content: '';
    display: block;
    background-color: $table_scroll_thumb_color;
    @include border-radius();
    width: 100%;
    height: 100%;
  }

  &.horizontal {
    padding: $table_scroll_big_padding 0 $table_scroll_small_padding;
    height: 100%;
  }

  &.vertical {
    padding: 0 $table_scroll_small_padding 0 $table_scroll_big_padding;
    width: 100%;
  }
}

.row {
  background-color: $color_paper;
}

.col {
  border: 1px solid transparent;
  border-right-color: $color_table_border;
  background-color: $color_paper;
  width: $table_col_height;
  height: $table_col_height;
  padding: 0 5px;
  @include inline-flex();
  @include align-items(center);
  @include transition();
  @include flex-shrink(0);

  &-inside {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.drag-element {
  color: $color_table_border;
  padding: 0;
  background-color: $color_light_bright;
  @include transition();
  @include flexbox();
  @include align-items(center);
  @include justify-content(center);
  position: absolute;
  border: 1px solid transparent;

  &.placeholder {
    background-color: $color_paper;
  }

  &-box {
    visibility: hidden;
    opacity: 0;
  }

  .drag-dots {
    width: 6px;
    height: 6px;

    .two-dots {
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      height: 2px;

      &:first-child {
        top: 0;
      }

      &:last-child {
        bottom: 0;
      }

      &:before, &:after {
        content: '';
        position: absolute;
        top: 0;
        width: 2px;
        height: 2px;
        background-color: $color_table_border;
      }

      &:before {
        left: 0;
      }

      &:after {
        right: 0;
      }
    }
  }

  &.left {
    @include flex-direction(column);
    width: $table_drag_element_size - 1px;
    top: -1px;
    bottom: -1px;
    left: -$table_drag_element_size;
    border-right-color: $color_table_border;
    border-top-color: $color_table_border;

    .drag-dots:first-child {
      margin-bottom: 2px;
    }
  }

  &.top {
    height: $table_drag_element_size;
    top: -$table_drag_element_size;
    left: -1px;
    right: -1px;
    border-bottom-color: $color_table_border;
    border-right-color: $color_table_border;

    .drag-element-box {
      @include inline;
    }

    .drag-dots:first-child {
      margin-right: 2px;
    }
  }

  &:not(.placeholder):not(.service):hover {
    background-color: $color_primary;
    cursor: move;
    border-color: $color_primary;

    .drag-element-box {
      visibility: visible;
      opacity: 1;
    }

    .two-dots {
      &:before, &:after {
        background-color: $color_paper;
      }
    }
  }
}

.content {
  background-color: $color_grey;

  .col {
    border-top-color: $color_table_border;
  }

  &.horizontal > *:nth-child(2n) .col, &.vertical .col:not(.head):nth-child(2n) {
    background-color: $color_light_bright;
  }

  &.horizontal > *:last-child .col, &.vertical .col:not(.head):last-child {
    border-bottom-color: $color_table_border;
  }

  &.horizontal .col, &.vertical .col:not(.head) {
    &:not(.placeholder):hover {
      border-color: $color_primary;
      color: $color_primary;
    }
  }
}

.head-box {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.head {
  font-weight: bold;
}

.head-shadow {
  content: '';
  position: absolute;
  left: -1px;
  right: 0;
  height: 14px;
  @include linear-gradient(bottom, $table_header_shadow_start_color, $table_header_shadow_end_color);
  z-index: 1;
}

.horizontal.head .col, .vertical .col.head {
  &:after {
    top: calc(100% + 1px);
    @extend .head-shadow;
  }
}

.type-draggable, .type-not-draggable {
  &:after {
    top: 0;
    @extend .head-shadow;
  }
}

.first-cell {
  position: absolute;
  top: -16px;
  bottom: -1px;
  left: -16px;
  width: 15px;
  background-color: $color_light_bright;
  border-right: 1px solid $color_table_border;

  &:before, &:after {
    content: '';
    position: absolute;
    @include box-sizing();
    width: 100%;
  }

  &.placeholder {
    &:before, &:after {
      background-color: $color_paper;
    }
  }

  &:before {
    top: 0;
    height: 16px;
    border-bottom: 1px solid $color_table_border;
  }

  &:after {
    top: 16px;
    bottom: 0;
  }
}

.horizontal {
  .row {
    @include flexbox();
  }

  .col {
    &.draggable:first-child {
      margin-left: 15px;
    }

    &:last-child {
      border-right-color: transparent;
      @include flex-grow(1);
    }
  }

  &.head .col {
    border-top: 0;
    &.draggable {
      margin-top: 16px;
    }

    &:last-child {
      .drag-element {
        border-right-color: transparent;
      }
    }
  }
}

.vertical {
  width: 100%;
  @include flexbox();

  .vertical-column {

    .col {
      background-color: $color-paper;

      &.head {
        border-top: 0;
        z-index: 1;

        &.draggable {
          margin-top: 16px;
        }

        &:last-child {
          .drag-element {
            border-right-color: transparent;
          }
        }
      }
    }

    &:first-child .col.draggable {
      margin-left: 15px;
    }

    &:last-child {
      @include flex-grow(1);

      .col {
        border-right-color: transparent;
        min-width: 100%;

        &:first-child {
          border-right: 0;
        }
      }
    }
  }
}

.dragging {
  @include box-shadow($box_shadow_paper_hover);
  overflow: hidden;
}

.panel {
  height: $table_panel_height;
  padding: 8px 16px;
  @include flexbox();
  @include justify-content(space-between);
  @include align-content(center);
  @include flex-direction(row-reverse);
  border-top: 1px solid $color_table_border;
  margin-top: -1px;
}

.column-choice {
  position: absolute;
  top: -1px;
  left: -30px;
  width: $column_choice_width;
  height: $column_choice_height;
  border: 1px solid $color_table_border;
  border-top-left-radius: $default_border_radius;
  border-bottom-left-radius: $default_border_radius;
  background-color: $color_paper;
  @include flexbox();
  @include align-items(center);
  @include justify-content(center);
  @include transition();

  &-icon {
    font-size: $table_icon_size;
    color: $color_dark;
  }

  & &-items-panel {
    width: 0;

    &.opened {
      left: 29px;
      top: 0;
    }
  }

  &-items-panel {
    margin-left: $column_choice_width !important;
    margin-top: -$column_choice_height !important;
  }

  .table-box:not(.placeholder) &:hover {
    cursor: pointer;
    background-color: $color_primary;
    border-color: $color_primary;

    .column-choice-icon {
      color: $color_paper;
    }
  }
}

.haveHidden  .column-choice-icon {
  color: $color_primary;
}

.loader-icon {
  width: $table_loader_icon_size;
  height: $table_loader_icon_size;
  fill: $color_default;
  fill: $color_default;
}

.center {
  .col {
    @include justify-content(center);
  }
}

.placeholder {
  .row, .col {
    background-color: $color_paper !important;
  }

  .col {
    padding: 20px;

    & > *:not(.col-inside:first-child) {
      display: none;
    }

    &-inside {
      font-size: 0;
      width: 100%;
      height: 100%;
      background-color: $color_table_border;
    }
  }

  .column-choice-icon {
    font-size: 0;
  }
}

.left-shadow .table:before {
  visibility: visible;
  opacity: 1;
}

.right-shadow .table:after {
  visibility: visible;
  opacity: 1;
}

.sort-icon {
  font-size: $table_icon_size;
  color: $color_dark;
  vertical-align: middle;
}

.header-col {
  @include align-items(center);
  div:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &-with-sort div:first-child{
    width: calc(100% - #{$table_icon_size});
  }
}