/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../mixins/hairline.less';
@import '../custom.less';
@import './vars.less';

@timeline-prefix-cls: ~'@{css-prefix}mobile-timeline';

.@{timeline-prefix-cls} {
  overflow: hidden;
  font-size: var(--ti-mobile-timeline-font-size, 14px);

  &__item {
    .hairline('bottom', var(--ti-mobile-timeline-hairline-color, #ddd));

    &.complete {
      .@{timeline-prefix-cls}__date,
      .@{timeline-prefix-cls}__time {
        color: var(--ti-mobile-timeline-complete-color, #ccc);
      }

      .@{timeline-prefix-cls}__icon {
        background: var(--ti-mobile-timeline-complete-icon-bgcolor, #f8f8f8);
        border: 1px solid var(--ti-mobile-timeline-complete-icon-border-color, #ccc);
      }

      .@{timeline-prefix-cls}__title,
      .@{timeline-prefix-cls}__cycle,
      .@{timeline-prefix-cls}__user,
      .@{timeline-prefix-cls}__tip {
        color: var(--ti-mobile-timeline-complete-color, #ccc);
      }
    }

    &.fail {
      .@{timeline-prefix-cls}__icon {
        background: var(--ti-mobile-timeline-fail-icon-color, #f36f64);
        border: 1px solid var(--ti-mobile-timeline-fail-icon-color, #f36f64);
      }
    }

    &.success {
      .@{timeline-prefix-cls}__icon {
        background: var(--ti-mobile-timeline-success-icon-color, #50e3c2);
        border: 1px solid var(--ti-mobile-timeline-success-icon-color, #50e3c2);
      }
    }

    &.current {
      .@{timeline-prefix-cls}__icon {
        background: var(
          --ti-mobile-timeline-current-icon-color,
          radial-gradient(#fff, #fff 15%, #36b2ef, #90d3f3, #cdebfa, #fff)
        );
      }
    }

    &:first-child .@{timeline-prefix-cls}__line:before {
      height: 60%;
      bottom: 0;
    }

    &:last-child .@{timeline-prefix-cls}__line:before {
      height: 30%;
    }
  }

  & &__list {
    display: flex;
  }

  & &__line {
    width: 1px;
    position: relative;

    &:before {
      content: '';
      width: 1px;
      height: 100%;
      display: block;
      position: absolute;
      background-color: var(--ti-mobile-timeline-hairline-color, #ddd);
      left: 0;
      transform-origin: 100% 50%;

      html:not([data-scale]) & {
        @media (min-resolution: 2dppx) {
          transform: scaleX(0.5);
        }

        @media (min-resolution: 3dppx) {
          transform: scaleX(0.33);
        }
      }
    }
  }

  & &__date-time {
    text-align: right;
    color: var(--ti-mobile-timeline-color, #333);
    padding: 15px 22px 15px 4px;
    min-width: 100px;
  }

  & &__time {
    display: block;
    color: var(--ti-mobile-timeline-color, #333);
    font-size: var(--ti-mobile-timeline-font-size, 14px);
  }

  & &__date {
    font-size: var(--ti-mobile-timeline-font-size, 14px);
  }

  & &__content {
    display: flex;
    flex-direction: column;
    padding: 15px 16px 14px 22px;
    flex: 1;
  }

  &__title {
    display: inline-block;
    width: 60%;
    margin-bottom: 2px;
    line-height: 1.6;
  }

  &__user {
    width: 60%;
    color: var(--ti-mobile-timeline-user-color, #039be5);
    display: inline-block;
  }

  &__cycle {
    color: var(--ti-mobile-timeline-cycle-color, #666);
  }

  &__tip {
    color: var(--ti-mobile-timeline-tip-color, #ef4f4f);
  }

  .name {
    float: left;
    margin-left: 15px;
    font-size: var(--ti-mobile-timeline-font-size, 14px);
  }

  &__icon {
    width: var(--ti-mobile-timeline-icon-size, 20px);
    height: var(--ti-mobile-timeline-icon-size, 20px);
    line-height: var(--ti-mobile-timeline-icon-size, 20px);
    position: relative;
    text-align: center;
    left: ~'calc(50% - 10px)';
    top: 17px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 15;
  }
}
