.wrap {
  position: relative;
  display: flex;

  &.color-green {
    --progress-color: var(--theme-green-color);
    --background-color: #ccf6ea; // rgba(var(--theme-green-color-rgb), 0.16);
  }

  &.color-red {
    --progress-color: var(--theme-red-color);
    --background-color: #ffd9d7; // rgba(var(--theme-red-color-rgb), 0.16);
  }

  &.color-blue-green {
    --progress-color: linear-gradient(to right, var(--theme-blue-color), var(--theme-green-color));
    // --background-color: #ffd9d7; // rgba(var(--theme-red-color-rgb), 0.16);
  }

  &.background-green {
    --background-color: var(--theme-green-color);
  }

  &.background-red {
    --background-color: var(--theme-red-color);
  }

  &.target {
    margin-block: 8px;

    &::after {
      content: '';
      position: absolute;
      top: -8px;
      bottom: -8px;
      width: 4px;
      height: 24px;
      background: var(--background-color);
      border-radius: 2px;
      left: calc(var(--target-progress) * 1%);
      transform: translateX(-1px);
    }

    &.passedTarget {
      &::after {
        background: var(--progress-color);
      }
    }
  }
}

.progress {
  display: flex;
  border-radius: 30px;
  height: calc(var(--progress-height) * 1px);
  border: 0;
  width: 100%;
  background: var(--background-color, rgba(var(--theme-grey-color-rgb), 0.16));
  position: relative;
  overflow: hidden;

  &::-webkit-progress-bar {
    background: var(--background-color, rgba(var(--theme-grey-color-rgb), 0.16));
    border-radius: 10px;
  }

  &::-webkit-progress-value {
    background: var(--progress-color, var(--theme-grey-color));
    border-radius: 10px 0 0 10px;
  }

  &::-moz-progress-bar {
    background: var(--progress-color, var(--theme-grey-color));
    border-radius: 10px 0 0 10px;
  }
}

.tranchePercentageProgress {
  display: flex;
  border-radius: 10px;
  height: 4px;
  border: 0;
  width: 100%;
  background-color: var(--background-color, var(--theme-border-color));
  position: relative;

  &::-webkit-progress-bar {
    background-color: var(--background-color, var(--theme-border-color));
    border-radius: 10px;
  }

  &::-webkit-progress-value {
    background-color: var(--progress-color, var(--theme-blue-color));
    border-radius: 10px 0 0 10px;
  }

  &::-moz-progress-bar {
    background-color: var(--progress-color, var(--theme-blue-color));
    border-radius: 10px 0 0 10px;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    height: 4px;
    background-color: var(--theme-card-color);
    left: calc(var(--target-progress) * 1%);
    transform: translateX(-1px);
  }

  &::after {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    height: 12px;
    background-color: var(--current-color);
    border-radius: 2px;
    left: calc(var(--current-progress) * 1%);
    transform: translateX(-1px);
  }
}
