@import '../custom.less';

@steps-prefix-cls: ~'@{css-prefix}steps';
@steps-senior-prefix-cls: ~'@{css-prefix}steps-senior';
@steps-line-prefix-cls: ~'@{css-prefix}steps-line';
@default-color: theme('colors.color.text.primary');
@active-color: theme('colors.color.brand.DEFAULT');
@disabled-color: theme('colors.color.text.disabled');

.@{steps-senior-prefix-cls} {
  @apply w-full;
  @apply flex;
  @apply text-color-text-primary;
  @apply text-xs;
  @apply leading-4;

  .@{steps-prefix-cls}-slide-bar {
    @apply w-full;
    @apply flex;

    .slide-main {
      @apply flex-auto;
      @apply overflow-auto;

      > div {
        @apply flex;
      }

      &::-webkit-scrollbar {
        @apply w-0;
        @apply h-0;
      }
    }

    .more-button {
      @apply hidden;
      @apply flex-none;
      @apply h-8;
      @apply cursor-pointer;
      @apply items-center;
      @apply select-none;

      &.display-flex {
        @apply flex;
      }

      .content {
        @apply w-4;
        @apply h-full;
        @apply flex;
        @apply items-center;
        @apply justify-center;
        @apply bg-color-bg-2;
      }

      .icon {
        @apply w-3;
        @apply h-3;
      }

      &.left .content {
        @apply ~'mr-1.5';
      }

      &.right .content {
        @apply ~'ml-1.5';
      }
    }
  }

  .more-button-con {
    @apply w-4;
    @apply h-full;
    @apply flex;
    @apply items-center;
    @apply justify-center;
    @apply ~'mr-1.5';
    @apply bg-color-bg-2;
    @apply text-color-text-disabled;

    &.left {
      @apply ~'mr-1.5';
    }

    &.right {
      @apply ~'ml-1.5';
    }

    &.bar-visible {
      @apply text-color-text-primary;

      &:hover {
        @apply bg-color-info-secondary-subtle;
        @apply text-color-brand;
      }
    }

    .icon {
      @apply w-3;
      @apply h-3;
      @apply fill-current;
      background: transparent;
    }
  }

  .@{steps-prefix-cls}-block {
    @apply h-8;
    @apply flex;
    @apply rounded-sm;
    @apply relative;
    @apply cursor-pointer;
    @apply text-color-text-secondary;
    @apply my-0 mx-px;
    @apply overflow-hidden;
    @apply bg-color-bg-3;

    .right-arrow.hide {
      @apply hidden;
    }

    &:hover {
      @apply bg-color-none-disabled;
    }

    &.active {
      @apply bg-color-brand;

      &:hover {
        @apply bg-color-brand;
      }
    }

    &.not-flex {
      @apply w-44;
    }

    &.done {
      @apply text-color-text-primary;
      @apply bg-color-info-primary-subtler;

      &:hover {
        @apply bg-color-info-secondary-disabled;
      }

      &.active {
        @apply bg-color-brand;

        &:hover {
          @apply bg-color-brand;
        }
      }
    }

    &.doing {
      @apply text-color-text-primary;
      @apply bg-color-info-primary-subtler;

      &:hover {
        @apply text-color-text-inverse;
        @apply bg-color-brand-hover;
      }

      &.active {
        @apply bg-color-brand;

        &:hover {
          @apply bg-color-brand;
        }
      }
    }

    &.fault {
      @apply text-color-error;
      @apply bg-color-error-subtler;

      &:hover {
        @apply bg-color-error-disabled;
      }

      &.active {
        @apply bg-color-error;

        &:hover {
          @apply bg-color-error;
        }
      }
    }

    &.disabled {
      @apply text-color-text-disabled;

      &:hover {
        @apply bg-color-bg-2;
      }

      &.active {
        @apply text-color-text-disabled;
        @apply bg-color-bg-2;

        &:hover {
          @apply bg-color-bg-2;
        }
      }
    }

    .arrow {
      @apply h-8;
      @apply ~'w-1.5';
      @apply absolute;
      @apply border-color-text-inverse;
      @apply border-r-0;
      @apply border-solid;
      @apply box-border;
      border-top-width: var(--aui-spacing-4, 1rem);
      border-bottom-width: var(--aui-spacing-4, 1rem);
      border-left-width: var(--aui-spacing-1_5, 0.375rem);
    }

    .left-arrow {
      @apply left-0;
      @apply border-t-transparent;
      @apply border-b-transparent;
    }

    .left-arrow.hide {
      @apply hidden;
    }

    .right-arrow {
      @apply right-0;
      @apply border-l-transparent;
    }
  }

  .@{steps-prefix-cls}-content {
    @apply text-sm;
    @apply flex-auto;
    @apply flex;
    @apply max-w-full;
    @apply items-center;
    @apply justify-center;
    @apply py-0 px-6;
    @apply overflow-hidden;
    @apply h-8;

    &:hover .@{steps-prefix-cls}-icon.doing {
      @apply bg-color-bg-1;
      @apply text-color-brand;
    }

    .@{steps-prefix-cls}-icon {
      @apply w-4;
      @apply h-4;
      @apply flex;
      @apply flex-none;
      @apply items-center;
      @apply justify-center;
      @apply rounded-full;
      @apply mr-2;
      @apply bg-color-text-disabled;
      @apply text-color-text-inverse;

      &.done,
      &.doing {
        @apply bg-color-brand;
        @apply text-color-text-inverse;
      }

      &.active:not(.disabled) {
        @apply text-color-brand;
        @apply bg-color-bg-1;
      }

      &.fault {
        @apply bg-color-error;
        @apply text-color-text-inverse;

        &.active {
          @apply text-color-error;
          @apply bg-color-bg-1;
        }
      }

      .icon {
        @apply ~'w-2.5';
        @apply ~'h-2.5';
        @apply fill-current;
        background: transparent;
      }
    }

    .@{steps-prefix-cls}-prefixslot {
      @apply flex-none;

      .prefix {
        @apply -mr-2;
      }
    }

    .@{steps-prefix-cls}-text {
      @apply flex-auto;
      @apply max-w-full;
      @apply truncate;

      &.active:not(.disabled) {
        @apply text-color-text-inverse;
      }

      .@{steps-prefix-cls}-text-name {
        @apply truncate;
      }

      .@{steps-prefix-cls}-text-description {
        @apply text-xs;
        @apply truncate;
      }

      &.content-center {
        @apply flex-none;
      }
    }
  }

  &.large {
    .more-button {
      @apply h-12;
    }

    .@{steps-prefix-cls}-block {
      @apply h-12;

      .arrow {
        @apply h-12;
        width: 9px;
        @apply box-border;
        border-top-width: var(--aui-spacing-6, 1.5rem);
        border-bottom-width: var(--aui-spacing-6, 1.5rem);
        border-left-width: var(--aui-spacing-2, 0.5625rem);
      }

      .@{steps-prefix-cls}-content {
        @apply h-12;

        .@{steps-prefix-cls}-icon {
          @apply w-6;
          @apply h-6;
          @apply mr-3;

          .icon {
            @apply ~'w-3.5';
            @apply ~'h-3.5';
          }
        }
      }

      &:not(.active):not(:hover).done,
      &:not(.active):not(:hover).doing {
        .@{steps-prefix-cls}-text-description {
          @apply text-color-text-secondary;
        }
      }
    }
  }
}

