@use "sass:map";
@use "sass:list";

.vxe-gantt-view--chart-task-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.vxe-gantt-view--chart-row,
.vxe-gantt-view--chart-subview-row {
  position: relative;
  width: 100%;
  height: 0;
}
.vxe-gantt-view--chart-row {
  &.row--pending {
    .vxe-gantt-view--chart-bar {
      color: var(--vxe-ui-font-disabled-color);
      opacity: 0.5;
      text-decoration: line-through;
    }
  }
  &.is--round {
    & > .vxe-gantt-view--chart-bar,
    & > .vxe-gantt-view--chart-custom-bar {
      border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
      .vxe-gantt-view--chart-bar-content-wrapper,
      .vxe-gantt-view--chart-custom-bar-content-wrapper {
        border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
      }
      &:hover {
        &::after {
          border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
        }
      }
    }
  }
}
.vxe-gantt-view--chart-subview-row {
  &.row--pending {
    .vxe-gantt-view--chart-subview-bar,
    .vxe-gantt-view--chart-subview-custom-bar {
      color: var(--vxe-ui-font-disabled-color);
      opacity: 0.5;
      text-decoration: line-through;
    }
  }
  &.is--round {
    & > .vxe-gantt-view--chart-subview-bar,
    & > .vxe-gantt-view--chart-subview-custom-bar {
      border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
      .vxe-gantt-view--chart-subview-bar-content-wrapper,
      .vxe-gantt-view--chart-subview-custom-bar-content-wrapper {
        border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
      }
      &:hover {
        &::after {
          border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
        }
      }
    }
  }
}
.vxe-gantt-view--chart-subview-wrapper {
  &.is--overview {
    & > .vxe-gantt-view--chart-subview-row {
      .vxe-gantt-view--chart-subview-bar {
        color: #ffffff;
        background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
      }
    }
  }
}

.vxe-gantt-view--chart-bar,
.vxe-gantt-view--chart-custom-bar,
.vxe-gantt-view--chart-subview-bar,
.vxe-gantt-view--chart-subview-custom-bar {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  pointer-events: all;
}

.vxe-gantt-view--chart-row {
  &.is--progress {
    & > .vxe-gantt-view--chart-bar,
    & > .vxe-gantt-view--chart-custom-bar {
      &.is--default {
        color: #ffffff;
        background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
      }
    }
  }
  &:not(.is--progress) {
    & > .vxe-gantt-view--chart-bar,
    & > .vxe-gantt-view--chart-custom-bar {
      &.is--default {
        color: #ffffff;
        background-color: var(--vxe-ui-gantt-view-task-bar-completed-background-color);
      }
    }
  }
}
.vxe-gantt-view--chart-subview-row {
  &.is--progress {
    & > .vxe-gantt-view--chart-subview-bar,
    & > .vxe-gantt-view--chart-subview-custom-bar {
      &.is--subview {
        color: #ffffff;
        background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
      }
      &.is--default {
        color: #ffffff;
        background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
      }
    }
  }
  &:not(.is--progress) {
    & > .vxe-gantt-view--chart-subview-bar,
    & > .vxe-gantt-view--chart-subview-custom-bar {
      &.is--subview {
        color: #ffffff;
        background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
      }
      &.is--default {
        color: #ffffff;
        background-color: var(--vxe-ui-gantt-view-task-bar-completed-background-color);
      }
    }
  }
}
.vxe-gantt-view--chart-bar-content-wrapper,
.vxe-gantt-view--chart-subview-bar-content-wrapper{
  height: var(--vxe-ui-gantt-view-chart-bar-height);
}
.vxe-gantt-view--chart-custom-bar-content-wrapper,
.vxe-gantt-view--chart-subview-custom-bar-content-wrapper {
  min-height: var(--vxe-ui-gantt-view-chart-bar-height);
}

.vxe-gantt-view--chart-bar-content-wrapper,
.vxe-gantt-view--chart-custom-bar-content-wrapper,
.vxe-gantt-view--chart-subview-bar-content-wrapper,
.vxe-gantt-view--chart-subview-custom-bar-content-wrapper {
  width: 100%;
  overflow: hidden;
}
.vxe-gantt-view--chart-bar-content-wrapper,
.vxe-gantt-view--chart-subview-bar-content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.vxe-gantt-view--chart-bar,
.vxe-gantt-view--chart-custom-bar,
.vxe-gantt-view--chart-subview-bar,
.vxe-gantt-view--chart-subview-custom-bar {
  align-items: center;
  &.is--default {
    &:hover {
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.1);
        pointer-events: none;
      }
    }
  }
  &.is--milestone {
    white-space: nowrap;
  }
}
.vxe-gantt-view--chart-progress {
  flex-shrink: 0;
  width: 0;
  height: 100%;
  text-align: left;
  background-color: var(--vxe-ui-gantt-view-task-bar-completed-background-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vxe-gantt-view--chart-content {
  position: absolute;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9em;
  padding: 0 0.6em;
}

$iconThemeList: (
  (
    name: "primary",
    color: var(--vxe-ui-font-primary-color),
  ),
  (
    name: "success",
    color: var(--vxe-ui-status-success-color),
  ),
  (
    name: "info",
    color: var(--vxe-ui-status-info-color),
  ),
  (
    name: "warning",
    color: var(--vxe-ui-status-warning-color),
  ),
  (
    name: "danger",
    color: var(--vxe-ui-status-danger-color),
  ),
  (
    name: "error",
    color: var(--vxe-ui-status-error-color),
  )
);
.vxe-gantt-view--chart-milestone-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.vxe-gantt-view--chart-milestone-icon {
  flex-shrink: 0;
  padding: 0 0.3em;
  color: var(--vxe-ui-font-primary-color);
  @for $index from 0 to list.length($iconThemeList) {
    $item: list.nth($iconThemeList, $index + 1);
    &.theme--#{map.get($item, name)} {
      color: map.get($item, color);
    }
  }
  i {
    display: inline-block;
  }
}
.vxe-gantt-view--chart-milestone-content {
  flex-grow: 1;
}

/*行拖拽*/
.vxe-gantt-view--chart-row,
.vxe-gantt-view--chart-subview-row {
  &.row--drag-move {
    transition: transform 0.5s ease;
  }
  &.row--drag-origin {
    opacity: 0.3;
  }
}