@import '../../../index.less';
@btri-step: ~'@{ant-prefix}-btri-step';

.@{btri-step} {
  &-item {
    width: 100%;
    background-color: var(--primary-1);

    margin-left: -2%;

    &.error,
    &.error.active {
      background-color: var(--red-6);
    }
    &.small {
      .@{btri-step}-item-container {
        .@{btri-step}-item-title {
          font-size: 14px;
        }
        .@{btri-step}-item-description {
          font-size: 12px;
        }
      }
    }
    .@{btri-step}-item-container {
      padding: 12px 10%;
      .@{btri-step}-item-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--gray-13);
      }
      .@{btri-step}-item-description {
        margin-top: 4px;
      }
    }
    &:last-child {
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 10% 50%);
    }
    &:first-child {
      clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
    }

    &:not(&:first-child) {
      .@{btri-step}-item-container {
        padding: 12px 10% 12px 20%;
      }
    }
    &:not(&:first-child):not(:last-child) {
      clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
    }
    &.active {
      background-color: var(--primary-6);
      .@{btri-step}-item-container {
        .@{btri-step}-item-title {
          color: var(--white);
        }
        .@{btri-step}-item-description {
          color: var(--white);
        }
      }
    }
    &.disactive {
      background-color: var(--gray-2);
      .@{btri-step}-item-container {
        .@{btri-step}-item-title {
          color: var(--caption-font);
        }
        .@{btri-step}-item-description {
          color: var(--caption-font);
        }
      }
    }
  }
}