.@{steps-line-prefix-cls} {
  @apply flex;
  @apply text-color-text-primary;

  .@{steps-prefix-cls}-left {
    @apply flex-1;
    @apply flex;
    @apply flex-col;
    @apply cursor-pointer;
    @apply max-w-xs;
    @apply mr-4;

    &.vertical {
      @apply text-center;
      @apply mr-0;
      @apply max-w-none;
    }

    .left-line {
      @apply border-t;
      @apply flex-auto;
      @apply opacity-0;

      &.not-vertical {
        @apply ~"min-w-[theme(spacing.6)]";
        @apply hidden;
        @apply mr-4;
      }
    }

    .right-line {
      @apply border-t;
      @apply flex-auto;

      &.not-vertical {
        @apply ~"min-w-[theme(spacing.6)]";
        @apply mr-4;
      }
    }
  }

  .item-number {
    @apply w-full;
    @apply h-full;
    @apply flex;
    @apply items-center;
    @apply justify-center;
    @apply rounded-full;
    @apply border border-color-brand;
    @apply text-color-brand;
    @apply bg-color-bg-1;
    @apply relative;
    @apply z-10;
  }

  .item-circle {
    @apply w-6;
    @apply h-6;
    @apply flex-none;
    @apply rounded-full;
    @apply border border-color-brand;
    @apply bg-color-bg-1;
    @apply font-normal;
    @apply absolute;
  }

  .@{steps-prefix-cls}-icon {
    @apply w-6;
    @apply h-6;
    @apply flex-none;
    @apply flex;
    @apply relative;
    @apply z-10;
    // Tiny新增，修复line模式样式错误问题
    .icon {
      @apply left-0;
    }
  }

  .@{steps-prefix-cls}-main {
    @apply flex;
    @apply items-center;
    @apply relative;

    .line.line-brand {
      @apply border-color-brand;
    }
  }

  .@{steps-prefix-cls}-block {
    @apply flex-1;
    @apply flex;
    @apply flex-col;
    @apply cursor-pointer;
    @apply text-center;

    &.not-vertical {
      @apply ~"min-w-[theme(spacing.32)]";
      @apply max-w-xs;
      @apply mr-4;
      @apply text-left;
    }

    .@{steps-prefix-cls}-icon {
      @apply w-6;
      @apply h-6;
      @apply flex;
      @apply flex-none;
      @apply items-center;
      @apply justify-center;
      @apply rounded-full;
      @apply border border-current;
      @apply bg-color-bg-3;
      @apply text-color-text-placeholder;
      @apply text-sm;

      &:hover {
        @apply bg-color-none-disabled;
      }

      &.active {
        @apply bg-color-text-placeholder;
        @apply text-color-text-inverse;
      }

      &.active.fault {
        @apply text-color-error;
        @apply border border-color-error;
        @apply bg-color-error-subtler;
      }

      &.active.disabled {
        @apply bg-color-text-disabled;
        @apply text-color-text-inverse;
        @apply border-color-border;
      }

      .icon-finish {
        @apply fill-color-brand;
        background-color: transparent;

        &.active {
          @apply fill-color-bg-1;
        }
      }

      .icon-warn {
        @apply fill-color-error;
        background-color: transparent;
      }
    }

    &.flex-non {
      @apply flex-none;
    }

    &.normal {
      &:hover {
        @apply text-color-brand-hover;
      }
    }

    &.active {
      @apply text-color-brand;

      .description:not(.disabled) {
        @apply text-color-brand;

        &.fault {
          @apply text-color-error;
        }
      }
    }

    &.disabled {
      @apply text-color-text-disabled;
    }

    &.fault {
      @apply text-color-error;

      .@{steps-prefix-cls}-icon {
        @apply text-color-error;
        @apply border-color-error;
        @apply bg-color-bg-1;

        &:hover {
          @apply text-color-error;
          @apply border border-color-error;
          @apply bg-color-error-subtler;
        }
      }
    }

    &.doing .@{steps-prefix-cls}-icon {
      @apply border border-current;
      @apply text-color-brand;
      @apply bg-color-info-primary-subtler;

      &:hover {
        @apply border-none;
        @apply bg-color-brand-hover;
        @apply text-color-text-inverse;
      }

      &.active {
        @apply border-none;
        @apply bg-color-brand;
        @apply text-color-text-inverse;
      }
    }

    &.done .@{steps-prefix-cls}-icon {
      @apply bg-color-info-primary-subtler;
      @apply border-color-brand;

      &:hover {
        @apply border-color-brand-hover;
      }

      &.active {
        @apply border-color-brand;
        @apply bg-color-brand;
      }
    }

    .@{steps-prefix-cls}-icon.disabled {
      @apply text-color-text-disabled;
      @apply bg-color-bg-3;
      @apply border-color-border-separator;
    }

    .title {
      @apply text-sm;
      @apply ml-2;
      @apply font-normal;
      @apply truncate;
    }

    .line {
      @apply border-t border-t-color-border;
      @apply flex-auto;
    }

    .left-line.acetate {
      @apply opacity-0;
    }

    .left-line.not-vertical {
      @apply ~"min-w-[theme(spacing.6)]";
      @apply hidden;
      @apply ml-4;
    }

    .right-line {
      &.acetate {
        @apply opacity-0;
      }

      &.hide {
        @apply hidden;
      }

      &.not-vertical {
        @apply ~"min-w-[theme(spacing.6)]";
        @apply ml-4;
      }
    }

    .title-vertical {
      @apply text-sm;
      @apply font-normal;
      @apply truncate;
      @apply mt-3 mr-5 mb-0 ml-5;

      &.not-vertical {
        @apply hidden;
        @apply m-0;
      }
    }

    .description {
      @apply text-xs;
      @apply text-color-text-secondary;
      @apply mt-2;
      @apply line-clamp-2;
      @apply ml-8;
      @apply mr-5;
      @apply break-all;

      .disabled {
        @apply text-color-text-disabled;
      }

      .fault {
        @apply text-color-error;
      }

      .not-vertical {
        @apply ml-8;
      }
    }

    &.done .left-line {
      @apply border-t border-t-color-brand;
    }

    &.done .right-line {
      @apply border-t border-t-color-brand;
    }

    &.doing .left-line {
      @apply border-t border-t-color-brand;
    }

    .@{steps-prefix-cls}-main {
      @apply flex;
      @apply items-center;
    }

    &.mini {
      .@{steps-prefix-cls}-icon {
        @apply w-2;
        @apply h-2;
        @apply text-xs;

        &.fault {
          @apply border border-color-error;
          @apply bg-color-error-subtler;

          &.active {
            @apply bg-color-error;
          }
        }
      }

      .title,
      .title-vertical {
        @apply text-xs;
      }
    }

    &.small {
      .@{steps-prefix-cls}-icon {
        @apply w-4;
        @apply h-4;
        @apply text-xs;

        .icon {
          @apply ~'w-2.5';
          @apply ~'h-2.5';
        }
      }

      .title,
      .title-vertical {
        @apply text-xs;
      }
    }

    &.medium {
      .@{steps-prefix-cls}-icon {
        @apply w-6;
        @apply h-6;
        @apply text-sm;

        .icon {
          @apply ~'w-3.5';
          @apply ~'h-3.5';
        }
      }
    }

    &.large {
      .@{steps-prefix-cls}-icon {
        @apply w-8;
        @apply h-8;
        @apply text-base;

        .icon {
          @apply ~'w-4.5';
          @apply ~'h-4.5';
        }
      }

      .title,
      .title-vertical {
        @apply text-base;
      }
    }
  }

  &.medium .left-line {
    @apply mr-2;
  }

  &.medium .right-line {
    @apply ml-2;
  }

  &.small .left-line {
    @apply mr-2;
  }

  &.small .right-line {
    @apply ml-2;
  }

  &.mini .left-line {
    @apply mr-1;
  }

  &.mini .right-line {
    @apply ml-1;
  }

  &.large .left-line {
    @apply mr-3;
  }
  &.large .right-line {
    @apply ml-3;
  }

  .@{steps-prefix-cls}-right {
    @apply flex-1;
    @apply flex;
    @apply flex-col;
    @apply cursor-pointer;
    @apply text-center;

    &.not-vertical {
      @apply ~"min-w-[theme(spacing.32)]";
      @apply max-w-xs;
      @apply text-left;
    }

    .@{steps-prefix-cls}-main {
      @apply flex;
      @apply items-center;
      @apply relative;
    }

    .line {
      @apply border-t border-t-color-border;
      @apply flex-auto;
    }

    .line.right-line {
      @apply opacity-0;
    }

    .line.not-vertical {
      @apply ~"min-w-[theme(spacing.6)]";
      @apply hidden;
      @apply ml-4;
    }

    .@{steps-prefix-cls}-icon {
      @apply flex-none;
      @apply flex;
      @apply relative;
      @apply z-10;
    }

    .item-number {
      @apply w-full;
      @apply h-full;
      @apply flex;
      @apply items-center;
      @apply justify-center;
      @apply rounded-full;
      @apply border border-color-brand;
      @apply text-color-brand;
      @apply bg-color-bg-1;
      @apply relative;
      @apply ~'z-[9999]';
    }

    .item-circle {
      @apply flex-none;
      @apply rounded-full;
      @apply border border-color-brand;
      @apply bg-color-bg-1;
      @apply font-normal;
      @apply absolute;
    }
  }

  &.mini .@{steps-prefix-cls}-icon {
    @apply w-2;
    @apply h-2;
    @apply text-xs;
  }

  &.small .@{steps-prefix-cls}-icon {
    @apply w-4;
    @apply h-4;
    @apply text-xs;
  }

  &.medium .@{steps-prefix-cls}-icon {
    @apply w-6;
    @apply h-6;
    @apply text-sm;
  }

  &.large .@{steps-prefix-cls}-icon {
    @apply w-8;
    @apply h-8;
    @apply text-base;
  }

  &.mini {
    .item-number {
      @apply text-xs;
    }

    .item-circle {
      @apply w-2;
      @apply h-2;
    }
  }

  &.small {
    .item-number {
      @apply text-xs;
    }

    .item-circle {
      @apply w-4;
      @apply h-4;
    }
  }

  &.medium {
    .item-number {
      @apply text-sm;
    }

    .item-circle {
      @apply w-6;
      @apply h-6;
    }
  }

  &.large {
    .item-number {
      @apply text-base;
    }

    .item-circle {
      @apply w-8;
      @apply h-8;
    }
  }
}

