@use '../helpers/baseMixin.scss';
@use './gantt-module/all.scss';

.vxe-gantt {
  position: relative;
  display: flex;
  flex-direction: column;
  &.is--loading {
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 99;
      user-select: none;
      background-color: var(--vxe-ui-loading-background-color);
    }
    & > .vxe-gantt-view {
      .vxe-loading {
        background-color: transparent;
      }
    }
  }
  &.is--maximize {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0.5em 1em;
    background-color: var(--vxe-ui-layout-background-color);
  }
  &.is--split-drag {
    cursor: col-resize;
    .vxe-gantt--table-wrapper,
    .vxe-gantt--view-wrapper {
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: transparent;
        user-select: none;
      }
    }
  }
  .vxe-gantt--form-wrapper,
  .vxe-gantt--top-wrapper,
  .vxe-gantt--bottom-wrapper  {
    position: relative;
  }
  .vxe-gantt--gantt-container {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    overflow: hidden;
  }
  .vxe-gantt--left-wrapper,
  .vxe-gantt--right-wrapper {
    flex-shrink: 0;
    overflow: auto;
    outline: 0;
  }
  .vxe-gantt--table-wrapper,
  .vxe-gantt--view-wrapper {
    display: none;
    position: relative;
    flex-grow: 1;
    overflow: hidden;
  }
  .vxe-gantt--view-split-bar {
    flex-shrink: 0;
    width: var(--vxe-ui-gantt-view-split-bar-width);
    &.is--resize {
      cursor: col-resize;
    }
  }
  .vxe-gantt--view-split-bar-handle {
    background-color: var(--vxe-ui-gantt-view-split-bar-background-color);
    &:hover,
    &:active {
      background-color: var(--vxe-ui-gantt-view-split-bar-hover-background-color);
    }
  }
  &.show--left {
    .vxe-gantt--table-wrapper {
      display: block;
    }
    &.show--right {
      .vxe-gantt--table-wrapper {
        flex-grow: unset;
        flex-shrink: 0;
        width: var(--vxe-ui-gantt-view-table-default-width);
      }
    }
  }
  &.show--right {
    .vxe-gantt--view-wrapper {
      display: block;
    }
  }
}

.vxe-gantt--layout-body-wrapper {
  display: flex;
  flex-direction: row;
  overflow: auto;
  flex-grow: 1;
}
.vxe-gantt--layout-body-content-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}
.vxe-gantt--layout-header-wrapper,
.vxe-gantt--layout-footer-wrapper,
.vxe-gantt--layout-aside-left-wrapper,
.vxe-gantt--layout-aside-left-wrapper {
  flex-shrink: 0;
  overflow: auto;
}

