$track-fill: var(
  --wds-color-fill-standard-secondary-disabled,
  var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1))
);
$track-shadow: 0 var(--wds-shadow-y-25, 0) var(--wds-shadow-blur-25, 0) 0
  var(--wds-inner-shadow-fill-track, transparent) inset;
$icon-color: var(
  --wds-color-text-standard-primary-light,
  var(--wsr-color-D80, #ffffff)
);

.linear-progress-bar {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 6px;
  height: 30px;
  gap: var(--wds-linear-progress-bar-value-gap, var(--wds-space-300, 18px));

  &__progress-indication-section {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__bar-container {
    width: 100%;
    position: relative;
    height: 100%;
  }

  @at-root button#{&}__bar-container {
    border: 0;
    padding: 0;
  }

  &__bar-background,
  &__bar-foreground {
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
  }

  &__bar-background {
    width: 100%;
  }

  &#{&}--padding-none {
    padding: unset;
  }

  &#{&}--height-none {
    height: unset;
  }

  & &__bar-foreground {
    transition: width 0.5s ease-in-out;
  }

  &#{&}--skin-standard &__bar-foreground {
    background: var(
      --wds-color-fill-standard-primary,
      var(--wsr-color-B05, #0f62e6)
    );
  }

  &#{&}--skin-warning &__bar-foreground {
    background: var(
      --wds-color-fill-warning-primary,
      var(--wsr-color-Y10, #ffb700)
    );
  }

  &#{&}--skin-success &__bar-foreground {
    background: var(
      --wds-color-fill-success-primary,
      var(--wsr-color-G05, #229954)
    );
  }

  &#{&}--skin-premium &__bar-foreground {
    background: var(
      --wds-color-fill-premium-primary,
      var(--wsr-color-P10, #9a27d5)
    );
  }

  &#{&}--skin-neutral &__bar-foreground {
    background: var(--wds-color-black-400, var(--wsr-color-D40, #868aa5));
  }

  &#{&}--skin-standard &__bar-background {
    background: $track-fill;
  }

  &#{&}--skin-warning &__bar-background {
    background: var(
      --wds-color-fill-warning-secondary-disabled,
      var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1))
    );
  }

  &#{&}--skin-success &__bar-background {
    background: var(
      --wds-color-fill-success-secondary-disabled,
      var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1))
    );
  }

  &#{&}--skin-premium &__bar-background {
    background: var(
      --wds-color-fill-premium-secondary-disabled,
      var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1))
    );
  }

  &#{&}--skin-neutral &__bar-background {
    background: var(
      --wds-color-fill-dark-secondary-disabled,
      var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1))
    );
  }

  & &__bar-background {
    background: $track-fill;
    box-shadow: $track-shadow;
  }

  & &__bar-background,
  & &__bar-foreground {
    border-radius: var(
      --wds-linear-progress-bar-border-radius,
      var(--wds-border-radius-full, 2px)
    );
    height: 4px;
  }

  &#{&}--error &__bar-foreground {
    background: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R05, #d0180b)
    );
  }

  &#{&}--light &__bar-background {
    background: var(
      --wds-color-fill-light-primary-disabled,
      var(--wsr-color-D80-30, rgba(255, 255, 255, 0.3))
    );
  }

  & &__indication-container > * {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  & &__progress-percentage,
  & &__suffix-indication {
    font-family: var(
      --wds-font-family-default,
      var(
        --wsr-font-family,
        Madefor,
        'Helvetica Neue',
        Helvetica,
        Arial,
        'メイリオ',
        'meiryo',
        'ヒラギノ角ゴ pro w3',
        'hiragino kaku gothic pro',
        sans-serif
      )
    );
    font-weight: var(
      --wds-font-weight-regular,
      var(--wsr-font-weight-regular, 400)
    );
    color: var(
      --wds-color-text-standard-primary,
      var(--wsr-color-D20, #333853)
    );
    font-size: var(--wds-font-size-heading-6, 12px);
    letter-spacing: var(
      --wds-linear-progress-bar-label-font-letter-spacing,
      var(--wds-font-letter-spacing-heading-6, 1px)
    );
    line-height: var(
      --wds-linear-progress-bar-label-font-line-height,
      var(--wds-font-line-height-heading-6, 18px)
    );
  }

  & &__progress-icon {
    border-radius: 12px;
    width: 18px;
    height: 18px;
  }

  &#{&}--skin-standard#{&}--success &__progress-icon {
    background: var(
      --wds-color-fill-standard-primary,
      var(--wsr-color-B05, #0f62e6)
    );
    color: $icon-color;
  }

  &#{&}--skin-success#{&}--success &__progress-icon {
    background: var(
      --wds-color-fill-success-primary,
      var(--wsr-color-G05, #229954)
    );
    color: $icon-color;
  }

  &#{&}--skin-warning#{&}--success &__progress-icon {
    background: var(
      --wds-color-fill-warning-primary,
      var(--wsr-color-Y10, #ffb700)
    );
    color: $icon-color;
  }

  &#{&}--skin-premium#{&}--success &__progress-icon {
    background: var(
      --wds-color-fill-premium-primary,
      var(--wsr-color-P10, #9a27d5)
    );
    color: $icon-color;
  }

  &#{&}--skin-neutral#{&}--success &__progress-icon {
    background: var(--wds-color-black-400, var(--wsr-color-D40, #868aa5));
    color: $icon-color;
  }

  & &__progress-percentage,
  & &__suffix-indication {
    color: var(
      --wds-color-text-standard-primary,
      var(--wsr-color-D10, #000624)
    );
  }

  &#{&}--light &__progress-percentage,
  &#{&}--light &__suffix-indication {
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  @media (prefers-reduced-motion) {
    & &__bar-foreground {
      transition: none !important;
    }
  }
}