@import '../custom.less';

@milestone-prefix-cls: ~'@{css-prefix}milestone';
@svg-prefix-cls: ~'@{css-prefix}svg';

.@{milestone-prefix-cls} {
  @apply pt-10;
  @apply overflow-hidden;

  & &__node {
    @apply block;
    @apply float-left;

    &.node-status-completed.is-solid {
      .@{milestone-prefix-cls}__icon {
        @apply !bg-color-brand;
        &.status-completed {
          .@{svg-prefix-cls} {
            @apply bg-color-brand;
            @apply fill-color-icon-inverse;
          }
        }
      }

      &:hover {
        .@{milestone-prefix-cls}__icon {
          @apply !bg-color-brand-hover;
          &.@{milestone-prefix-cls}__icon-custom {
            &.status-completed {
              .@{svg-prefix-cls} {
                @apply !bg-color-brand-hover;
                @apply fill-color-icon-inverse;
              }
            }
          }
        }
      }

      &:active {
        .@{milestone-prefix-cls}__icon {
          @apply !bg-color-brand-active;
          &.@{milestone-prefix-cls}__icon-custom {
            &.status-completed {
              .@{svg-prefix-cls} {
                @apply !bg-color-brand-active;
                @apply fill-color-icon-inverse;
              }
            }
          }
        }
      }
    }

    .iconfix {
      @apply text-xl;
    }
  }

  & &__icon {
    @apply bg-color-bg-1;
    @apply w-5;
    @apply h-5;
    @apply leading-5;
    @apply relative;
    @apply text-xs;
    @apply text-center;
    left: ~'calc(50% - theme(spacing[2.5]))';
    @apply top-1;
    @apply rounded-full;
    @apply text-color-text-inverse;
    @apply cursor-pointer;
    @apply ~'z-[15]';

    &.is-completed {
      @apply border-2 border-solid;

      .@{svg-prefix-cls} {
        @apply fill-color-brand;
        @apply align-baseline;
      }
    }
  }

  & &__line {
    @apply h-1;
    @apply ~'left-1/2';
    @apply -top-2;
    @apply relative; // 里程碑线条不区分状态
    @apply bg-color-bg-2;
  }

  & &__line-end {
    @apply w-0;
  }

  & &__description {
    @apply leading-5;
    @apply mt-2;
    @apply relative;
    @apply overflow-hidden;
    @apply text-center;
  }

  & &__description-name {
    @apply w-full;
    @apply text-xs;
    @apply text-color-text-primary;
    @apply float-left;
    @apply leading-4;
  }

  & &__description-status {
    @apply text-color-text-secondary;
    @apply text-xs;
    @apply float-left;
    @apply w-full;
  }

  & &__flag-tip {
    @apply fixed;
    @apply ~'py-0.5' px-1;
    @apply leading-5;
    @apply bg-color-border;
    @apply rounded-sm;
    @apply border border-solid border-color-border;
    @apply text-center;
    word-wrap: break-word;

    &::before {
      @apply absolute;
      @apply w-0;
      @apply h-0;
      @apply border-solid;
      @apply border border-solid;
      @apply border-t-8 border-r-8 border-b-0 border-l-8;
      @apply border-y-color-border border-x-transparent;
      @apply content-[''];
      left: ~'calc(50% - theme(spacing.1))';
      @apply ~'-bottom-1.5';
    }
  }

  & &__flag {
    @apply absolute;
    left: ~'calc(50% - theme(spacing.8))';
    @apply bottom-2;
    @apply w-16;
    @apply text-center;
    @apply ~'z-[1]';

    &:hover {
      @apply ~'z-[2]';
    }
  }

  & &__flag-content {
    @apply w-16;
    @apply h-8;
    @apply p-0;
    @apply ~'leading-5.5';
    @apply text-sm;
    @apply rounded;
    @apply text-color-text-inverse;
    @apply bg-color-bg-3;
    @apply cursor-pointer;
    @apply align-middle;
    @apply table-cell;

    p {
      @apply text-color-text-inverse;
      @apply h-12;
      @apply text-xs;
      @apply whitespace-nowrap;
      @apply text-ellipsis;
      @apply overflow-hidden;
      @apply py-0 px-1;
      @apply m-0;
      @apply box-border;
    }
  }

  & &__flag-line {
    @apply h-8;
    @apply w-px;
    @apply ~'ml-[50%]';
    @apply bg-color-bg-3;
  }

  & &__dot {
    @apply block;
    @apply bg-color-bg-1;
    @apply border-solid border;
    @apply rounded-full;
    @apply ~'w-[calc(theme(spacing[2.5])/2)]';
    @apply ~'h-[calc(theme(spacing[2.5])/2)]';
    @apply relative;
    @apply -bottom-8;
    @apply ~'right-0.5';
  }
}