/*边框线*/
.vxe-gantt--border-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  border: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
}
.vxe-gantt {
  &.border--full {
    .vxe-gantt-view--header-column,
    .vxe-gantt-view--body-column,
    .vxe-gantt-view--footer-column {
      background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
      background-repeat: no-repeat;
      background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
      background-position: right top, right bottom;
    }
  }
  &.border--default,
  &.border--full,
  &.border--outer,
  &.border--inner {
    .vxe-gantt-view--scroll-y-top-corner,
    .vxe-gantt-view--scroll-y-bottom-corner {
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        border-width: 0;
        border-style: solid;
        border-color: var(--vxe-ui-table-border-color);
      }
    }
    .vxe-gantt-view--scroll-y-top-corner {
      &::before {
        border-bottom-width: var(--vxe-ui-table-border-width);
      }
    }
    .vxe-gantt-view--scroll-y-bottom-corner {
      border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
    }
    .vxe-gantt-view--scroll-x-handle-appearance {
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }
    &.sx-pos--top {
      .vxe-gantt-view--scroll-x-handle-appearance {
        top: 0;
        border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
      }
    }
    &.sx-pos--bottom {
      .vxe-gantt-view--scroll-x-handle-appearance {
        bottom: 0;
        height: calc(100% + var(--vxe-ui-table-border-width));
        border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
      }
    }
  }
  &.border--default,
  &.border--full {
    .vxe-gantt-view--scroll-y-top-corner {
      &::before {
        border-left-width: var(--vxe-ui-table-border-width);
        border-right-width: var(--vxe-ui-table-border-width);
      }
    }
    .vxe-gantt-view--scroll-y-bottom-corner {
      &::before {
        border-left-width: var(--vxe-ui-table-border-width);
        border-right-width: var(--vxe-ui-table-border-width);
      }
    }
    &.sy-pos--right {
      .vxe-gantt-view--scroll-y-top-corner,
      .vxe-gantt-view--scroll-y-bottom-corner {
        &::before {
          width: calc(100% + 1px);
          left: -1px;
        }
      }
    }
    .vxe-gantt-view--scroll-y-handle-appearance {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }
    &.sy-pos--left {
      .vxe-gantt-view--scroll-y-handle-appearance {
        left: 0;
        border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
      }
    }
    &.sy-pos--right {
      .vxe-gantt-view--scroll-y-handle-appearance {
        right: 0;
        width: calc(100% + var(--vxe-ui-table-border-width));
        border-left: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
      }
    }
  }
  &.border--default,
  &.border--inner {
    .vxe-gantt-view--header-column,
    .vxe-gantt-view--body-column,
    .vxe-gantt-view--footer-column {
      background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
      background-repeat: no-repeat;
      background-size: 100% var(--vxe-ui-table-border-width);
      background-position: right bottom;
    }
  }
  &.border--default,
  &.border--full,
  &.border--inner {
    .vxe-gantt-view--footer-wrapper {
      border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
    }
  }
  &.border--inner {
    .vxe-gantt--border-line {
      border-width: 0 0 1px 0;
    }
  }
  &.border--none {
    .vxe-gantt--border-line {
      display: none;
    }
  }
}

/*分割条*/
.vxe-gantt--view-split-bar {
  position: relative;
  user-select: none;
}
.vxe-gantt--view-split-bar-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.vxe-gantt--view-split-bar-btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  & > div {
    margin-top: 1em;
    &:first-child {
      margin-top: 0;
    }
  }
}
.vxe-gantt--view-split-bar-left-btn,
.vxe-gantt--view-split-bar-right-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: var(--vxe-ui-gantt-view-split-bar-height);
  width: var(--vxe-ui-gantt-view-split-bar-width);
  color: var(--vxe-ui-layout-background-color);
  border-radius: var(--vxe-ui-base-border-radius);
  background-color: var(--vxe-ui-gantt-view-handle-background-color);
  border: 1px solid var(--vxe-ui-input-border-color);
  pointer-events: all;
  cursor: pointer;
  user-select: none;
  @include baseMixin.createAnimationTransition(all, 0.1s);
  &:hover {
    color: #ffffff;
    background-color: var(--vxe-ui-font-primary-color);
  }
  &:active {
    transform: scale(0.9);
  }
  i {
    font-size: 0.5em;
  }
}
.vxe-gantt--resizable-split-tip {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  z-index: 7;
  pointer-events: none;
  user-select: none;
  cursor: col-resize;
  &:before {
    content: "";
    display: block;
    height: 100%;
    background-color: var(--vxe-ui-table-resizable-drag-line-color);
  }
}
.vxe-gantt--resizable-split-tip-number {
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
  pointer-events: none;
}
.vxe-gantt--resizable-split-number-left,
.vxe-gantt--resizable-split-number-right {
  position: absolute;
  padding: 0.25em 0.25em;
  font-size: 12px;
  border-radius: var(--vxe-ui-border-radius);
  white-space: nowrap;
  color: #ffffff;
  background-color: var(--vxe-ui-table-resizable-drag-line-color);
}
.vxe-gantt--resizable-split-number-left {
  right: 0;
}
.vxe-gantt--resizable-split-number-right {
  left: 1px;
}