.@{steps-prefix-cls} {
  color: @default-color;

  & &-advanced {
    & li {
      @apply ~"leading-[theme(spacing.12)]";
      @apply inline-block;
      @apply bg-color-bg-1;
      @apply relative;
      @apply cursor-pointer;

      &:not(:last-child)::after {
        @apply content-[''];
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 20px solid theme('colors.color.bg.1');
        @apply absolute;
        @apply right-px;
        @apply top-0;
        @apply ~'z-[1]';
      }
      &:hover:not(:last-child)::after {
        border-left-color: @active-color;
      }

      &:not(:last-child)::before {
        @apply content-[''];
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 20px solid @default-color;
        @apply absolute;
        @apply right-0;
        @apply top-0;
      }

      &.current:not(:last-child)::before,
      &:hover:not(:last-child)::before {
        border-left-color: @active-color;
      }

      &:not(:first-child) .label::after {
        @apply content-[''];
        border-top: 24px solid transparent;
        border-bottom: 24px solid transparent;
        border-left: 20px solid theme('colors.color.bg.1');
        @apply absolute;
        @apply -left-px;
        @apply top-0;
        @apply ~'z-[1]';
      }

      &:not(:first-child) .label::before {
        @apply content-[''];
        border-top: 24px solid transparent;
        border-bottom: 24px solid transparent;
        border-left: 20px solid @default-color;
        @apply absolute;
        @apply left-0;
        @apply top-0;
      }

      &.current:not(:first-child) .label::before,
      &:hover:not(:first-child) .label::before {
        border-left-color: @active-color;
      }

      &:first-child .label {
        @apply pl-3;
      }

      &.current {
        .label {
          background: @active-color;
          @apply border;
          @apply border-solid;
          border-color: @active-color;
          @apply text-color-text-inverse;
          @apply font-bold;
        }

        &::after {
          border-left-color: @active-color;
        }
      }

      &:last-child .label {
        @apply mr-0;
      }

      &:hover .label {
        background: @active-color;
        border-color: @active-color;
        @apply text-color-text-inverse;
        @apply no-underline;
      }

      .label {
        @apply border;
        @apply border-solid;
        border-color: @default-color;
        @apply border-r-0;
        @apply flex;
        @apply relative;
        @apply no-underline;
        @apply pl-8;
        @apply pr-11;
        color: @default-color;
        @apply text-sm;
        @apply mr-5;
        > span {
          @apply w-full;
          @apply h-full;
          @apply text-ellipsis;
          @apply whitespace-nowrap;
          @apply overflow-hidden;
        }
      }

      &:first-child {
        .label {
          @apply rounded-tl-sm;
          @apply rounded-bl-sm;
        }
      }

      &:last-child {
        .label {
          @apply border-r;
          border-right-color: @default-color;
          @apply rounded-tr-sm;
          @apply rounded-br-sm;
          @apply mr-0;
          @apply pr-16;
        }
      }

      .dot {
        @apply h-5;
        @apply w-5;
        @apply p-0;
        @apply leading-5;
        @apply cursor-pointer;
        @apply right-8;
        @apply ~"top-1/2";
        @apply ~"-translate-y-2/4";
        @apply flex;
        @apply absolute;
        svg {
          @apply w-full;
          @apply h-full;
          @apply fill-color-text-primary;
        }
      }

      &.current,
      &:hover {
        .dot svg {
          @apply fill-color-icon-inverse;
        }
      }
    }

    .count {
      @apply bg-color-error;
      @apply rounded-full;
      @apply text-color-text-inverse;
      @apply inline-block;
      @apply text-xs;
      @apply font-normal;
      @apply ~"h-4.5";
      @apply leading-normal;
      @apply py-0 ~'px-1.5';
      @apply text-center;
      @apply whitespace-nowrap;
      @apply absolute;
      @apply ~"-top-2.5";
      @apply right-8;
      @apply ~'z-[1]';
    }
  }

  .process-wait,
  .process-wait .status,
  .process-wait .node-description .status {
    color: @disabled-color;
  }

  .process-wait {
    .icon:hover {
      color: @active-color;
    }
  }

  .line {
    @apply bg-color-border-separator;
  }

  .icon {
    @apply w-6;
    @apply h-6;
    @apply leading-6;
    @apply box-border;
    @apply relative;
    @apply text-sm;
    @apply text-center;
    left: ~'calc(50% - 12px)';
    @apply top-0;
    @apply rounded-full;
    @apply bg-color-bg-1;
    color: @disabled-color;
    @apply cursor-pointer;
    @apply ~'z-[15]';
  }

  .process-done {
    .icon {
      @apply bg-color-bg-1;
      @apply w-6;
      @apply h-6;
      @apply leading-6;
      @apply text-2xl;
      color: @active-color;

      .fixicon {
        fill: @active-color;
        @apply align-baseline;
        @apply border;
        @apply border-solid;
        border-color: @active-color;
        @apply rounded-full;
        @apply p-1;

        &.icon-error {
          @apply p-0;
          @apply fill-color-error;
          @apply border-0;
        }

        &.icon-warning {
          @apply p-0;
          @apply fill-color-warning;
          @apply border-0;
        }

        &.fixicons {
          @apply p-0;
          @apply border-0;
        }
      }
    }

    .line {
      @apply bg-color-text-primary;
    }
  }

  .node-description {
    @apply relative;
    @apply mt-3;
    @apply overflow-hidden;
    @apply text-center;

    .name {
      @apply text-sm;
      @apply float-left;
      @apply font-bold;
      @apply w-full;
      @apply leading-5;
    }

    .status {
      @apply text-xs;
      @apply mt-2;
      @apply text-color-text-secondary;
      @apply float-left;
      @apply w-full;
    }
  }

  .process-current {
    color: @active-color;

    .icon {
      background: @active-color;
      @apply text-color-text-inverse;
      @apply text-sm;
    }

    .status {
      color: @active-color;
    }
  }

  .reverse {
    .process-current {
      .line {
        @apply bg-color-text-primary;
      }
    }
  }

  & &-normal {
    @apply overflow-hidden;

    .normal {
      @apply block;
      @apply float-left;
    }

    .line {
      @apply h-px;
      @apply ~'left-1/2';
      @apply ~"-top-3";
      @apply relative;
    }

    .line-end {
      @apply w-0;
    }

    .process-done {
      .line {
        @apply bg-color-text-primary;
      }
    }

    .icon {
      span {
        @apply inline-block;
      }
    }
  }

  & &-timeline {
    @apply overflow-hidden;

    .timeline {
      @apply overflow-hidden;

      .line {
        @apply w-px;
        @apply float-left;

        .@{css-prefix}svg {
          @apply align-baseline;
        }
      }

      .date-time {
        @apply w-24;
        @apply float-left;
        @apply pr-6;
        @apply text-right;
        @apply text-xs;

        .time {
          @apply block;
          @apply leading-none;
        }

        .date {
          @apply block;
          @apply leading-none;
          @apply mb-1;
        }
      }

      .name {
        @apply float-left;
        @apply ml-6;
        @apply text-sm;
        @apply font-bold;
        @apply ~"leading-6.5";
      }

      .icon {
        @apply top-0;
      }
    }
  }

  .process-wait {
    .icon {
      @apply border border-solid;
    }
  }

  &.mobile {
    padding-left: 10%;

    .@{steps-prefix-cls}-timeline {
      overflow: inherit;

      .@{css-prefix-iconfont} {
        font-size: 45px;
      }

      .timeline {
        .line {
          .icon {
            width: 45px;
            line-height: 45px;
            height: 45px;
            @apply text-4xl;
            @apply relative;
            @apply ~"-left-5";
          }
        }

        .name {
          margin-left: 30px;
          font-size: 26px;
          @apply font-bold;
        }

        & > div {
          @apply ml-5;
        }
      }
    }
  }
}