/**
 *
 * This file may have been modified by Bytedance Inc. (“Bytedance Inc.'s Modifications”). 
 * All Bytedance Inc.'s Modifications are Copyright (year) Bytedance Inc..  
 * 
 * This source code is licensed under the Apache license.
 * See LICENSE file in the project root for license information.
 *
 */
@import '../../../styles/variables.less';
@import '../../../styles/mixins.less';

@import './variables.less';
@import './mixins.less';

@timeline-prefix-cls: ~'@{ant-prefix}-timeline';

.@{ant-prefix}-timeline {
  .fontStyle-4-normal();

  &-item {
    padding-bottom: @Spacing-8;
    color: @color-text-icon-2;

    &-label {
      top: -5px !important;
    }

    &-head {
      width: 13px;
      height: 13px;
      border-radius: 50%;

      &-blue {
        background-color: @color-primary-brand;
        border-color: @color-primary-bright;
        border-width: 3px;
      }

      &-gray {
        background-color: @color-line-0;
        border-color: #fff;
        border-width: 3px;
      }

      &-red {
        background-color: @error-color;
        border-color: @color-function-danger-bright;
        border-width: 3px;
      }

      &-green {
        background-color: @success-color;
        border-color: @color-function-success-bright;
        border-width: 3px;
      }
    }

    &-head-custom {
      width: auto;
      height: auto;
      left: 6px;

      &.@{ant-prefix}-timeline-item-head-blue {
        background-color: transparent;
      }

      &.@{ant-prefix}-timeline-item-head-gray {
        background-color: transparent;
      }
    }

    &-content {
      top: -5px;
      margin: 0 0 0 @Spacing-10;
    }

    &-tail {
      left: 5.5px;
      border-left: @line-dotted-regular @color-line-1;
    }
  }

  &.@{timeline-prefix-cls}-alternate,
  &.@{timeline-prefix-cls}-right,
  &.@{timeline-prefix-cls}-label {
    .@{timeline-prefix-cls}-item {
      &-left {
        .@{timeline-prefix-cls}-item-content {
          left: calc(50% - 5.5px);
        }
      }
    }
  }

  &.@{timeline-prefix-cls}-label {
    .@{timeline-prefix-cls}-item-label {
      position: absolute;
      top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
      right: calc(50% + 5.5px);
      margin-right: 8px;
      text-align: right;
    }

    .@{timeline-prefix-cls}-item-right {
      .@{timeline-prefix-cls}-item-label {
        left: calc(50% + 5.5px);
        margin-left: 8px;
        text-align: left;
      }
    }
  }
}

.@{ant-prefix}-timeline-label:not(.sp-null) {
  .@{ant-prefix}-timeline-item-head {
    margin-left: -6px;

    &.@{ant-prefix}-timeline-item-head-custom {
      margin-left: 1px;
    }
  }
}