.dice-cp {
  &.dice-cp-table {
    // cover Progress percent number fix one decimal;
    .ant-progress-show-info .ant-progress-outer {
      margin-right: calc(-2em - 24px) !important;
      padding-right: calc(2em + 18px) !important;
    }

    .table-render-twt {
      .twt-text {
        display: flex;
        flex-grow: 1;
        overflow: hidden;
        line-height: 25px;
      }
    }

    .string-list-link {
      color: $color-primary;
      cursor: pointer;
    }

    .dice-config-table-member-selector {
      .results {
        padding: 0;
        min-height: 30px;
        border: 0;

        &:hover {
          border: 0;
          box-shadow: unset;
        }
      }

      .values,
      .value-item {
        width: 100%;
      }
    }

    .dice-config-table-date-picker {
      position: relative;

      .date-picker-display-tip {
        position: absolute;
        left: 0;
      }

      .date-picker {
        z-index: 2;
      }

      &.with-display-tip {
        .date-picker {
          opacity: 0;
        }

        .date-picker-display-tip {
          opacity: 1;
        }

        &:hover {
          .date-picker {
            opacity: 1;
          }

          .date-picker-display-tip {
            opacity: 0;
          }
        }
      }

      .ant-input {
        border: 1px solid transparent;
      }

      .ant-calendar-picker-icon {
        visibility: hidden;
      }

      &:hover {
        .ant-calendar-picker-icon {
          visibility: visible;
        }
      }
    }
  }

  .dice-cp-table-batch-operations {
    .ant-dropdown-menu {
      background-color: rgba($color-default, 0.96);
      color: $white;
      box-shadow: 0 1px 4px 0 rgba($color-default, 0.16);
    }

    .ant-dropdown-menu-item:hover {
      background-color: rgba($white, 0.08);
    }

    .ant-dropdown-menu-item,
    .ant-dropdown-menu-submenu-title {
      color: $color-white-9;

      &:hover {
        color: $white;
      }
    }

    .disabled {
      color: $color-white-9;
    }
  }

  td:hover .text-hover {
    color: $color-purple-highlight;
  }

  &.no-border {
    td {
      border: none;
    }
  }

  &.light-card {
    color: $lightgray;
    background-color: $color-active-bg;

    .ant-table {
      background-color: $color-active-bg;

      th,
      td {
        line-height: 28px;
      }
    }
  }

  .dropdown-field-selector {
    .arrow-icon {
      color: $color-text-icon;
    }

    &:hover {
      .arrow-icon {
        color: $color-primary;
      }
    }
  }

  .dice-config-table-slide-wrap {
    position: relative;

    &-item {
      display: flex;
      padding: $p8 0;

      & > div {
        height: 12px;
      }

      .slide-actual-time {
        background: rgba($blue, 1);
      }

      .slide-rest-time {
        background: rgba($gray, 0.3);
      }

      .slide-delay-time {
        background: rgba($red, 1);
      }
    }
  }

  .gantt-date-title {
    height: 50px;

    &::after {
      position: absolute;
      right: 0;
      width: 1px;
      height: 10000px;
      background-color: rgba(0, 0, 0, 0.1);
      content: '';
    }

    .month-list {
      display: flex;
      line-height: 25px;
      border: none !important;
    }

    .date-range {
      box-sizing: content-box;
      &:last-child {
        border-right: 1px solid $color-border;
      }
    }

    .month {
      line-height: 25px;
      text-align: center;
      border-bottom: 1px solid $color-border;
      border-left: 1px solid $color-border;

      &:last-child {
        border-right: 1px solid $color-border;
      }
    }

    .day {
      position: relative;
      display: inline-block;
      width: 32px;
      line-height: 25px;
      text-align: center;

      &::before {
        position: absolute;
        left: 0;
        width: 1px;
        height: 10000px;
        background-color: $color-border;
        content: '';
      }

      &::after {
        position: absolute;
        right: 0;
        width: 100%;
        height: 10000px;
        content: '';
      }

      &.rest-day::after {
        background: repeating-linear-gradient(45deg, rgba(114, 82, 82, 0.09), transparent 2px);
      }

      &.today::after {
        background-color: $color-active-bg;
      }
    }
  }

  .task-gantt-table {
    overflow: hidden;

    .ant-table {
      .ant-table-thead {
        > tr > th {
          &:last-child {
            padding: 0;
            overflow: visible;
          }
        }
      }

      .ant-table-tbody {
        overflow-y: hidden;

        > tr > td {
          padding: 0 8px;

          &:last-child {
            padding: 0;
            overflow: hidden;
          }
        }
      }
    }

    .ant-input {
      padding: 4px;
    }

    .ant-picker,
    .ant-select-selection,
    .load-more-selector > .results,
    .ant-input-affix-wrapper .ant-input:not(:last-child),
    .ant-input-group > .ant-input:first-child {
      background: transparent;
      border-color: transparent;
    }

    .ant-select-selection:hover,
    .load-more-selector:hover > .results,
    .ant-input-affix-wrapper .ant-input:not(:last-child):hover {
      border-color: $color-primary;
    }
  }
}

.dice-config-table-member-field-selector {
  .arrow-icon {
    color: $color-text-icon;
  }

  &:hover {
    .arrow-icon {
      color: $color-primary;
    }
  }
}

.dc-table-date-picker {
  &.result-right {
    .ant-calendar-input {
      text-align: right;
    }
  }
}

.dice-cp-text-tag {
  .extra-tags {
    height: 20px;
    color: $white;
    font-size: 12px;
    line-height: 20px;
    background-color: red;
    border-radius: $radius;
  }
}

.dice-cp-level-content {
  .level-1-content {
    color: $color-text;
    font-weight: 500;
  }

  .level-2-content {
  }
}

.dice-cp-table-head-icon {
  &.normal {
    width: 28px;
    height: 28px;
  }
  &.small {
    width: 16px;
    height: 16px;
  }
}

.dice-cp-table-bg-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .bg-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 100%;
    background: linear-gradient(to right, transparentize($color-primary, 0.98), transparentize($color-primary, 0.8));
  }

  .bg-progress-text {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