/*滚动条*/
.vxe-gantt {
  &.is--loading {
    & > .vxe-gantt-view--scroll-x-virtual {
      visibility: hidden;
    }
    & > .vxe-gantt-view--layout-wrapper {
      & > .vxe-gantt-view--scroll-y-virtual {
        visibility: hidden;
      }
    }
  }
  .vxe-gantt-view--scroll-x-virtual {
    height: 0;
  }
  .vxe-gantt-view--scroll-y-virtual {
    width: 0;
  }
  .vxe-gantt-view--scroll-x-virtual,
  .vxe-gantt-view--scroll-y-virtual {
    visibility: hidden;
    position: relative;
    flex-shrink: 0;
    z-index: 7;
  }
  .vxe-gantt-view--scroll-x-handle,
  .vxe-gantt-view--scroll-y-handle,
  .vxe-gantt-view--scroll-x-wrapper,
  .vxe-gantt-view--scroll-y-wrapper,
  .vxe-gantt-view--scroll-y-top-corner,
  .vxe-gantt-view--scroll-y-bottom-corner,
  .vxe-gantt-view--scroll-x-left-corner,
  .vxe-gantt-view--scroll-x-right-corner {
    position: absolute;
  }
  .vxe-gantt-view--scroll-x-handle,
  .vxe-gantt-view--scroll-x-wrapper {
    width: 100%;
    left: 0;
    bottom: 0;
  }
  .vxe-gantt-view--scroll-x-handle {
    overflow-y: hidden;
    overflow-x: scroll;
    height: 18px;
  }
  .vxe-gantt-view--scroll-x-wrapper {
    height: 100%;
  }
  .vxe-gantt-view--scroll-y-handle,
  .vxe-gantt-view--scroll-y-wrapper {
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
  }
  .vxe-gantt-view--scroll-y-handle {
    overflow-y: scroll;
    overflow-x: hidden;
    width: 18px;
    height: 100%;
  }
  .vxe-gantt-view--scroll-x-space {
    height: 1px;
  }
  .vxe-gantt-view--scroll-y-space {
    width: 1px;
  }
  .vxe-gantt-view--scroll-x-left-corner,
  .vxe-gantt-view--scroll-x-right-corner,
  .vxe-gantt-view--scroll-y-top-corner,
  .vxe-gantt-view--scroll-y-bottom-corner {
    display: none;
    position: absolute;
  }
  .vxe-gantt-view--scroll-x-left-corner,
  .vxe-gantt-view--scroll-x-right-corner {
    bottom: 0;
    width: 0;
    height: 100%;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      border-width: var(--vxe-ui-table-border-width);
      border-style: solid;
      border-color: var(--vxe-ui-table-border-color);
    }
  }
  .vxe-gantt-view--scroll-x-left-corner {
    left: 0;
  }
  .vxe-gantt-view--scroll-x-right-corner {
    right: 0;
  }
  &.sy-pos--right {
    .vxe-gantt-view--scroll-x-right-corner {
      right: 1px;
      &::before {
        border-right: 0;
      }
    }
  }
  &.sx-pos--bottom {
    .vxe-gantt-view--scroll-x-right-corner {
      bottom: 1px;
      &::before {
        border-bottom: 0;
      }
    }
  }
  .vxe-gantt-view--scroll-y-top-corner {
    background-color: var(--vxe-ui-table-header-background-color);
  }
  .vxe-gantt-view--scroll-y-top-corner,
  .vxe-gantt-view--scroll-y-bottom-corner {
    top: 0;
    right: 0;
    width: 100%;
    height: 0;
  }
  .vxe-gantt-view--scroll-y-bottom-corner {
    margin-top: -1px;
  }
}

.vxe-gantt-view--layout-wrapper {
  display: flex;
  flex-direction: row;
  background-color: var(--vxe-ui-layout-background-color)
}
.vxe-gantt-view--viewport-wrapper {
  position: relative;
  overflow: hidden;
  flex-grow: 1;
}

.vxe-gantt-view--render-vars {
  width: 0;
  height: 0;
  overflow: hidden;
}
.vxe-gantt-view--column-info {
  width: var(--vxe-ui-gantt-view-default-cell-width);
}