.@{milestone-prefix-cls} {
  @apply pt-12;

  .@{milestone-prefix-cls}__line {
    @apply h-px;
    @apply bg-color-text-disabled;

    &.@{milestone-prefix-cls}__line-completed-custom {
      @apply !bg-color-text-primary;
    }
  }

  .@{milestone-prefix-cls}__icon {
    &.@{milestone-prefix-cls}__icon-custom {
      box-shadow: none !important;
      @apply w-6;
      @apply h-6;
      @apply leading-6;
      @apply box-border;
      @apply border border-solid border-color-border-disabled;
      @apply !text-color-text-disabled;
      @apply !bg-color-bg-1;

      .tiny-svg {
        @apply fill-color-text-disabled;
        @apply text-base;
        @apply relative;
        @apply ~'top-0.5';
        @apply align-baseline;
      }

      & > span {
        @apply relative;
        @apply text-sm;
        @apply -top-px;
      }

      &.status-completed {
        @apply border-color-border-focus;

        .tiny-svg {
          @apply fill-color-brand;
        }
      }

      &.status-doing {
        @apply border-color-border-focus;
        @apply !bg-color-brand;
        @apply !text-color-text-inverse;

        .tiny-svg {
          @apply fill-color-icon-inverse;
        }
      }

      &.status-back {
        @apply border-color-error;
        @apply !bg-color-error;
        @apply !text-color-text-inverse;

        .tiny-svg {
          @apply fill-color-icon-inverse;
        }
      }
    }

    &.@{milestone-prefix-cls}__icon-custom.is-completed {
      @apply border-color-brand;

      .@{svg-prefix-cls} {
        @apply fill-color-brand;
      }
    }
  }

  .@{milestone-prefix-cls}__node {
    .@{milestone-prefix-cls}__description {
      @apply relative;
      @apply top-1;
      @apply mt-0;
      @apply pt-3;
      @apply pb-2;

      .@{milestone-prefix-cls}__description-status {
        @apply mt-2;
      }

      .@{milestone-prefix-cls}__description-name,
      .@{milestone-prefix-cls}__description-status {
        @apply text-color-text-disabled;
      }

      .@{milestone-prefix-cls}__description-name {
        @apply text-sm;
        @apply font-bold;
        @apply ~'leading-5.5';
      }

      .@{milestone-prefix-cls}__description-status {
        @apply text-xs;
      }
    }

    .top-slot-class {
      @apply text-color-text-disabled;
      @apply !ml-0;
      @apply text-xs;
      @apply relative;
      top: -5px;
    }

    &.node-status-completed {
      .@{milestone-prefix-cls}__description {
        .@{milestone-prefix-cls}__description-name {
          @apply text-color-text-primary;
        }

        .@{milestone-prefix-cls}__description-status {
          @apply text-color-text-secondary;
        }
      }

      .top-slot-class {
        @apply text-color-text-secondary;
      }

      &:hover {
        .@{milestone-prefix-cls}__description {
          .@{milestone-prefix-cls}__description-name {
            @apply text-color-brand-hover;
          }

          .@{milestone-prefix-cls}__description-status {
            @apply text-color-brand-hover;
          }
        }

        .top-slot-class {
          @apply text-color-brand-hover;
        }

        .@{milestone-prefix-cls}__icon {
          &.@{milestone-prefix-cls}__icon-custom {
            &.status-completed {
              @apply border-color-brand-hover;

              .tiny-svg {
                @apply fill-color-icon-hover;
              }
            }
          }
        }
      }

      &:active {
        .@{milestone-prefix-cls}__description {
          .@{milestone-prefix-cls}__description-name {
            @apply text-color-brand-active;
          }

          .@{milestone-prefix-cls}__description-status {
            @apply text-color-brand-active;
          }
        }

        .top-slot-class {
          @apply text-color-brand-active;
        }

        .@{milestone-prefix-cls}__icon {
          &.@{milestone-prefix-cls}__icon-custom {
            &.status-completed {
              @apply border-color-brand-active;

              .tiny-svg {
                @apply fill-color-icon-active;
              }
            }
          }
        }
      }
    }

    &.node-status-doing {
      .@{milestone-prefix-cls}__description {
        .@{milestone-prefix-cls}__description-name,
        .@{milestone-prefix-cls}__description-status {
          @apply text-color-brand;
        }
      }

      .top-slot-class {
        @apply text-color-brand;
      }
    }

    &.node-status-back {
      .@{milestone-prefix-cls}__description {
        .@{milestone-prefix-cls}__description-name,
        .@{milestone-prefix-cls}__description-status {
          @apply text-color-error;
        }
      }

      .top-slot-class {
        @apply text-color-error;
      }
    }
  }

  .@{milestone-prefix-cls}__flag {
    @apply ~'bottom-1.5';

    .@{milestone-prefix-cls}__flag-content {
      @apply !bg-color-bg-1;
      @apply border border-solid border-color-border-hover;
      @apply text-color-text-primary;
      @apply rounded;
      @apply h-auto;
      @apply p-2;
      @apply relative;

      p {
        @apply text-color-text-secondary;
        @apply text-xs;
        @apply leading-4;
        @apply p-0;
        @apply h-4;

        & + p {
          @apply mt-2;
        }
      }
    }

    .@{milestone-prefix-cls}__flag-line {
      @apply h-8;
      @apply !bg-color-text-primary;

      .@{milestone-prefix-cls}__dot {
        @apply !border-color-text-primary;
      }
    }

    &.flag-status-back {
      .@{milestone-prefix-cls}__flag-content {
        @apply border-color-error;
        @apply text-color-error;
      }

      .@{milestone-prefix-cls}__flag-content p {
        @apply text-color-error;
      }

      .@{milestone-prefix-cls}__flag-line {
        @apply !bg-color-error;

        .@{milestone-prefix-cls}__dot {
          @apply !border-color-error;
        }
      }
    }
  }
}
