@use '../../styles/variables';

@mixin gantt-table-item-base() {
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid variables.$gantt-border-color;

  .gantt-table-column {
    overflow: hidden;
    border-right: 1px solid variables.$gantt-border-color;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;

    &:nth-last-child(2) {
      border-right: none;
    }

    &.gantt-table-column-placeholder {
      padding: 0;
      border: 1px solid variables.$gantt-border-color;
      border-right: none;
    }
  }
}

@mixin gantt-table-item {
  @include gantt-table-item-base();
  cursor: pointer;
  &-first-level-group {
    background: variables.$gantt-group-background-color;
  }

  &-with-group {
    .gantt-table-column {
      &:first-child {
        padding: 0 15px 0 32px;
      }
    }
  }

  .gantt-table-column {
    display: flex;
    padding: variables.$gantt-table-td-padding;
  }

  .gantt-table-column-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &:hover {
    background-color: variables.$gantt-container-background-color;
  }

  &-active {
    background-color: rgba($color: variables.$gantt-table-header-drag-line-color, $alpha: 0.1);
    &:hover {
      background-color: rgba($color: variables.$gantt-table-header-drag-line-color, $alpha: 0.1);
    }
  }

  .gantt-table-column {
    display: flex;
    padding: variables.$gantt-table-td-padding;

    &:nth-last-child(2) {
      border-right: none;
    }
    &.gantt-table-column-placeholder {
      padding: 0;
      border: 1px solid variables.$gantt-border-color;
      border-right: none;
    }
  }

  .gantt-table-column-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gantt-expand-icon {
    display: inline-block;
    width: 20px;
    color: variables.$color-text-light;
  }

  .gantt-drag-handle {
    width: 1rem;
    padding: 0 5px 0 0;
    display: flex;
    align-items: center;
    margin-left: -10px;
  }

  &:hover {
    background-color: variables.$gantt-container-background-color;
  }

  &-active {
    background-color: rgba($color: variables.$gantt-table-header-drag-line-color, $alpha: 0.1);
    &:hover {
      background-color: rgba($color: variables.$gantt-table-header-drag-line-color, $alpha: 0.1);
    }
  }
}

@mixin gantt-items-drag-drop() {
  .cdk-drag-preview.gantt-table-item {
    box-sizing: border-box;
    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
    opacity: 0.9;
    @include gantt-table-item();
  }

  .gantt-table-body.gantt-table-draggable {
    .cdk-drag-placeholder {
      display: none !important;
      & + .cdk-drop-list {
        display: none !important;
      }
    }

    .cdk-drag-disabled.gantt-table-item {
      .gantt-drag-handle {
        svg {
          display: none;
        }
      }
    }

    &.gantt-table-dragging {
      .gantt-table-item {
        &:hover {
          background: unset;
          .gantt-drag-handle {
            visibility: hidden !important;
          }
        }
      }
    }

    .drag-item-hide {
      display: none !important;
    }

    .drop-position-inside {
      .gantt-table-column {
        height: 100%;
        border-top: 2px dashed variables.$gantt-primary-color !important;
        border-bottom: 2px dashed variables.$gantt-primary-color !important;
        &:first-child {
          border-left: 2px dashed variables.$gantt-primary-color !important;
        }
        &:last-child {
          border-right: 2px dashed variables.$gantt-primary-color !important;
        }
      }
    }

    .drop-position-before {
      background: variables.$gantt-table-items-drop-background-color !important;
      border-top: 2px solid variables.$gantt-primary-color !important;
    }

    .drop-position-after {
      background: variables.$gantt-table-items-drop-background-color !important;
      border-bottom: 2px solid variables.$gantt-primary-color !important;
    }
  }
}

.gantt-table-header {
  height: variables.$gantt-header-height;
  line-height: variables.$gantt-header-height;
  text-align: center;
  background: variables.$color-background;
  box-shadow: variables.$gantt-side-shadow;
  position: relative;
  z-index: 3;
  border-right: 1px solid variables.$gantt-border-color;

  .gantt-table-header-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    &::-webkit-scrollbar {
      display: none;
    }
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  @include gantt-table-item();

  .gantt-table-column {
    font-weight: 400;
    z-index: 1;
  }
}

.gantt-table-body {
  display: block;
  flex: 1;
  .gantt-table-group {
    display: flex;
    height: variables.$gantt-row-height;
    background: variables.$gantt-group-background-color;
    padding: 0 10px;
    align-items: center;
    border-bottom: 1px solid variables.$gantt-border-color;
    box-sizing: border-box;
    position: relative;

    .gantt-table-group-title {
      cursor: pointer;

      .expand-icon {
        color: variables.$color-text-light;
        margin-right: 6px;
      }
    }
  }

  .gantt-table-item {
    height: variables.$gantt-row-height;
    line-height: variables.$gantt-row-height;
    @include gantt-table-item();
  }

  .gantt-expand-icon {
    display: inline-block;
    width: 20px;
    color: variables.$color-text-light;
  }
}

.gantt-table-empty {
  height: 100%;
  position: relative;
  .gantt-table-body-container {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 22px;
    .empty-icon {
      svg {
        height: 78px;
        width: 78px;
      }
    }
    .empty-text {
      color: variables.$color-gray-600;
    }
  }
}

.table-resize-handle,
.column-resize-handle {
  width: variables.$gantt-table-header-drag-line-width;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: ew-resize;
  height: 5000px;
  z-index: 2;

  &:hover {
    background: variables.$gantt-table-header-drag-line-color;
  }
}

.column-resize-handle {
  height: unset;
  z-index: 2;
}

.table-resize-auxiliary-line {
  width: variables.$gantt-table-header-drag-line-width;
  background: variables.$gantt-table-header-drag-line-color;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 100;
  display: none;
  height: 5000px;
}

@include gantt-items-drag-drop();