// 任务视图
.vxe-gantt-view {
  flex-grow: 1;
  overflow: hidden;
  .vxe-body--x-space {
    width: 100%;
    height: 1px;
    margin-bottom: -1px;
  }
  .vxe-body--y-space {
    width: 0;
    float: left;
  }
}
.vxe-gantt-view--header-table,
.vxe-gantt-view--body-table {
  border: 0;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  col {
    width: var(--vxe-ui-gantt-view-default-cell-width);
  }
}
.vxe-gantt-view--body-table {
  user-select: none;
}
.vxe-gantt-view--header-wrapper {
  background-color: var(--vxe-ui-table-header-background-color);
}
.vxe-gantt-view--footer-wrapper {
  margin-top: calc(var(--vxe-ui-table-border-width) * -1);
  background-color: var(--vxe-ui-table-footer-background-color);
}
.vxe-gantt-view--header-wrapper,
.vxe-gantt-view--body-wrapper {
  overflow: hidden;
}
.vxe-gantt-view--header-inner-wrapper {
  overflow-y: hidden;
  overflow-x: scroll;
}
.vxe-gantt-view--body-inner-wrapper {
  overflow-y: scroll;
  overflow-x: scroll;
}
.vxe-gantt-view--header-inner-wrapper,
.vxe-gantt-view--body-inner-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }
}
.vxe-gantt-view--header-column {
  text-align: center;
  font-size: 1em;
  height: var(--vxe-ui-gantt-view-cell-height, var(--vxe-ui-table-row-line-height));
  &.is--now {
    color: var(--vxe-ui-gantt-view-task-now-line-color, var(--vxe-ui-font-primary-color));
  }
}
.vxe-gantt-view--header-column,
.vxe-gantt-view--body-column,
.vxe-gantt-view--footer-column {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vxe-gantt-view--body-row {
  &.row--pending {
    & > .vxe-gantt-view--body-column {
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 0;
        border-bottom: 1px solid var(--vxe-ui-table-validate-error-color);
        z-index: 1;
      }
    }
  }
}

.vxe-gantt-view--chart-now-line {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  &::before {
    content: "";
    display: block;
    width: var(--vxe-ui-gantt-view-task-now-line-width, 1px);
    height: 100%;
    background-color: var(--vxe-ui-gantt-view-task-now-line-background-color, var(--vxe-ui-font-primary-color));
  }
}

// 行高亮
.vxe-gantt-view--body-row {
  &.row--stripe {
    background-color: var(--vxe-ui-table-row-striped-background-color);
  }
  &.row--radio {
    background-color: var(--vxe-ui-table-row-radio-checked-background-color);
  }
  &.row--checked {
    background-color: var(--vxe-ui-table-row-checkbox-checked-background-color);
  }
  &.row--current {
    background-color: var(--vxe-ui-table-row-current-background-color);
  }
  &.row--hover {
    background-color: var(--vxe-ui-table-row-hover-background-color);
    &.row--stripe {
      background-color: var(--vxe-ui-table-row-hover-striped-background-color);
    }
    &.row--radio {
      background-color: var(--vxe-ui-table-row-hover-radio-checked-background-color);
    }
    &.row--checked {
      background-color: var(--vxe-ui-table-row-hover-checkbox-checked-background-color);
    }
    &.row--current {
      background-color: var(--vxe-ui-table-row-hover-current-background-color);
    }
  }
}

/*行拖拽*/
.vxe-gantt-view--body-row {
  &.row--drag-move {
    transition: transform 0.5s ease;
  }
  &.row--drag-origin {
    & > .vxe-gantt-view--body-column {
      opacity: 0.3;
    }
  }
}
.vxe-gantt-view--body-column {
  .vxe-gantt-view-cell--row-resizable {
    position: absolute;
    left: 0;
    bottom: -0.4em;
    height: 0.8em;
    width: 100%;
    text-align: center;
    z-index: 1;
    cursor: row-resize;
  }
}
.vxe-gantt-view--body-row {
  &:last-child {
    .vxe-gantt-view--body-column {
      .vxe-gantt-view-cell--row-resizable {
        height: 0.4em;
        bottom: -0px;
      }
    }
  }
}

.vxe-gantt {
  font-size: var(--vxe-ui-font-size-default);
  &.size--medium {
    font-size: var(--vxe-ui-font-size-medium);
  }
  &.size--small {
    font-size: var(--vxe-ui-font-size-small);
  }
  &.size--mini {
    font-size: var(--vxe-ui-font-size-mini);
  }
}