@use 'sass:map';
@use 'sass:color';

@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;

#{getClassName((steps))} {
  display: flex;
  flex-direction: row;
  overflow: auto;
  font-size: #{getValName((steps, font-size))};
  text-align: center;
  line-height: 1;
  &#{getClassName((steps, reverse))} {
    flex-direction: row-reverse;
    #{getClassName((steps, item))} {
      &:first-child {
        .hd {
          &:after {
            display:none;
          }
        }
      }
      &:last-child {
        .hd {
          &:after {
            display:block;
          }
          &:before {
            display:none;
          }
        }
      }
      &.is-pass, &.is-reject, &.is-warning {
        + .is-current {
          .hd {
            &:after {
              @include set-css-val(
                steps,
                (
                  'line-color': (color, primary),
                )
              )
            }
          }
        }
      }
    }
  }
}
#{getClassName((steps, item))} {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 100px;
  .hd {
    align-items: center;justify-content: center;display: flex;position: relative;
    &:after, &:before{
      content: '';display: block;position: absolute;width: 100%;height: #{getValName((steps, line-width))};top: 50%;margin-top: -1px;
      background-color: #{getValName((steps, line-color))}; // var(--color-neutral-5);
    }
    &:after {
      left: 50%;
    }
    &:before{
      right: 50%;
    }
  }
  .bd {
    // font-weight: #{getValName((steps, title-font-weight))};
    // color: #{getValName((steps, title-color))};
    // margin: #{getValName((space, s))} #{getValName((space, none))};
    // display: flex;align-items:center;justify-content: center;
    // height: 2.4em;
    // .bd-box {
    //   word-break: break-word;
    //   text-overflow: -o-ellipsis-lastline;
    //   overflow: hidden;
    //   text-overflow: ellipsis;
    //   display: -webkit-box;
    //   -webkit-line-clamp: 2;
    //   line-clamp: 2;
    //   -webkit-box-orient: vertical;
    //   max-height: 100%;
    //   line-height: 1.2em;
    // }
  }
  .ft {
    
  }
  &:first-child {
    .hd {
      &:before {
        display: none;
      }
    }
  }
  &:last-child {
    .hd {
      &:after {
        display: none;
      }
    }
    #{getClassName((steps, item, warning, icon))} {display:none;}
  }
  &.is-current, &.is-reject {
    .hd {
      &:before {
        @include set-css-val(
        steps,
        (
          'line-color': (color, primary),
        )
      )
      }
    }
  }
  &.is-current {
    @include set-css-val(
      steps,
      (
        'icon-bg-color': (color, neutral, 8),
        'title-font-weight': (font, semi, bold)
      )
    );
    + .is-reject {
      .hd {
        &:before {
          @include set-css-val(
          steps,
          (
            'line-color': (color, neutral, 2),
          )
        )
        }
      }
    }
  }
  &.is-pass {
    @include set-css-val(
      steps,
      (
        'title-color': (color, primary),
        'icon-bg-color': (color, primary),
        'line-color': (color, primary),
      )
    )
  }
  &.is-reject {
    @include set-css-val(
      steps,
      (
        'title-color': (color, danger),
        'icon-bg-color': (color, danger),
        'line-color': (color, primary),
      )
    )
  }
  &.is-warning {
    @include set-css-val(
      steps,
      (
        'title-color': (color, warning),
        'icon-bg-color': (color, warning),
        'line-color': (color, primary),
      )
    )
  }
  
}

#{getClassName((steps, title))} {
  &:empty {
    display:none;
  }
  font-weight: #{getValName((steps, title-font-weight))};
  color: #{getValName((steps, title-color))};
  margin: #{getValName((space, s))} #{getValName((space, none))};
}

#{getClassName((steps, description))} {
  margin: #{getValName((space, xs))} #{getValName((space, none))};
  color: #{getValName((steps, description, color))};
  overflow: hidden;
}

#{getClassName((steps, iconbox))} {
  height: 2em;
  display: flex;align-items: center;justify-content: center;border-radius: 100%;
  position: relative;
  z-index: 4;
  #{getClassName((steps, iconbox, warp))} {
    padding: .4em;
    display: flex;align-items: center;justify-content: center;border-radius: 100%;
    background-color: #{getValName((steps, icon-bg-color))};
    color: #{getValName((steps, icon-color))};
  }
}
// #{getClassName((steps, item, warning, icon))} {
//   position: absolute;
//   font-size: var(--font-size-h6);
//   right: -0.5em;
//   color: var(--color-warning);
//   z-index: 2;display:none;
// }

#{getClassName((steps, vertical))} {
  text-align: left;
  flex-direction: column;
  #{getClassName((steps, iconbox))} {
    width: 2em;
    height: auto;
  }
  #{getClassName((steps, title))} {
    margin-top: .2em;
  }
  #{getClassName((steps, item))} {
    flex-direction: row;
    .hd {
      align-items: flex-start;
      &:after, &:before{
        content: '';display: block;position: absolute;width: #{getValName((steps, line-width))};height: 100%;top: 0px;margin-top: 0;
        background-color: #{getValName((steps, line-color))}; // var(--color-neutral-5);
      }
      &:after {
        left: 50%;
        margin-left: -1px;
      }
      &:before{
        right: 50%;
        display:none;
      }
    }
    .bd {
      padding-left: .5em;
      padding-bottom: 1em;
    }
    &:last-child {
      .hd {
        &:after {
          display:none;
        }
      }
    }
  }
  &#{getClassName((steps, reverse))} {
    flex-direction: column-reverse;
    #{getClassName((steps, item))} {
      &:first-child {
        .hd {
          &:after {
            display:none;
          }
        }
      }
      &:last-child {
        .hd {
          &:after {
            display:block;
          }
        }
      }
      &.is-pass, &.is-reject, &.is-warning {
        + .is-current {
          .hd {
            &:after {
              @include set-css-val(
                steps,
                (
                  'line-color': (color, primary),
                )
              )
            }
          }
        }
      }
    }
  }
}

#{getClassName((steps))} {
  #{joinValName((steps, line-width))}: 1px;
  @include set-css-val(
    steps,
    (
      'font-size': (heading8),
      'title-color': (color, neutral, 10),
      'line-color': (color, neutral, 2),
      'icon-bg-color': (color, neutral, 4),
      'icon-color': (color, neutral, 0),
      'title-font-weight': (font, regular),
      'description-color': (color, neutral, 5),
    )
  )
}
#{getClassName((steps, large))} {
  @include set-css-val(
    steps,
    (
      'font-size': (heading7),
    )
  );
}
#{getClassName((steps, mini))} {
  @include set-css-val(
    steps,
    (
      'font-size': (heading9),
    )
  );
}