@use './mixins' as progress-mixins;

.rs-progress-line {
  --rs-progress-line-color: var(--rs-progress-bar);
  --rs-progress-line-trail-color: var(--rs-progress-bg);
  --rs-progress-line-size: 10px;
  --rs-progress-line-trail-size: var(--rs-progress-line-size);
  --rs-progress-line-stroke: 0;
  --rs-progress-line-radius: var(--rs-radius-sm);
  --rs-progress-line-stripe-size: 16px;
  --rs-progress-line-section-gap: 0px;
  --rs-progress-bg-transition: 0.2s ease-in-out;

  display: flex;
  align-items: center;
  width: 100%;
  gap: calc(var(--rs-spacing) * 3);
  font-size: var(--rs-font-size-sm);

  &:where([data-status='active']) {
    .rs-progress-line-stroke {
      position: relative;

      &::before {
        content: '';
        opacity: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
        background-color: #fff;
        border-radius: var(--rs-radius-lg);
        animation: progress-active 1.2s cubic-bezier(0.23, 1, 0.32, 1) infinite;
      }
    }
  }

  &:where([data-status='success']) {
    color: var(--rs-progress-bar-success);

    .rs-progress-line-stroke {
      background: var(--rs-progress-bar-success);
    }
  }

  &:where([data-status='fail']) {
    color: var(--rs-progress-bar-fail);

    .rs-progress-line-stroke {
      background: var(--rs-progress-bar-fail);
    }
  }

  .rs-progress-line-info {
    height: 20px;
    display: flex;
    align-items: center;

    svg {
      // 替换 Less 的 .icon-bolder(0.5px) 为直接的 CSS
      stroke-width: 0.5px;
    }
  }

  // Default end position (info on the right)
  &:where([data-placement='end']) {
    flex-direction: row;
  }

  // Start position (info on the left)
  &:where([data-placement='start']) {
    flex-direction: row-reverse;
  }

  // Inside positions
  &:where([data-placement='insideStart']),
  &:where([data-placement='insideEnd']),
  &:where([data-placement='insideCenter']) {
    .rs-progress-line-info {
      color: #fff;
      padding-inline: var(--rs-spacing);
    }
  }

  &:where([data-placement='insideStart']) .rs-progress-line-stroke {
    justify-content: flex-start;
  }

  &:where([data-placement='insideEnd']) .rs-progress-line-stroke {
    justify-content: flex-end;
  }

  &:where([data-placement='insideCenter']) .rs-progress-line-stroke {
    justify-content: center;
  }

  &-outer {
    flex: 1 1 auto;
    border-radius: var(--rs-progress-line-radius);
    overflow: hidden;
    // Make sure outer vertical-align:center;
    vertical-align: middle;
    position: relative;
  }

  &-trail {
    display: flex;
    align-items: center;
    background: var(--rs-progress-line-trail-color);
    border-radius: var(--rs-progress-line-radius);
    height: var(--rs-progress-line-trail-size);
  }

  &-sections {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: var(--rs-progress-line-radius);
    cursor: default;
  }

  &-stroke {
    display: flex;
    align-items: center;
    background: var(--rs-progress-line-color);
    border-radius: var(--rs-progress-line-radius);
    transition: var(--rs-progress-bg-transition);
    transition-property: width, height, background-color;
    width: var(--rs-progress-line-stroke);
    height: var(--rs-progress-line-size);
    position: relative;
    overflow: hidden;

    // Section-specific border radius styles
    &.rs-progress-line-section {
      color: #fff;
      border-radius: 0;
      padding-inline: var(--rs-spacing);

      // First section in horizontal layout
      &:where(:first-of-type) {
        border-start-start-radius: var(--rs-progress-line-radius);
        border-end-start-radius: var(--rs-progress-line-radius);
      }

      // Last section in horizontal layout
      &:where(:last-of-type) {
        border-start-end-radius: var(--rs-progress-line-radius);
        border-end-end-radius: var(--rs-progress-line-radius);
      }
    }
  }

  &.rs-progress-line-vertical {
    flex-direction: column-reverse;
    width: auto;
    height: 100%;
  }

  // Inside positions
  &.rs-progress-line-vertical {
    // Vertical mode positioning
    &:where([data-placement='start']) {
      flex-direction: column;
    }

    &:where([data-placement='end']) {
      flex-direction: column-reverse;
    }

    &:where([data-placement='insideStart']),
    &:where([data-placement='insideEnd']),
    &:where([data-placement='insideCenter']) {
      .rs-progress-line-info {
        @include progress-mixins.vertical-text;
      }
    }

    &:where([data-placement='insideStart']) .rs-progress-line-stroke {
      align-items: flex-start;
    }

    &:where([data-placement='insideEnd']) .rs-progress-line-stroke {
      align-items: flex-end;
    }

    &:where([data-placement='insideCenter']) .rs-progress-line-stroke {
      align-items: center;
    }
  }

  &.rs-progress-line-vertical .rs-progress-line-outer {
    width: auto;
    flex: 1 1 auto;
  }

  &.rs-progress-line-vertical .rs-progress-line-trail {
    min-height: 100px;
    width: var(--rs-progress-line-trail-size);
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    position: relative;
    height: 100%;
  }

  &.rs-progress-line-vertical .rs-progress-line-info {
    flex-basis: auto;
    width: 100%;
  }

  &.rs-progress-line-vertical .rs-progress-line-sections {
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
  }

  &.rs-progress-line-vertical .rs-progress-line-stroke {
    width: 100%;
    height: var(--rs-progress-line-stroke);
    transition-property: height, background-color;
    transform: rotate(180deg);
    position: absolute;
    bottom: 0;
    left: 0;

    &.rs-progress-line-section {
      @include progress-mixins.vertical-text;

      // First section in vertical layout
      &:where(:first-of-type) {
        border-top-left-radius: var(--rs-progress-line-radius);
        border-top-right-radius: var(--rs-progress-line-radius);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      // Last section in vertical layout
      &:where(:last-of-type) {
        border-bottom-left-radius: var(--rs-progress-line-radius);
        border-bottom-right-radius: var(--rs-progress-line-radius);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }
    }
  }

  &.rs-progress-line-vertical:where([data-status='active']) .rs-progress-line-stroke::before {
    animation-name: progress-active-vertical;
  }

  // Striped effect
  &-striped .rs-progress-line-stroke {
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
      );
      background-size: var(--rs-progress-line-stripe-size) var(--rs-progress-line-stripe-size);
      z-index: 0;
    }
  }

  &-striped:where([data-status='active']) .rs-progress-line-stroke::after {
    animation: progress-stripe 1s linear infinite;
  }

  &.rs-progress-line-vertical.rs-progress-line-striped .rs-progress-line-stroke::after {
    background-image: linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
  }

  &.rs-progress-line-vertical.rs-progress-line-striped:where([data-status='active'])
    .rs-progress-line-stroke::after {
    animation: progress-stripe-vertical 1s linear infinite;
  }

  // Indeterminate animation
  &-indeterminate {
    .rs-progress-line-stroke {
      width: 100%;
      position: relative;
      overflow: hidden;
      background-color: var(--rs-progress-line-trail-color);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 30%;
        background-color: var(--rs-progress-line-color);
        will-change: transform;
        animation: progress-indeterminate 1.5s ease-in-out infinite;
      }
    }
  }

  &.rs-progress-line-vertical.rs-progress-line-indeterminate {
    .rs-progress-line-stroke {
      height: 100%;
      background-color: var(--rs-progress-line-trail-color);
      transform: rotate(180deg);

      &::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 30%;
        background-color: var(--rs-progress-line-color);
        will-change: transform;
        animation: progress-indeterminate-vertical 1.5s ease-in-out infinite;
      }
    }
  }
}